ngStyle with Angular 2 and TypeScript
ngStyle directive allows you to set CSS style on an HTML element conditionally.
In the text below, when you see a word or phrase, click on it to highlight the source code.
Also, take a look at the IDE style to see this tutorial in wide-screen mode. You can always switch back using the Style link at the top of the page.
We can set inline styles dynamically with the
We bind the
We can also use
Here is the output from this component.
To learn more about the other built-in directives, take a look at these tutorials.
- ngIf adds and removes elements in the DOM based on the results of an expression.
- ngSwitch displays one element (and its children) from a set of possible options, based on some condition.
- ngFor is a repeater directive which outputs a list of elements by iterating over an array.
- ngClass adds and removes CSS classes on an element.