Host Listeners

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:006:14

Host Listeners

Curso de Angular 4

Clase 20 de 80

Clase 20 / 80

Recursos

Aprende a crear una directiva de atributo en Angular para contar clics en anchors y aprovechar datos de analytics sin complicaciones. Verás cómo usar HostListener para escuchar eventos, limitar el selector a hipervínculos y registrar información en console para debugging. Además, integra la directiva en app.module.ts y úsala en tu lista de lugares. Si luego quieres almacenar datos, lo ideal es persistirlos en un servidor con Node.

¿Qué problema resuelve esta directiva de Angular?

Esta solución te permite medir interacciones reales sobre enlaces y respaldar decisiones con datos. Es útil para presentar resultados a propietarios: visitas, clics diarios y comportamiento por elemento.

Contar clics por elemento con una directiva ligera.
Analytics accionables desde el front-end.
Escucha de eventos con HostListener de forma declarativa.
Alcance por anchor: cada enlace lleva su propio conteo.

¿Cómo se crea la directiva de atributo con HostListener?

Partimos de un archivo con la convención de Angular: nombre en pascal case para la clase, sufijo .directive.ts y un selector de atributo que aplica solo a enlaces.

// contar-clicks.directive.ts
import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: 'a[contarClicks]'
})
export class ContarClicksDirective {
  private clickN = 0;

  @HostListener('click', ['$event.target'])
  onClick(btn: HTMLElement) {
    console.log('En el anchor:', btn);
    console.log('Número de clicks:', this.clickN++);
  }
}

Claves de la implementación:

@Directive con selector de atributo: 'a[contarClicks]'.
Variable de estado: clickN inicia en 0 y se incrementa en cada clic.
@HostListener('click'): escucha el evento y recibe el event target.
Salida de debugging: imprime el anchor, el mensaje y el conteo.

¿Cómo registrarla en app.module.ts?

Asegúrate de declararla para usarla en plantillas.

// 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';
import { ContarClicksDirective } from './directives/contar-clicks.directive';

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

¿Cómo usarla en la lista de lugares?

La directiva no recibe parámetros: no uses corchetes. Aplícala directamente sobre el anchor que envuelve el elemento.

<a contarClicks>
  <li>La Gardenia</li>
</a>

<a contarClicks>
  <li>Hotel La Gracia</li>
</a>

Tips prácticos para validar en la console del navegador:

Abre la pestaña consola y filtra niveles: desactiva errores si distraen.
Verás el mensaje con el número de clicks creciendo por elemento.
Cambia entre enlaces: cada uno conserva su propio conteo.

¿Qué debes saber de eventos y alcance?

Con HostListener el alcance es por instancia: cada anchor obtiene su propio oyente y su propio estado. Por eso, si haces clic en “La Gardenia” y luego en “Hotel La Gracia”, cada uno muestra su propio contador independiente.

Puntos clave para eventos:

Evento principal: click. Puedes usar otros como mouseover o blur.
Parámetro del oyente: $event.target para acceder al elemento objetivo.
Buenas prácticas: mantén el conteo en una propiedad privada y usa console para debugging.
Persistencia recomendada: guarda los analytics en servidor con Node cuando sea necesario.

¿Quieres que amplíe el ejemplo con envío de datos al servidor o más eventos del DOM? Cuéntame tu caso y te propongo el siguiente paso.

Armando Perdomo

Hace 8 años

Tuve mucho interés de que los clicks (en mi caso visitas) fueran incrementadas en la misma instancia donde están los lugares, por que como esta explicado incrementa a una variable que es una instancia de la misma directiva, mas no de los datos que provienen del ts

acá dejo un ejemplo de lo que me refiero

Primero agregué un atributo de visitas a mis datos de los sitios y fue inicializado en 0

places: any = [
    {plan:'free', closeness: 1, distance: 0.50, name:"Barsoke" ,visits: 0},

En mi anchor le agrego los [] a la directiva para pasar por parámetro la instancia del objeto

<ng-container *ngFor="let place of places">
	<a [count-visitors]="place">

y en mi directiva declaré ‘place: any’ para captar la instancia del objeto y así incrementar el place.visits++

@Directive({
    selector: 'a[count-visitors]'
})
export class CountVisitors{
    @Input('count-visitors') place :any;
    @HostListener('click',['$event.target']) printCounter(){
        this.place.visits++
        console.log("Numero de visitas", this.place.visits)
    }
}

Nota: pensaba que tenía que llamar a la función onClick obligatoriamente, pero la verdad no es así, la anotación espera una función de JavaScript como parámetro y puede ser llamada como quiera al parecer (si sabes algo más, déjalo como respuesta)

Y por ultimo agregué el string interpolation para ver las visitas directas del databinding de la instancia y comprobar si realiza el cambio

{{place.visits}}

Y pues funcionó, no se si esto lo explica en otro vídeo pero quise probar por mis propios fundamentos!

Claro esta que estos cambios solo afectan a los datos en memoria, si de verdad se desea cambiar los mismos del lado del servidor pues optaríamos hacer una petición dentro de la función.

En ejemplo:

@Input('count-visitors') place :any;
@HostListener('click',['$event.target']) doSomethingIfsClicked(){
       //updateVisitorsFrom(place.id, place.plan, place.name)
    }

Carlos Ferrer

Hace 8 años

Perfecto, es justo lo que quería hacer.
Lo he agregado a mi código (utilizando mi nomenclatura) y ha funcionado perfectamente.
La verdad es que no tenía ni idea de como hacerlo.
De hecho lo he agregado pero aun tengo que analizarlo para saber y comprender realmente qué es lo que estoy haciendo.
Muchas gracias, muy buen aporte.
Enhorabuena.

Rodolfo Sáenz

Hace 8 años

Excelente aporte hermano!

Comentarios (48)48 comentarios

Duilio Luque

Hace 9 años

Williams Alejandro Pérez Granado

Usuario anónimo

User

Gilberth Arias Araya

Nicolas Saavedra

Alejandro Castaño Garcés

José Valentin Salina Peña

Marcelo Fontana

Joshua Nathanael Saucedo Uriarte

Víctor Hugo Rivas Sánchez

Hace 7 años

Yesid Anacona

William Rodriguez

Adrian Alberto Casas Lopez

Newman Fajardo

Juan Esteban Deossa Pertuz

Edith Adriana Lopez Hernandez

Hace 3 años

Juan Carlos Pinzón

Estefania Janet Rodriguez

Noé Muñoz

Teofilo Rosales Gama

Hunk Hk

Alejandro Serrano

Alejandro González Reyes

Julio Isabel Martínez Leal

Carlos Uriel de Jesus Sánchez González

Matias Cabido

VICTOR JUAREZ PALAFOX

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