Saltar al contenido

La creación de directivas personalizadas en 8Dec angular, 26thIn este tutorial, vamos a aprender acerca de cómo crear una directiva personalizada …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo crear una directiva personalizada en angular con la ayuda de ejemplos.

¿Qué es una directiva?

Directivas

son atributos HTML personalizadas que cuentan angular para cambiar el estilo o el comportamiento de los elementos DOM.

directiva personalizada Creación de

Estamos creando una directiva personalizada llamada emoji que nos ayuda a añadir emojis a nuestros elementos HTML.

Ahora abra su terminal ejecutar y por debajo de comando para generar una nueva directiva.

ng generate directive emoji

ya se puede ver dos nuevos archivos son generados por el cli angular.

Abrir el archivo de emoji.directive.ts y sustituirlo por debajo de código.

import { Directive, ElementRef, OnInit } from '@angular/core';
@Directive({
selector: '[appEmoji]'})
export class EmojiDirective implements OnInit {

constructor(private el: ElementRef) {}

ngOnInit() {
this.el.nativeElement.textContent +=️ '✌️'; }
}

En el código anterior, primero se importó decorador de la Directiva y el tipo RefElement del paquete @ angular / núcleo. Método

@Directive acepta objetos como su primer argumento en las que necesitamos para definir el nombre de nuestro selector Directiva: ‘[appEmoji]’

dentro del método de gancho ngOnInit ciclo de vida estamos accediendo al elemento donde utilizamos nuestra directiva y la adición de la agitando emoji mano a ese elemento textContent.

Utilizando nuestra costumbre Directiva appEmoji uso de

dejar que nuestra directiva encargo dentro del componente de aplicación. salida

Welcome to Angular

Pasar valores a una directiva personalizada

También podemos pasar nuestros propios emojis a nuestra directiva appEmoji en lugar de utilizar el mismo emoji siempre para los que tenemos que importar el decorador @Input.

import { Directive, ElementRef, Input, OnInit } from '@angular/core';
@Directive({
selector: '[appEmoji]'})
export class EmojiDirective implements OnInit {

@Input('appEmoji') emoji: string;
constructor(private el: ElementRef) { }

ngOnInit() {
this.el.nativeElement.textContent += this.emoji; }
}

Uso

Welcome to Angular