Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

Angular is a popular front-end framework made by Google. Like other popular front-end frameworks, it uses a component-based architecture to structure apps.

In this article, we’ll look at how to use some built-in Angular directives.

Built-in Directives

Angular has some built-in directives. Built-in directives include attribute directives and structural directives.

Built-in Attribute Directives

Attributes directives change the behavior of HTML elements, attributes, properties and components.

The most common attributes are:

• NgClass — adds or removes a CSS class
• NgStyle — adds or removes a set of HTML styles
• NgModel — adds 2-way data binding to an HTML form element.

NgClass

We can add or remove some CSS classes simultaneously with the ngClass directive.

For example, we can write:

app.component.ts :

import { Component } from "@angular/core";

@Component({  
  selector: "app-root",  
  templateUrl: "./app.component.html",  
  styleUrls: ["./app.component.css"]  
})  
export class AppComponent {  
  canSave = true;  
  isUnchanged = false;  
  isSpecial = true;  
  classes = {  
    saveable: this.canSave,  
    modified: !this.isUnchanged,  
    special: this.isSpecial  
  };  
}

app.component.html :

<div [ngClass]="classes">foo</div>

In the code above, we created the classes field in AppComponent so that we can apply the saveable , modified and special classes to the div in app.component.html .

The 3 classes are applied when the value of the keys in classes are truthy.

Therefore, when we write:

[ngClass]="classes"

in app.component.html , we’ll see the classes applied to the div.

If we only want to toggle one class, we can also write:

app.component.ts :

import { Component } from "@angular/core";

@Component({  
  selector: "app-root",  
  templateUrl: "./app.component.html",  
  styleUrls: ["./app.component.css"]  
})  
export class AppComponent {  
  isGreen = true;  
}

app.component.html :

<div [ngClass]="isGreen ? 'green' : null">foo</div>

Then we get the green class applied to the div in app.component.html since isGreen is set to true in AppComponent .

NgStyle

We can use ngStyle to add multiple styles to an element. This is useful for setting dynamic styles on an element.

To use it, we can write:

app.component.ts :

import { Component } from "@angular/core";

@Component({  
  selector: "app-root",  
  templateUrl: "./app.component.html",  
  styleUrls: ["./app.component.css"]  
})  
export class AppComponent {  
  isBig = true;  
}

app.component.html :

<div [style.font-size]="isBig ? '25px' : '12px'">foo</div>

In the code above, we have the isBig field in AppComponent set to true .

Also, we have style.font-size set to an expression that checks if isBig is truthy or not and then set the size accordingly.

Therefore, the font size of the div would be 25px.

We can also use it to set multiple styles. To do this, we can write:

app.component.ts :

import { Component } from "@angular/core";

@Component({  
  selector: "app-root",  
  templateUrl: "./app.component.html",  
  styleUrls: ["./app.component.css"]  
})  
export class AppComponent {  
  canSave = true;  
  isUnchanged = false;  
  isSpecial = true;  
  styles = {  
    "font-style": this.canSave ? "italic" : "normal",  
    "font-weight": !this.isUnchanged ? "bold" : "normal",  
    "font-size": this.isSpecial ? "24px" : "12px"  
  };  
}

app.component.html :

<div [ngStyle]="styles">foo</div>

In the code above, we have the styles field in AppComponent , with various CSS attribute names as the key. They’ll be set according to what we have in the expression we have as the values.

Then in app.component.html , we set styles of the div to what we have in the styles object with the ngStyle directive.

Therefore, we should see italic, bold and 24px large text.

[(ngModel)]: Two-way binding

We can use ngModel to do 2-way binding between template and component.

It’s useful for getting input data and then displaying it.

For example, we can use it as follows:

app.module.ts :

import { BrowserModule } from "@angular/platform-browser";  
import { NgModule } from "@angular/core";  
import { FormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";

@NgModule({  
  declarations: [AppComponent],  
  imports: [BrowserModule, FormsModule],  
  providers: [],  
  bootstrap: [AppComponent]  
})  
export class AppModule {}

app.component.ts :

import { Component } from "@angular/core";

@Component({  
  selector: "app-root",  
  templateUrl: "./app.component.html",  
  styleUrls: ["./app.component.css"]  
})  
export class AppComponent {  
  name: string;  
}

app.component.html :

<input [(ngModel)]="name" />  
<p>{{name}}</p>

In the code above, we added the FormsModule to the imports array in app.module.ts .

Then we added the name field in AppComponent .

Finally, we added an input element with the ngModel directive and a p element with the name variable interpolated.

Then when we type something into the input, it’ll be shown in the p element.

Conclusion

We can use the ngClass directive to set classes on an element.

To set dynamic styles on an element, we can use the ngStyle directive.

To add 2-way data binding, we use the ngModel directive, which is available in the FormsModule .