Scribd
Upload
20 views

Angular Directives

Uploaded by

HARSH VAIDYA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

Angular Directives

Uploaded by

HARSH VAIDYA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Angular Directives

Contents
• What is Angular Directive?
• Types of Directives
• Attribute Directives
• Structural Directives
What is Angular Directive?
• Allows to enhance the behaviour of elements within Angular App
• classes that add additonal behaviour to elements
• built-in and custom directives
Types of Angular Directive?
• Attribute Directives - Change the appearance of elements, components or other directives

• Structural Directives - Change the DOM layout by adding and removing DOM elements
Attribute Directives
• Attribute directives are special directives that can modify the behaviour of HTML
elements, attributes, properties or Components
• They do listen to certain events or conditions and make the changes accordingly
• Built-In Attribute Directives are:
 ngClass - add or remove CSS classes
 ngStyle - add or remove CSS styles
 ngModel - add two-way-data binding
Dynamic Styling with ngClass
• In home.component.ts file, define a properties as below:
export class HomeComponent
{
isSuccess = false;
h2CSSProps = "text-danger";
successColor = "text-success";
errorColor = "text-danger";
}

• In home.component.html file, add the following line:

<h2 [ngClass] = "h2CSSProps">This is sample text...</h2>


<h2 [ngClass] = "isSuccess?successColor:errorColor”>This is sample text...</h2>
Dynamic Styling with ngStyle
• In home.component.ts file, define a properties as below:
export class HomeComponent
{
currentStyle : Record<string,string> = { }
isCentered = true;
isSuccess = false;
isLarge = true;
constructor()
{
this.currentStyle = {
'text-align': this.isCentered?'center':'',
'color': this.isSuccess?'green':'red',
'font-size': this.isLarge?'large':'small'
}
}
• In home.component.html file, add the following line:
<h2 [ngStyle]='currentStyle'>This is sample text...</h2>
Custom Attribute Directive
• Create a folder ./app/directives
• Go to terminal and create directive - ng g d header
• In header.directive.ts file, add the following code:
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appHeader]'
})
export class HeaderDirective {
constructor(private el : ElementRef)
{
this.el.nativeElement.style.background = 'yellow';
}
}

• In home.component.html file, add the following line:


<h2 appHeader>This is sample text...</h2>
Structural Directive
• Change the structure of DOM by adding, removing or manipulating DOM elements

• ngIf - conditionally display or remove HEML elements

• ngFor - repeat specific or group of HTML elements for each item in list or array

• ngSwitch - switches HTML elements based on value


ngIf
• In home.component.ts file, add the following property:
intVisible = false;

• In home.component.html file, add the following line:

<h2 *ngIf = 'isVisible'>This is sample text...</h2>


<h2 *ngIf = '!isVisible'>This is sample text...</h2>
ngSwitch
• In home.component.ts file, add the following property:

intVal = 10;

• In home.component.html file, add the following line:

<div [ngSwitch]='intVal'>
<h2 *ngSwitchCase = '0'> Value = {{ intVal }}</h2>
<h2 *ngSwitchCase = '10'> Value = {{ intVal }}</h2>
<h2 *ngSwitchCase = '20'> Value = {{ intVal }}</h2>
<h2 *ngSwitchDefault> Default value</h2>
</div>
?

You might also like