Directiva de atributo

Resumen

Ya hemos usado directivas como ngSwitch, gIf, ngClass, etc, éstas son directivas que ya vienen definidas por el framework, en éste vídeo vamos a crear una directiva propia para resaltar aquellos negocios que te estén pagando por publicidad.

Omar Gaston

student•

El Curso esta excelente, pero creo que interactuamos con muchas cosas nuevas, que deben ser mejor explicadas.

Antony Dixon Albites Tapia

student•

Creo que están bien explicadas para personas con una base en programación.

Hunk Hk

student•

Antony_Dixon_25 , si tu entiendes , bien por ti , no eres nadie , para cuestionar el entendimiento de otra persona , yo tambien tengo base de programación , pero , este profesor lo explica muy rapido , en mi opinion. Si tu sabes , ahorrate tus comentarios y avanza , deja a los demás aprender.

Marcelo Fontana

student•

La importancia de usar la CLI para generar la directiva:

Cuando desde la CLI creamos la directiva con

ng generate directive resaltar

automaticamente nos genera el archivo correspondiente y tambien declara la misma en el appModule (evitando errores y olvidos), nombrando tambien al selector como appResaltar.

¿Por qué no “resaltar”? (de la documentación de Angular)
Aunque [resaltar] sería un selector más conciso que [appresaltar] y funcionaría, la mejor práctica es ponerle un prefijo a los nombres de los selectores para garantizar que no entren en conflicto con los atributos estándar de HTML. Esto también reduce el riesgo de colisión con nombres de directivas de terceros.

Julio Isabel Martínez Leal

student•

Tambien, si eres un poco flojo como yo, lo puedes hacer así:

ng g d directives/miDirectiva

y ya inglulle la carpeta (directives)

Jecsham Castillo

student•

Gracias por compartirnos esos datos 👍

Nathaly Stefani Riaño Bejarano

student•

En el decorador @Directive se especifica el selector de la directiva.
ElementRef: nos permite crear una referencia de elemento de HTML para poder manipularla en TypeScript.
Renderer2: También permite manipular un elemento HTML, pero más enfocado a css, esto se hace también para que el mismo código sirva en las diferentes plataformas (servidor, browser, mobile, etc).
ngOnInit: Acá colocamos toda la lógica del negocio, es decir, lo que quremos que nuestra directiva ejecute.
setStyle() recibe tres parámetros: Elemento nativo, Atributo de css que queremos modificar, Valor para el atributo de css.

Diego Vallejo

student•

Excelente aporte

Felipe Moreno

student•

Muchas gracias, leyéndolo varias veces ya queda más claro, fue un bombardeo de muchos conceptos en muy pocos minutos!

Julián Sotelo

student•

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

student•

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

David Mendieta Cantador

student•

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

Nando D

student•

Me estaba gustando el curso hasta aquí.
Es imposible explicar esto en 9 minutos, se tocan demasiadas cosas en pocos segundos y para los que estamos aprendiendo es imposible entender todo en tan poco tiempo.

Daniel Caita

student•

Igual puedes ver el vídeo las veces que quieras, no?

Jair Israel Avilés Eusebio

student•

¿Cual es la duda? entre nosotros te podemos ayudar tambien

Víctor Hugo Rivas Sánchez

student•

Angular nos permite desarrollar directivas personalizadas. Es necesario manejar diferentes elementos, tales como:

@Directive: Anotación para identificar un elemento como directiva.

OnInit: Interface que es llamada cuando las propiedades de una directiva son invocadas.

ngOnInit: Función que es ejecutada al momento de llamar la directiva. Acá se coloca la lógica de negocio.

ElementRef: Clase utilizada para hacer referencia al elemento en donde se está implementando la directiva.

Renderer2: Renderiza el elemento cuando se le asigna un estilo.

Input: Tipo de metadata de entrada.

Jorge Israel Lombardero Juarez

student•

Les recomiendo utilizar el editor de Visual Studio Code, instalando los snippets de Angular, pues así mientras creas la directiva, automáticamente va importando las librerias necesarias.

Sin embargo sí considero que no está bien explicada en esta clase qué es cada cosa que se está haciendo. No me gustó.

Junior Enrique Rojas

student•

Puedes crear una directiva con este comando de angular cli ->

ng g d directives/resaltar

Edgar Gerardo Guzmán Pérez

student•

Creo que el comando correcto es:

‘ng g d directives/newdirective’

Te faltó un espacio

Alejandro Serrano

student•

Si usas VSCODE puedes usar el hotkey alt+shift +f y reorganiza el codigo. Super util!

Felipe Moreno

student•

Mi héroe!

Wilson Marino Pablo Mendez

student•

Gracias

fabian Flechas

student•

recomiendo este link para aquellos que como yo encontraron muchos conceptos nuevos
http://www.enrique7mc.com/2017/04/diferencia-entre-constructor-y-ngoninit-en-angular-2/

Jair Israel Avilés Eusebio

student•

Excelente aporte, muchas gracias.

Nicolas Saavedra

student•

Es un buen curso desde el punto de vista, “esto se hace así, miren”. Pero falta esa explicación digna de un curso, “esto es así, porque…”. Básicamente una explicación practico-teorica de lo que se está haciendo en el momento. Un poco más de fundamento a cada clase practica siempre es bueno

Gonzalo Ferrando

student•

Es un punto de vista, pero si fealmente f

Gonzalo Ferrando

student•

