Angular 6 Directives

Angular 6 Directives

In Angular, directives are a javascript class that is defined as @directive. We have at Angular 3 directives. The following directives are listed –

Component Directives

This form the main class with specifics of how to sort, instantiate and use the part at runtime.

Structural Directives

A guideline on structure essentially deals with managing the dom elements. Before the directive, structural directives have a sign of *. E.g., * ngIf and * ngFor.

Attribute Directives

Attribute directives are about modifying the dom feature look and behavior. As shown below, you may build your own Directives.

How to Create Custom Directives?

Let's look at how the custom directive is produced. Using the command line we build the directive. The order used to construct the command line is –

ng g directive nameofthedirective
e.g
ng g directive changeText

This is how it appears in the command line

C:\projectA6\Angular6App>ng g directive changeText
CREATE src/app/change-text.directive.spec.ts (241 bytes)
CREATE src/app/change-text.directive.ts (149 bytes)
UPDATE src/app/app.module.ts (486 bytes)

The files above are generated, i.e., change-text.directive.spec.ts and change-text.directive.ts, and the app.module.ts file is modified.

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 { }

The class ChangeTextDirective is used in the declarations in the section above. The class even gets imported from the following file.

change-text. Directive

import { Directive } from '@angular/core';
@Directive({
   selector: '[appChangeText]'
})
export class ChangeTextDirective {
   constructor() { }
}

The file above has a directive, and has a selector property as well. Whatever we define in the selector, in the view, where we assign the custom directive, the same has to correspond.

Let us add the directive in the app.component.html view as follows −

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

We will write the changes in change-text.directive.ts file as follows –

change-text.directive.ts

import { Directive, ElementRef} from '@angular/core';
@Directive({
   selector: '[appChangeText]'
})
export class ChangeTextDirective {
   constructor(Element: ElementRef) {
      console.log(Element);
      Element.nativeElement.innerText = "Text is changed.";
   }
}

Within the file above there is a class named ChangeTextDirective and a constructor which takes the mandatory element of type ElementRef. The element has all of the information that the Modify Text directive refers to.

We've included the feature Console.log. The same performance can be used in the console browser. Also changes the text of the element as seen above.