Cómo crear directivas de atributo en Angular

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:17

Cómo crear directivas de atributo en Angular

Curso de Angular 4

Clase 19 de 80

Clase 19 / 80

Recursos

Crear una directiva de atributo en Angular es una forma limpia y escalable de aplicar estilos y lógica a elementos del HTML. Aquí aprenderás, con claridad y paso a paso, cómo construir la directiva “resaltar” para destacar negocios con plan pagado, usando ElementRef, Renderer2, OnInit y Input. Ya venías usando ngSwitch, ngStyle y ngClass; ahora darás el salto a una directiva propia.

¿Cómo crear una directiva de atributo para resaltar en Angular?

Partimos del objetivo: resaltar negocios con plan “pagado” en la lista de lugares. El atributo se llama plan y puede ser “pagado” o “gratuito”. Ejemplos mencionados: la florería La Gardenia y el Hotel La Gracia, ambos con plan pagado.

Crea la carpeta: directives dentro de app para mantener orden.
Nombra el archivo: resaltar.directive.ts.
Define un selector de atributo: se usará como [resaltar] en el HTML.

Código base de la directiva:

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

@Directive({
  selector: '[resaltar]'
})
export class ResaltarDirective implements OnInit {
  @Input('resaltar') plan: string = '';

  constructor(private elRef: ElementRef, private renderer: Renderer2) {}

  ngOnInit(): void {
    if (this.plan === 'pagado') {
      this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'yellow');
      this.renderer.setStyle(this.elRef.nativeElement, 'font-weight', 'bold');
    }
  }
}

¿Cómo ligar el plan con input y el selector?

Usa @Input('resaltar') plan para enlazar el valor pasado al atributo [resaltar].
El nombre entre comillas en Input debe coincidir con el selector.
Inicializa la variable como cadena vacía: evita valores indefinidos.

¿Cómo nombrar carpetas y archivos para mantener orden?

Carpeta descriptiva: directives dentro de app.
Archivo descriptivo: resaltar.directive.ts.
Mantén consistencia: facilita imports y lectura del equipo.

¿Qué imports, decoradores y ciclo de vida necesita la directiva?

La directiva requiere piezas clave de @angular/core para funcionar de forma segura y expresiva.

@Directive: declara la directiva y su selector.
OnInit / ngOnInit: ejecuta la lógica al inicializar el elemento.
ElementRef: referencia al elemento nativo del DOM.
Renderer2: aplica estilos y atributos de manera compatible con distintas plataformas.
@Input: recibe datos desde el template (enlazado al selector).

¿Por qué usar renderer2 y elementref y no el dom directamente?

Código seguro: evita manipulación directa del DOM.
Portabilidad: mismo código funciona en distintas plataformas.
Claridad: separa la referencia del elemento del modo de estilizarlo.

¿Qué estilos aplica la directiva cuando el plan es “pagado”?

Fondo amarillo: background-color: yellow.
Texto en negritas: font-weight: bold.
Condición simple: if (this.plan === 'pagado') {...}.

¿Cómo registrar e implementar la directiva en el módulo y template?

Para usar la directiva en la app, debes declararla en el módulo y aplicarla en el template.

Declara en el módulo: agrega ResaltarDirective a declarations en app.module.ts.

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

@NgModule({
  declarations: [
    AppComponent,
    ResaltarDirective
  ],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Usa en el template: enlaza el plan de cada lugar al atributo [resaltar].

<li *ngFor="let lugar of lugares" [resaltar]="lugar.plan">
  {{ lugar.nombre }}
</li>

Resultado esperado: los negocios con plan “pagado” quedan con fondo amarillo y texto en negritas.
Próximos temas: host listeners y host binders para eventos y enlaces al host.

¿Te gustaría ver variantes con clases utilitarias o más atributos dinámicos? Cuéntame en comentarios qué te interesa profundizar y en qué parte te gustaría más ejemplos.

Julián Sotelo

Hace 9 años

Yo tuve algunos inconvenientes para realizar la directiva de atributo, al final logré realizarlo y quiero compartir mi código.

Primero que todo cambié el nombre del selector en el archivo ‘app.component.html’ pasando de ‘resaltar’ a ‘appResaltar’

<li [ngStyle]="{color: (place.active) ? 'black' : 'gray'}" [ngClass]="{numeroPar: (i+1) % 2 !== 0}" [appResaltar]="place.plan">

Luego modifiqué el selector en el archivo ‘resaltar.directive.ts’

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

@Directive({ selector: '[appResaltar]' })

export class AppResaltarDirective implements OnInit {
  constructor (private elRef: ElementRef, private renderer: Renderer2) {}
  @Input('appResaltar') plan: string;
  ngOnInit() {
    if (this.plan === 'pagado') {
      this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'yellow');
      this.renderer.setStyle(this.elRef.nativeElement, 'font-weight', 'bold');
    }
  }
}

Y finalmente en ‘app.module.ts’ se incluye la directiva import { AppResaltarDirective } from './directives/resaltar.directive'; y en NgModule se añade ‘AppResaltarDirective’.

La decisión de cambiar el nombre de la directiva de ‘resaltar’ a ‘appResaltar’ fue porque mirando en foros se comentaba que las directivas necesitan el prefijo ‘app’ esta regla se encuentra establecida en el archivo ‘.angular-cli.json’.

Espero les pueda servir a aquellos que compartan el mismo problema que tuve.

Alejandro Salazar

Hace 9 años

gracias por lo del prefijo, ya me estaba empezando a preguntar!

David Mendieta Cantador

Hace 9 años

pero a mi me funciona bien sin prefijo. ¿Acaso eso es otra conciliación no escrita?

Comentarios (59)59 comentarios

Omar Gaston

Antony Dixon Albites Tapia

Hace 8 años

Hunk Hk

Marcelo Fontana

Julio Isabel Martínez Leal

Jecsham Castillo

Nathaly Stefani Riaño Bejarano

Diego Vallejo

Felipe Moreno

Nando D

Daniel Caita

Jair Israel Avilés Eusebio

Víctor Hugo Rivas Sánchez

Hace 7 años

Jorge Israel Lombardero Juarez

Junior Enrique Rojas

Edgar Gerardo Guzmán Pérez

Alejandro Serrano

Wilson Marino Pablo Mendez

fabian Flechas

Nicolas Saavedra

Gonzalo Ferrando

David Navarro Rolon

Estefania Janet Rodriguez

fernando padilla

Eduardo de la Cruz Ibarra

Profesor

Nahuel Castro

Victor Daniel Anica

Rodolfo Sáenz

Luis Pena

Maria de los Angeles Silva Gutierrez

Roberto Adnier Nuñez Farfán

César Espitia

CARLOS ALBERTO WILSON PEREZ

Hace 5 años

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4

Usando los pipes por defecto de Angular

Parámetros en pipes

Creando nuestro propio pipe

Animaciones en Angular

Configurando animaciones en nuestro proyecto

Transiciones

Callbacks

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

Introducción a unit tests

Configuración de testing por default

Corriendo los tests

Creando unit tests para componentes

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

Cómo funcionan los JSON Web Tokens

Preparación de vistas para login y registro

Registrando usuarios

Loggeando usuarios

Guardias canActivate en Angular: Proteger rutas con autenticación

Cómo integrar Facebook login con Firebase

Logout en Angular con Firebase

RxJS

Cómo funciona RxJS con metáfora de oficina