Es un punto de vista respetable, pero si realmente te dedicas a programar, no hay mucho más para explicar. Para eso hay cursos más introductorios. Saludos

David Navarro Rolon

student•

hasta aqui llego la felicidad… seria bueno explicar mas a fondo las directivas…

Estefania Janet Rodriguez

student•

opino igual

Marcelo Fontana

student•

Directivas de atributos (de la documentación de Angular)
Una directiva de atributo cambia la apariencia o el comportamiento de un elemento del DOM.
Hay tres tipos de directivas en Angular:

Components - directivas con un template
Directivas estructurales: cambian el diseño del DOM añadiendo y eliminando elementos. Ej. ngFor - ngIf y ngSwitch
Directivas de atributo: se usan para cambiar la apariencia o el comportamiento de un elemento, componente u otra directiva. La directiva ngStyle por ejemplo , puede cambiar varios estilos de elementos al mismo tiempo.

fernando padilla

student•

Me sale el siguiente error…

Failed to compile.

C:/Users/Cristhian/Desktop/PlatziSquare/src/app/directives/resaltar.directive.ts (5,3): Declaration expected.

Sin embargo, ya tengo declarado el módulo.

Eduardo de la Cruz Ibarra

teacher•

Podrías pegar la línea 5 de tu archivo de directiva? Saludos!

fernando padilla

student•

Esa es la línea 5 del código de resaltar.directive.ts

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

Estefania Janet Rodriguez

student•

Bueno gente de platzi, aqui explican demasiadas cosas en un video, no se entiende !

Nahuel Castro

student•

Soy yo o esta clase no se entiende absolutamente nada?

Victor Daniel Anica

student•

¿Qué es lo que no entendiste?, la directiva que creeo solo cambia el fondo en casi de que el input que recive sea "pagado". Se crea la directiva X con el prefijo *.directive. en el constructor recibes los elementos que trabajaras elRef y renderer en ngOnInit esta tu logica.

Rodolfo Sáenz

student•

Este video fue un poco trivial de entender e implementar. Pero lo pude lograr. Como nota, el tslint me pide cambiar de

selector : '[resaltar]'

selector : '[appResaltar]'

seguimos …

Luis Pena

student•

Yo estuve leyendo eso y lo puse asi selector:'[appResaltar]'

Luis Pena

student•

Pero no me funciona

Maria de los Angeles Silva Gutierrez

student•

mi archivo app.component.html

<ng-container *ngFor="let lugar of lugares ; let i = index" [ngSwitch]="lugar.cercania">

<li [ngStyle]="{color: (lugar.active) ? 'black' : 'gray'}" [ngClass]="{numero_par: (i+1) % 2 !== 0}" [resaltar]="lugar.plan"> {{lugar.nombre}} - Muy Cercano Cercano Lejano </li> </ng-container>

mi archivo app.component.ts

lugares:any=[ {plan: 'pagado' , cercania: 1, distancia: 1 , active: true , nombre:'Floreria de Gardenia'}, {plan: 'gratuito' , cercania: 1, distancia: 1.8 , active: true , nombre:'Donas la pasadita'}, {plan: 'gratuito' , cercania: 2, distancia: 5 , active: true , nombre:'Veterinaria Huellitas Felices'}, {plan: 'gratuito' , cercania: 3, distancia: 10 , active: false , nombre:'Sushi Suhiroll'}, {plan: 'pagado' , cercania: 3, distancia: 35 , active: true , nombre:'Hotel la Gracia'}, {plan: 'gratuito' , cercania: 3, distancia: 120 , active: false , nombre:'Zapateria el Clavo'} ];

resaltar.directive.ts

import { Directive, OnInit, ElementRef, Renderer2, Input } from '@angular/core'; @Directive({ selector : '[resaltar]' }) export class ResaltarDirective implements OnInit{ constructor(private elRef: ElementRef, private renderer: Renderer2){} @Input('resaltar') 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'); } } }

Roberto Adnier Nuñez Farfán

student•

La directiva la puedes también crear desde el comando

ng generate directive highlight

que te generará automáticamente los archivos pertinentes e incluso lo importará en app.module.ts

César Espitia

student•

Pregunta. ¿Por qué es necesario que los objetos ElementRef y Renderer2 sean enviados como párametros del constructor en vez de ponerlos como atributos de la clase? Es decir por qué esto:

constructor(private refer: ElementRef, private render: Renderer2) {}

En vez de esto:

private refer: ElementRef
private render: Renderer2
constructor() {}

CARLOS ALBERTO WILSON PEREZ

student•

Se puede pensar en ElementRef y en Renderer2 como servicios, en vez de simple propiedades. Los servicios se hacen disponibles a la clase por medio de "inyectarlos" en el constructor de la clase donde se usan.

Directiva de atributo

Inicio del curso

De qué tratará este curso sobre Angular 4

Introducción a Angular 4

Versionamiento en Angular

¿Qué es Angular? Versiones y ventajas

Typescript: qué es

Introducción al Proyecto: PlatziSquare!

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

Two Way Data Binding

Directivas en Angular 4 y ngFor

Directiva ngIf

Instalando librerías con NPM (Google Maps)

Directivas

Directivas ngStyle y ngClass

Directiva ngSwitch

Directiva de atributo

Host Listeners

Host Binders

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

Diferencias entre href y routerLink

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

Parámetros en Rutas

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Creando la página de contacto para PlatziSquare

Servicios

Qué son los servicios en Angular 4

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

Protección de Rutas

Autenticación con redes sociales.

Logout

RxJS