Directives

Directives are instructions that tell Angular how to transform the DOM. There are three types of directives in Angular: structural directives, attribute directives, and component directives.

Structural directives

Structural directives are used to add or remove elements from the DOM.

ngIf

The ngIf directive is used to add or remove an element from the DOM based on a condition. For example, the following code adds the h1 element to the DOM if the showTitle property is set to true:

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent {
    showTitle = true;
}

<h1 *ngIf="showTitle">Home</h1>

Enhanced ngIf with else

The ngIf directive can be enhanced with an else block. The else block is used to add an element to the DOM if the condition is false. For example, the following code adds the h1 element to the DOM if the showTitle property is set to true, otherwise it adds the p element to the DOM:

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent {
    showTitle = true;
}

<h1 *ngIf="showTitle; else noTitle">Home</h1>
<ng-template #noTitle>
    <p>No title</p>
</ng-template>

ngFor

The ngFor directive is used to repeat an element for each item in an array. For example, the following code repeats the li element for each item in the items array:

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent {
    items = ['Item 1', 'Item 2', 'Item 3'];
}

<ul>
    <li *ngFor="let item of items">{{ item }}</li>
</ul>

Enhanced ngFor with index

The ngFor directive can be enhanced with an index. The index is used to get the index of the current item in the array. For example, the following code outputs the index of each item in the items array:

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent {
    items = ['Item 1', 'Item 2', 'Item 3'];
}

<ul>
    <li *ngFor="let item of items; index as i">{{ i }}: {{ item }}</li>
</ul>

ngSwitch

The ngSwitch directive is used to add or remove an element from the DOM based on a condition. For example, the following code adds the h1 element to the DOM if the showTitle property is set to true, otherwise it adds the p element to the DOM:

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent {
    showTitle = true;
}

<div [ngSwitch]="showTitle">
    <h1 *ngSwitchCase="true">Home</h1>
    <p *ngSwitchCase="false">No title</p>
</div>

Attribute directives

Attribute directives are used to change the appearance or behavior of an element.

ngClass

The ngClass directive is used to add or remove CSS classes from an element. For example, the following code adds the red class to the h1 element if the showTitle property is set to true:

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent {
    showTitle = true;
}

<h1 [ngClass]="{ red: showTitle }">Home</h1>

ngStyle

The ngStyle directive is used to add or remove CSS styles from an element. For example, the following code sets the color style of the h1 element to red if the showTitle property is set to true:

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent {
    showTitle = true;
}

<h1 [ngStyle]="{ color: showTitle ? 'red' : 'black' }">Home</h1>

ngModel

The ngModel directive is used to bind an input element to a property of the component. For example, the following code binds the value of the input element to the title property of the component:

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent {
    title = '';
}

<input [(ngModel)]="title"/>

Component directives

Component directives are used to create custom elements.

Custom directives

Custom directives are used to create custom elements. For example, the following code creates a custom directive named appTitle:

@Directive({
    selector: '[appTitle]'
})
export class TitleDirective {
    @Input() title = '';

    constructor(private elementRef: ElementRef) {
        this.elementRef.nativeElement.innerHTML = this.title;
    }
}

<div appTitle [title]="title"></div>