Scribd Logo
Upload

Welcome to Scribd!

  • 92 views

    Angular - Directives in Angular

    Uploaded by

    Sangam Pandey
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Angular - Directives in Angular

    Uploaded by

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

    Original Description:

    Angular Web Development

    Original Title

    Angular_ Directives in Angular

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    92 views2 pages

    Angular - Directives in Angular

    Uploaded by

    Sangam Pandey
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 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

    pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy