ngClass with Angular 2 and TypeScript
ngClass adds and removes CSS classes on an element.
[ngClass] directive (in square brackets) uses the results of a template expression
(in quotes) to set the names of the classes.
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.
The second example uses a key:value
We can also use a
You can give it a try here.
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.
- ngStyle sets CSS styles on an HTML element conditionally.