Scribd
Upload
129 views2 pages

Angular - Directives in Angular

This document discusses directives in Angular. There are three types of directives: component directives define how components should be processed and used, structural directives manipulate DOM elements with attributes like *ngIf, and attribute directives change element appearance and behavior by targeting attributes. The document demonstrates how to create a custom attribute directive by generating a directive class, applying the @Directive decorator, defining a selector, and modifying element styling in the directive's constructor.

Uploaded by

Sangam Pandey
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
129 views2 pages

Angular - Directives in Angular

This document discusses directives in Angular. There are three types of directives: component directives define how components should be processed and used, structural directives manipulate DOM elements with attributes like *ngIf, and attribute directives change element appearance and behavior by targeting attributes. The document demonstrates how to create a custom attribute directive by generating a directive class, applying the @Directive decorator, defining a selector, and modifying element styling in the directive's constructor.

Uploaded by

Sangam Pandey
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/ 2

2/24/2020 Angular: Directives in Angular

Angular
Dashboard / My courses / Angular / Directives / Directives in Angular

Directives in Angular

Directives in Angular is a js class, which is declared as @directive. We have 3 directives in Angular. The directives are listed below −

Component Directives
These form the main class having details of how the component should be processed, instantiated and used at runtime.

Structural Directives
A structure directive basically deals with manipulating the dom elements. Structural directives have a * sign before the directive. For example, *ngIf
and *ngFor.

Attribute Directives
Attribute directives deal with changing the look and behavior of the dom element. You can create your own directives as shown below.

How to Create Custom Directives?


n this section, we will discuss about Custom Directives to be used in components. Custom directives are created by us and are not standard.Let us
see how to create the custom directive. We will create the directive using the command line. The command to create the directive using the
command line is −

ng g directive active

generated directive will look as below


// active.directive.ts

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


@Directive({
  selector: '[appActive]'
})

export class ActiveDirective {


constructor() { }
}

The imported Directive symbol provides the Angular the @Directive decorator.
The @Directive decorator’s lone configuration property specifies the directive’s CSS attribute selector [appActive].

It is the brackets ([]) that make it an attribute selector. Angular locate each element in the template that has an attribute named appActive and
applies the logic of this directive to that element.The attribute selector pattern explains the name of this kind of directive.

Now, define the behavior of the directive. So we need to add code inside the constructor of an ActiveDirective class.

// active.directive.ts

import { Directive, ElementRef } from '@angular/core';


@Directive({
  selector: '[appActive]'
})
export class ActiveDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'Green';
 }
}

Now, we can use the directive inside our HTML component. Write the following code in an app.component.html file.

192.168.0.102/mod/page/view.php?id=135&forceview=1 1/2
2/24/2020 Angular: Directives in Angular

<!-- app.component.html -->

<p appActive>Active !!</p>

Save the file and start the development server.

ng serve

You can see that; we got the green background color of the text. Which is cool because we have first created the custom directive and add that
directive to our HTML element.

Here, we have modified the DOM through the angular directive. We have changed the color of p element through angular attribute directive.

Practice exercise

Exercise 1 : Change the above example to change the color of p element to blue.

Exercise 2 : Change above example to change the color as well as font of the p element to Red and font as "italic bold 20px arial,serif"

◄ Event Binding Jump to... Pipes in Angular ►

You are logged in as Sangam Pandey (Log out)


Angular
Data retention summary

192.168.0.102/mod/page/view.php?id=135&forceview=1 2/2

You might also like