Angulaire 4 - Directives

Directives dans Angular est un js class, qui est déclarée comme @directive. Nous avons 3 directives en Angular. Les directives sont énumérées ci-dessous -

Directives de composants

Ceux-ci forment la classe principale ayant des détails sur la façon dont le composant doit être traité, instancié et utilisé lors de l'exécution.

Directives structurelles

Une directive de structure traite essentiellement de la manipulation des éléments dom. Les directives structurelles ont un signe * avant la directive. Par exemple,*ngIf et *ngFor.

Directives d'attribut

Les directives d'attribut traitent de la modification de l'aspect et du comportement de l'élément dom. Vous pouvez créer vos propres directives comme indiqué ci-dessous.

Comment créer des directives personnalisées?

Dans cette section, nous discuterons des directives personnalisées à utiliser dans les composants. Les directives personnalisées sont créées par nos soins et ne sont pas standard.

Voyons comment créer la directive personnalisée. Nous allons créer la directive en utilisant la ligne de commande. La commande pour créer la directive en utilisant la ligne de commande est -

ng g directive nameofthedirective

e.g

ng g directive changeText

Voici comment il apparaît dans la ligne de commande

C:\projectA4\Angular 4-app>ng g directive changeText
installing directive
   create src\app\change-text.directive.spec.ts
   create src\app\change-text.directive.ts
   update src\app\app.module.ts

Les fichiers ci-dessus, c'est-à-dire change-text.directive.spec.ts et change-text.directive.ts être créé et le app.module.ts le fichier est mis à jour.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],

   imports: [
      BrowserModule
   ],

   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

le ChangeTextDirectiveclass est inclus dans les déclarations du fichier ci-dessus. La classe est également importée du fichier ci-dessous.

change-texte. directif

import { Directive } from '@angular/core';
@Directive({
   selector: '[changeText]'
})

export class ChangeTextDirective {
   constructor() { }
}

Le fichier ci-dessus a une directive et il a également une propriété de sélecteur. Tout ce que nous définissons dans le sélecteur, il doit correspondre dans la vue, où nous affectons la directive personnalisée.

dans le app.component.html vue, ajoutons la directive comme suit -

<div style="text-align:center">
   <span changeText >Welcome to {{title}}.</span>
</div>

Nous écrirons les changements dans change-text.directive.ts fichier comme suit -

change-text.directive.ts

import { Directive, ElementRef} from '@angular/core';
@Directive({
   selector: '[changeText]'
})

export class ChangeTextDirective {
   constructor(Element: ElementRef) {
      console.log(Element);
      Element.nativeElement.innerText="Text is changed by changeText Directive. ";
   }
}

Dans le fichier ci-dessus, il y a une classe appelée ChangeTextDirective et un constructeur, qui prend l'élément de type ElementRef, qui est obligatoire. L'élément a tous les détails auxquels leChange Text directive est appliquée.

Nous avons ajouté le console.logélément. La sortie de la même chose peut être vue dans la console du navigateur. Le texte de l'élément est également modifié comme indiqué ci-dessus.

Maintenant, le navigateur affichera ce qui suit.