What’s the difference between [style] and [ngStyle] in Angular?
<p>The above code would style the <code>div</code> using a color value set on the <code>errorMessageColor</code> property of your component. Thanks to the data binding, whenever that property changes, the <code>div</code> would get a new color.</p>
<p>You can make the above example even more powerful using the ternary operator in your expression to express a conditional styling:</p>
<pre>
<div [style.color]="hasError ? 'red' : 'black' ">
The phone number you entered does not match the expected format
</div></pre>
<p>The above example assumes that <code>hasError</code> can evaluate to <code>true</code>, which is convenient since in Javascript anything that is not <code>null</code> or <code>undefined</code> would work. As a result, if <code>hasError</code> is something that isn’t <code>null</code> or <code>undefined</code> or <code>false</code>, then the message will show up in red color, otherwise it will be black.</p>
<p><a href="https://blog.angulartraining.com/whats-the-difference-between-style-and-ngstyle-in-angular-68a3301c2ae6"><strong>Visit Now</strong></a></p>