Componentes dinámicos con Angular 5, sistema de publicidad

Componentes dinámicos con Angular 5, sistema de publicidad
Hola y bienvenido, en este tutorial vamos a crear una aplicación que mostrará publicidad de distintos clientes en una web.

Imagina que te piden mostrar un banner de publicidad de distintos clientes, uno vende coches, el otro casas, otro simplemente quiere anunciarse, en fín, cada cliente es distinto del anterior, y obviamente, eso complica las cosas.

Para solucionar este problema tenemos una buena alternativa, componentes dinámicos con Angular 5, gracias a este recurso, este trabajo es muy sencillo, la idea es tener un componente distinto para cada cliente y saber cómo cargarlos todos de golpe y mostrarlos en forma de slider.

Componentes dinámicos con Angular 5

Componentes dinámicos con Angular 5

Crear una directiva para controlar el componente actual

Lo primero que debemos hacer es crear una directiva que tenga inyectado en su constructor la clase ViewContainerRef para poder controlar más adelante el componente que debemos mostrar en cada caso.

Clase para representar a cada Componente

Ahora necesitamos crear una clase la cual representará de forma dinámica a cada componente que represente a nuestro banner publicitario.

Como puedes ver, por un lado tendremos el componente y por otro los datos de ese componente, su forma de uso será similar a la siguiente.

Para darle tipado a cada componente antes de mostrarlo en nuestra app, simplemente podemos crear una interfaz añadiendo la propiedad data de la siguiente forma.

Obviamente data no puede tener ningún tipo ya que todos los datos van a ser completamente dinámicos, así que debemos utilizar any.

Componentes para cada cliente

Ahora vamos a generar los componentes que necesitemos para cada cliente, en mi caso un componente para este sitio, Unodepiera, y otro para la plataforma de cursos, Cursosdesarrolloweb.

Algo que debemos destacar mucho aquí es que cada componente utiliza datos distintos, mientras uno tiene una propiedad title, el otro tiene una propiedad name, por lo tanto podemos hacer de forma separada lo que necesitemos.

Además, estamos utilizando @Input ya que los datos se van a inyectar de forma dinámica gracias a viewContainerRef, lo veremos de aquí a poco.

Servicio para obtener todos los anuncios

En este punto necesitamos hacer una petición a algún sitio para saber qué clientes y anuncios debemos cargar, aunque nosotros lo vamos a hacer de una forma sencilla, se podría hacer una petición a un servidor y obtener la información sin problemas.

Cómo puedes ver, simplemente tenemos un método que nos devuelve todos los clientes que debemos mostrar, ahora debemos utilizar todo lo que hemos hecho en un nuevo componente para que el banner publicitario empiece a funcionar.

Aquí puedes ver que utilizamos la directiva add-host, gracias a la línea @ViewChild(AdDirective) adHost: AdDirective podremos acceder a ViewContainerRef, limpiar el componente anterior, cargar uno de nuevo e inyectar los datos (data) del componente cargado.

El método importante y en el que debemos fijarnos es loadComponent, el cual es llamado cada 3 segundos haciendo uso de setInterval, por lo tanto, cada 3 segundos el banner cambiará y mostrará información de otro cliente.

Algo muy importante también es el uso de ChangeDetectorRef, el método detectChanges se encargará de detectar todos los cambios del componente y de sus hijos para que trabaje correctamente, es necesario utilizarlo.

Con la línea @Input() ads: AdBanner[]; seremos capaces de enviar los banners publicitarios desde otro componente para que sean mostrados.

Con la línea (componentRef.instance).data = adItem.data;, además de utilizar la interfaz Ad creada anteriormente, le pasamos los datos al componente que estamos cargando, que es la propiedad data que tiene cada uno de nuestros clientes (UnodepieraComponent).

EntryComponents, carga imperativa de componentes

Normalmente utilizamos la carga declarativa de componentes, que significa que directamente los utilizamos en nuestras templates.

En el caso de nuestros clientes, la carga es imperativa, ya que no los utilizamos en una template, por lo tanto, necesitamos utilizar EntryComponents en nuestro módulo, en mi caso el app.module.ts de la siguiente forma.

Ahora ya lo tenemos todos listo, sólo tenemos que abrir nuestro archivo app.component.ts y modificar el código por el siguiente para que todo esté funcionando.

Lo último es lo más fácil de todo :P, haciendo uso del componente AdBannerComponent de forma declarativa y pasando como dato de entrada ads con los clientes que nos devuelve el servicio AdService tenemos suficiente.

A partir de ahora todo empezará a funcionar y tendrás un completo sistema de publicidad listo para adaptar a tus necesidades.

Utilizar componentes dinámicos con Angular 5 nos puede ayudar mucho en muchos casos, pero claramente este es uno de ellos, este ejemplo ha sido sacado de la documentación de Angular.

Cursos de Angular

Si estás interesado en Angular, visita Cursosdesarrolloweb, tenemos varios cursos sobre Angular que seguro te interesan.

Todos los cursos tienen acceso de forma indefinida 24/7, así que puedes seguirlos adecuando el horario a tus necesidades.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies
No te pierdas los últimos cursos y las nuevas promociones de CursosdesarrollowebACCEDER AHORA
+ +