Let's talk about directives in Angular

This article will introduce to you the directives in Angular. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Environment:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm : 6.14.6
• IDE: Visual Studio Code

1. Summary

Directives were very popular in the Angular 1.0 era (called AngularJS at the time), but are less used now. It can be simply understood that instructions (Directives) are used to extend existing Elements (DOM). [Related tutorial recommendations: "angular tutorial"]

2. The relationship between components and instructions

If If you look at the Angular source code, you can see the following definition

/**
 * Supplies configuration metadata for an Angular component.
 *
 * @publicApi
 */
export declare interface Component extends Directive {

Yes, Component is derived from Directive, that is to say, Component belongs to Directive.

2.1. Types of instructions

• Component is a sub-interface of Directive and a special instruction. Component It can have HTML templates, but Directive cannot have templates.

• Attribute-type directives: used to modify the appearance and behavior of DOM elements, but will not change the DOM structure. Typical attribute-type directives in Angular's built-in instructions include ngClass and ngStyle. If you plan to encapsulate Your own component library, attribute-type instructions are necessary.

• Structural instructions: You can modify the DOM structure. The built-in common structural instructions include *ngFor, *ngIf and * ngSwitch. Since structural directives modify the DOM structure, multiple structural directives cannot be used on the same HTML tag at the same time. If you want to use multiple structural directives on the same HTML element, you can consider adding an empty layer of elements to nest them, such as an empty layer outside (p).

3. The purpose of instructions in Angular

Instructions are used in Angularr to enhance the functionality of DOM, including HTML native DOM and our Your own custom component. For example, you can extend a Button to avoid secondary clicks before the server responds after clicking; highlight certain income content, etc.

4. Command examples

##4.1. Command function

4.2. Anuglar CLI generates basic files

ng generate directive MyHighlight

4.3. Directive instruction core code

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }

    @HostListener('mouseenter') onMouseEnter() {
        this.highlight('yellow');
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.highlight(null);
    }

    private highlight(color: string) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}

4.4. Use this instruction

<p my-highlight>Highlight me!</p>

my-highlight is our element extended attribute (instruction, directive).

5. Summary

• Directive is used to extend the functionality of DOM elements or components.

• *ngFor, *ngIf and *ngSwitch in Angular are all built-in instructions in Angular.

Programming Video! !

The above is the detailed content of Let's talk about directives in Angular. For more information, please follow other related articles on the PHP Chinese website!