Directives
- Directives are instructions in the DOM (Document Object Model).
- Directives are used in templates to customize the behaviour of the elements.
- Angular provides built-in directives like *ngIf and *ngFor, as well as custom directives created by developers.
- Types of directives:
- Component Directives
- These directives are associated with the template(view) of a component.
- Structural Directives
- These directives are used to change the structure of the DOM using *ngFor,*ngSwitch and *ngIf.
- Attribute Directives
- These directives are used to change the behaviour of the DOM using ngStyle,ngModel and ngClass.
- Custom Directives
- We can create custom directives using @Directive decorator and define the desired behaviour in the class.
- Component Directives
Example:
- app.component.html
HTML
<!-- Structural Directive: ngIf,ngFor,ngSwitch --> < div class = 'card' > < p >ngSwitch Example</ p > < div class = "card-body" > Input string : < input type = 'text' [(ngModel)]="num" /> < div [ngSwitch]="num"> < div * ngSwitchCase = "'1'" >One</ div > < div * ngSwitchCase = "'2'" >Two</ div > < div * ngSwitchCase = "'3'" >Three</ div > < div * ngSwitchCase = "'4'" >Four</ div > < div * ngSwitchCase = "'5'" >Five</ div > < div *ngSwitchDefault>This is Default</ div > </ div > </ div > < div > < p >ngFor and ngIf Example</ p > < div * ngFor = "let emp of employee" > < ng-container *ngIf="emp.age>=30"> < p >{{ emp.name }}: {{ emp.age }}</ p > </ ng-container > </ div > < div > <!-- Attribute Directive: [ngStyle] --> < p [ngStyle]= "{'color': 'blue', 'font-size': 12}"> ngStyle Example </ p > </ div > <!-- Custom Directive: ng g directive uppercase --> < div > < input type = "text" appUppercase placeholder = "Enter text" /> </ div > </ div > </ div > |
- app.component.ts
Javascript
import { Component } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ] }) export class AppComponent { title = 'AngularApp' ; num: number = 0; employee: Employee[] = [ { name: 'Emp1' , age: 30 }, { name: 'Emp2' , age: 37 }, { name: 'Emp3' , age: 26 }, ] } class Employee { name: string; age: number; } |
- uppercase.directive.ts
Javascript
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core' ; @Directive({ selector: '[appUppercase]' }) export class UppercaseDirective { constructor(private el: ElementRef, private renderer: Renderer2) { } @HostListener( 'input' , [ '$event' ]) onInputChange(event: Event) { const inputValue = (event.target as HTMLInputElement).value; const newValue = inputValue.toUpperCase(); this .renderer.setProperty( this .el.nativeElement, 'value' , newValue); } } |
Explain the Architecture Overview of Angular ?
Angular is a client-side front-end framework developed by a team of developers at Google based on Typescript. It is used for building dynamic and single-page web applications (SPAs). Also, Angular is a versatile framework for building web applications and offers a wide range of features and tools to streamline the development process and create robust and maintainable applications.