Directivas en Angular

Que son las directivas

Son funciones que se invocan cuando el DOM es compilado por Angular, están ligadas a los elementos del DOM cuando el documento es cargado. Cada Directiva tiene un nombre, y determina donde puede ser usada, sea en un elemento, atributo, componente o clase.

 

 

Tipos de directivas:

Directivas de componentes:

Es aquella que administra una región de HTML de una manera nativa como un elemento HTML, siempre tienen asignadas plantillas de HTML.

Directivas estructurales:

Nos permiten modificar el DOM de HTML, todas ellas llevan delante un asterisco (*) seguido del nombre de la directiva, son responsables del diseño HTML, agregan, eliminan o manipulan elementos.

Existen estructurales principales:

• *ngIf
• *ngFor
• *ngSwitch

Directiva *ngIf

*ngIf es la directiva estructural que toma una expresión booleana y hace que una parte de codigo html aparezca o desaparezca.

app.component.ts:

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  visible: boolean = true;

}

app.component.html:

<p *ngIf = "visible">Este parrafo va a aparecer o desaparecer en funcion del valor de visible </p>

 Directiva *ngFor

*ngFor es la directiva estructural que muestra una serie de valores de un array.

app.component.ts:

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  personas = ['Juan' , 'Pedro', 'Antonio', 'Luis'];

}

 

app.component.html:

<div *ngFor="let nombre of personas; let i = index">

    <p> El nombre numero {{i}} es: {{nombre}}</p>

</div>

 

Directiva *ngSwitch

Es una directiva de atributo que junto con las directivas estructurales
ngSwitchCase y ngSwitchDefault nos permite mostrar diferentes bloques de html en función del resultado de una variable.

app.component.ts:

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  estado: number = 1;

}

 app.component.html:

<p>Bienvenido</p>

<div [ngSwitch]="estado">

    <p *ngSwitchCase="1">El estado es 1</p>

    <p *ngSwitchCase="2">El estado es 2</p>

    <p *ngSwitchDefault>Estado desconocido</p>

</div>

 

Directivas de atributos:

Una directiva de atributo son aquellas que cambian la apariencia o comportamiento de un elemento, componente u otra directiva.

 

Directivas personalizadas:

Amplian la funcionalidad del html creando nuevos elementos html o atributos personalizados que proporcionan un cierto comportamiento a una etiqueta html.

Creamos una directiva personalizada:

ng g directive miDirectiva

Dentro de nuestra directiva personalizada en el constructor de la clase establecemos el innerText como Bienvenido y backgroundColor como yellow

mi-directiva.directive.ts:

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

@Directive({

  selector: '[appMiDirectiva]'

})

export class MiDirectivaDirective {

  constructor(Element: ElementRef) {

    Element.nativeElement.innerText = 'Bienvenido';    

    Element.nativeElement.style.backgroundColor = 'yellow';

  }

}

En la vista app.component.html, importamos la directiva y lo añadimos a declarations:

import { MiDirectivaDirective } from './mi-directiva.directive';

En añadimos app.component.html lo siguiente:

<p appMiDirectiva> a la directiva</p>

 Salida en la ejecucion: