Type of directives

1. Component Directive

2. Structural Directive

3. Attribute Directive

1. Component Directive

It is normal component

                        //demo.component.ts

                        import { Component } from '@angular/core';
                        @Component({
                        selector: 'app-demo',
                        template: `<h1>This is the demo component.</h1>`,
                        styleUrls: ['./demo.component.css']
                        })
                        export class DemoComponent {

                        }
                        

in html

                        <app-demo></app-demo>
                    

2. Structural Directive

Structural directives are used to modify the structure of the DOM by adding or removing the HTML elements inside our template.

This directive is used at the time when we want to render the HTML element or template on specific conditions. If the provided condition is true, then the particular HTML element on which this directive is applied will be rendered inside the DOM.

If the condition is false, the same HTML element will not be rendered inside the DOM.

                    //demo.conponent.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-demo',
  template: `
  	<button (click)="condition=!condition">Click</button>
  	<br><br>
	<div *ngIf="condition">
   	  If 'condition' is true, then this box is render in DOM
	</div>`,
  
  styles : `
  	div {
    		border : 1px solid black;
    		padding : 5px;
  	    }`,
})
export class DemoComponent {
  condition : boolean = true;
}

From above code snippets, as the value of condition is 'true', the div HTML element is rendered in the DOM. As soon as we click on the button, the value of condition becomes 'false' and thus, the div HTML element is removed from the DOM.

This directive is used to iterate over the variables whose type is array.

//demo.conponent.ts

import { Component } from '@angular/core';
@Component({
  selector : 'demo-component',
  template : `
	<h2>User's Info</h2>
	<table cellpadding="5px" border="1" cellspacing="0px">
  	    <tr>
    		<th>Name</th>
    		<th>Age</th>
    		<th>Gender</th>
  	    </tr>
  	    <tr *ngFor="let user of users">
    		<td>{{ user.name }}</td>
    		<td>{{ user.age }}</td>
    		<td>{{ user.gender }}</td>
  	    </tr>
	</table>`,
  
  styles : `
	table {
    		width : 75%;
    		margin:auto;
    		text-align:center;
  	}`
})
export class DemoComponent {
  users : any[] = [
    { name: 'Laxmi', age: '20', gender: 'Female' },
    { name: 'Parvati', age: '33', gender: 'Female' },
    { name: 'Arya', age: '15', gender: 'Male' },
  ];
}

3. Attribute Directive

Attribute directives are used to change the appearance and behavior of DOM elements.

This directive is used to add the list of CSS classes to the html element dynamically.

//demo.component.ts

import { Component } from '@angular/core';
@Component({
  selector : 'app-demo',
  template : `
	<button (click)="condition= !condition">Click</button>
	<br><br>
	<div [ngClass]="{ 'change-background' : condition, 
                          'change-color' : !condition
                        }">
  		div For ngClass Directive
	</div>`,
  styleUrls : ['./demo.component.css']
})
export class DemoComponent {
  condition: boolean = true;
}

From the above code snippets, we have used the ngClass attribute directive that adds the two CSS classes viz. 'change-background' and 'change-color' dynamically on the div html element.

When the condition variable is set to true, then the 'change-background' class is appended to the div element, and when the variable is false, the 'change-color' class is appended to that div Element.

//demo.component.ts

import { Component } from '@angular/core';
@Component({
  selector : 'app-demo',
  template : `
	<div [ngStyle]="{
                'background':'red',
                'color':'black',
                'border':'1px solid yellow'
               }"> div For ngStyle Directive
	</div>`
})
export class DemoComponent {
}

//demo.component.ts

import { Component } from '@angular/core';
@Component({
  selector : 'app-demo',
  template : `
	<button (click)="changeName()">Change Name</button>
  	<br><br>
	<input name="First Name" [(ngModel)]="firstName" />
	<br><br>
  	<span>Value : <b>{{firstName }}</b></span>`
})
export class DemoComponent {
  firstName : string = 'Rutu';
  changeName() : string {
    this.firstName = 'Rutuparn';
  }
}