Predefined Directives in Angular

Previous Next

Angular provides a set of built-in directives that extend the functionality of HTML. These directives can modify the appearance, behavior, or structure of the DOM. They are categorized into three main types: Component Directives, Structural Directives, and Attribute Directives.

Types of Predefined Directives

  • Component Directives: Directives with a template.
  • Structural Directives: Directives that change the DOM layout by adding or removing elements.
  • Attribute Directives: Directives that change the appearance or behavior of an element.

Structural Directives

Structural directives shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements.

1. *ngIf

Conditionally adds or removes an element from the DOM.

Example

<p *ngIf="showText">This text is shown conditionally.</p>

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

    @Component({
      selector: 'app-ng-if-example',
      templateUrl: './ng-if-example.component.html'
    })
    export class NgIfExampleComponent {
      showText: boolean = true;
    }

2. *ngFor

Repeats a template for each item in a collection.

Example


    <ul>
      <li *ngFor="let item of items; let i = index">{{ i + 1 }}. {{ item }}</li>
    </ul>
    

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

    @Component({
      selector: 'app-ng-for-example',
      templateUrl: './ng-for-example.component.html'
    })
    export class NgForExampleComponent {
      items: string[] = ['Item 1', 'Item 2', 'Item 3'];
    }

3. *ngSwitch

Conditionally displays a template based on a switch condition.

Example


    <div [ngSwitch]="selectedValue">
      <p *ngSwitchCase="'option1'">Option 1 selected.</p>
      <p *ngSwitchCase="'option2'">Option 2 selected.</p>
      <p *ngSwitchDefault>Default option.</p>
    </div>
    

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

    @Component({
      selector: 'app-ng-switch-example',
      templateUrl: './ng-switch-example.component.html'
    })
    export class NgSwitchExampleComponent {
      selectedValue: string = 'option1';
    }

Attribute Directives

Attribute directives change the appearance or behavior of an existing element.

1. ngStyle

Dynamically sets inline styles.

Example


    <p [ngStyle]="{'color': textColor, 'font-size': fontSize}">Styled text.</p>
    

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

    @Component({
      selector: 'app-ng-style-example',
      templateUrl: './ng-style-example.component.html'
    })
    export class NgStyleExampleComponent {
      textColor: string = 'red';
      fontSize: string = '20px';
    }

2. ngClass

Dynamically adds or removes CSS classes.

Example


    <p [ngClass]="{'highlight': isHighlighted, 'bold': isBold}">Classed text.</p>
    

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

    @Component({
      selector: 'app-ng-class-example',
      templateUrl: './ng-class-example.component.html'
    })
    export class NgClassExampleComponent {
      isHighlighted: boolean = true;
      isBold: boolean = false;
    }

3. ngModel

Provides two-way data binding for form elements.

Example


    <input type="text" [(ngModel)]="inputValue">
    <p>Input: {{ inputValue }}</p>
    

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

    @Component({
      selector: 'app-ng-model-example',
      templateUrl: './ng-model-example.component.html'
    })
    export class NgModelExampleComponent {
      inputValue: string = '';
    }

Key Points

  • Angular provides structural and attribute directives to enhance HTML.
  • Structural directives (*ngIf, *ngFor, *ngSwitch) manipulate the DOM layout.
  • Attribute directives (ngStyle, ngClass, ngModel) change the appearance or behavior of elements

If you have any questions, feel free to ask. Thank you for reading!

Previous Next
Thankyou!