How to use Directives in Angular
Tags: angular, webdev, programming, javascript
Published: 2021-01-23 00:17:31

**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` .