Built-in directives

Built in directives

Read more

• NgStyle Adds and removes a set of HTML styles.
• NgClass Adds and removes a set of CSS classes.
• NgModel Adds two-way data binding to an HTML form element.

ngStyle

It allows us to dinamically update the styles.

html

<p [ngStyle]="{backgroundColor: getColor()}">{{'Server'}} with ID {{serverId}} is {{getServerStatus()}}</p>

ts

getColor(){
        return this.serverStatus === 'online' ? 'green' : 'red';
    }

Add background image dinamically

<div class="card" [ngStyle]="{'background': 'url(' + data.img +')'}">

ngClass

It allows us to dinamically add or remove css classes.

[ngClass]="{online: serverStatus === 'online'}"

Add white-text class if logItem greater than 4

[ngClass]="{'white-text' : logItem >= 5 }"