Angular #6 [ngClass]

 Ex. 11

[ngClass] Directive adds and removes CSS classes in an HTML element.

create class-demo project by 

Open styles.css in app root. Add the following and save:

.mystyle1{

    color: yellow;

    background-color: red;

    font-size: 16px;

}

.mystyle2

{

    height: 200px;

}

Open app.component.html

Delete the old contents, add the following code and save.

<P>ngClass Demo</P>

<div [ngClass] = "{mystyle1: true}">

  This is with red background and yellow text ie. mystyle1

</div>

 

<div [ngClass] = "{mystyle2: true}">

  This is with height 200px ie. mystyle2

</div>

<div [ngClass] = "['mystyle1', 'myclass2']">

  This is with red background and yellow text + height 200 pixel <br>

  ie. myclass1, mystyle2

</div>

Open browser with localhost:4200 to check the screen similar to this for ngClass Demo

Happy Classing Angular!!!