Ahora veamos un ejemplo sencillo en el que crearemos una directiva personalizada para cambiar el color de la fuente del control de la etiqueta usando nuestra directiva personalizada recién generada.
Para eso, necesitamos usar el siguiente comando para crear la directiva.
1Ng generar la directiva highlight
Shell
Después de crear la directiva, necesitamos importarla al archivo del módulo. Para ello, abre app.module.ts , y el código fuente tendrá este aspecto..:
123456789101112131415importar{NgModule}de$0027@angular/núcleo$0027;importar{BrowserModule}de$0027@angular/plataforma-browser$0027;importar{FormsModule}de$0027@angular/formas$0027;importar{AppComponent}de$0027./app. Componente$0027;// Importación de la directiva personalizada-importar{HighlightDirective}de$0027./highlight.directive$0027;@NgModule({ importa:[BrowserModule,FormsModule], declaraciones:[AppComponent,HighlightDirective], bootstrap:[AppComponent]})exportclassAppModule{}tipografía
Donde lo más destacado es el nombre de nuestra directiva, y después de ejecutar el comando anterior, se creará el nuevo archivo, y el código tendrá este aspecto:
Resaltar.las.directivas.ts
123456789importación{Directiva}de$0027@angular/núcleo$0027;@Directiva({ selector:$0027[appHighlight]$0027})clase de exportaciónHighlightDirectiva{constructor(){}}tipografía
Como podemos ver en el ejemplo anterior, el archivo contiene la palabra clave @Directive(), que declara la directiva con el selector appHighlight, que podemos utilizar en la plantilla para cambiar el comportamiento del elemento.
Puede surgir la pregunta de cómo acceder al elemento de la directiva. Bueno, para ello, podemos usar ElementRef, que nos permite acceder al elemento desde la plantilla directamente, así:
123constructor(elementr:ElementRef){// puede usar elementr aquí para acceder a las propiedades del elemento}tipografía
Ahora cambiemos el color de la fuente de un elemento de la etiqueta usando la directiva personalizada. Antes de eso, abre el archivo app.component.html y pega las siguientes líneas de código:
123<div...;labelappHighlight...Este es el elemento de la etiqueta</label...
html
Noten que hemos usado appHighlight como un atributo junto con el elemento de la etiqueta. Esto significa que hemos usado el atributo personalizado que accede al elemento actual, y usando ElementRef, podemos modificar su comportamiento.
Vamos a saltar a nuestra recién creada directiva llamada highlight.directive.ts y reemplazar el siguiente código fuente.
1234567891011121314importar{Directiva,ElementRef}de"@angular/núcleo";@Directiva({ selector:"[appHighlight]"})exportarclaseHighlightDirectiva{constructor(privado el:ElementRef){/// Cambiar el color de la fuente de la etiqueta el.nativoElement.style.color="rojo";}}tipografía
Usando esta directiva, podemos cambiar el color de la fuente de la etiqueta. Para ello, hemos accedido al elemento nativo usando ElementRef, por lo que ahora podremos modificar sus estilos al igual que hemos modificado el color del elemento con el valor personalizado.
Cuando ejecutemos este ejemplo, el color de la fuente del control de la etiqueta será rojo según nuestro requerimiento.
De la misma manera, también podemos modificar los diferentes atributos de los mismos elementos con diferentes valores como este:
12345678910exportclassHighlightDirective{constructor(privado el:ElementRef){// Para cambiar el color de la fuente de la etiqueta y otras propiedades el.nativeElement.style.color="red"; el.nativeElement.style.fontWeight="bolder"; el.nativeElement.style.border="2px double black";}}tipografía
Este es sólo un ejemplo sencillo que muestra cómo acceder al elemento nativo utilizando la directiva personalizada y cómo modificar los estilos del elemento directamente desde el atributo personalizado. Puedes probar este ejemplo por tu cuenta y observar los cambios que obtienes.