ngComponentOutlet: Cargando componentes dinámicamente

En la entrada de hoy vamos a ver cómo en Angular4 podemos cargar componentes de manera dinámica a través de la directiva NgComponentOutlet
Esta directiva proporciona un enfoque declarativo para la creación de componentes dinámicos.

Vamos a entenderlo mejor con un ejemplo. En esta ocasión vamos a crear un contenedor tab usando el framework css bulma

En primer lugar, instalamos bulma en nuestro proyecto: npm install bulma
Para usar bulma en nuestro proyecto creado con angular-cli, añadimos en el .angular-cli.json la hoja de estilos bulma.css

"styles": [

"styles.css",

"../node_modules/bulma/css/bulma.css"

],

Creamos un tab en bulma tal como se indica en la documentación http://bulma.io/documentation/components/tabs/

Nuestro tab va a ser similar al de la documentación,

<div class="tabs">

<ul>

<li class="is-active"><a (click)="changeComponent('Cine')">Cine</a></li>

<li><a (click)="changeComponent('Teatro')">Teatro</a></li>

<li><a (click)="changeComponent('Musica')">Música</a></li>

</ul>

</div>

Cada link del tab cargará un componente. Luego creamos los tres componentes que va a tener nuestra aplicación: CineComponent, TeatroComponent, MusicaComponent.

El componente vamos a cargarlo de manera dinámica, cuando se haga click en el link del tab, en un ng-container

<ng-container *ngComponentOutlet="component"></ng-container>

Mediante la directiva ngComponentOutlet, indicamos el componente que va a contener el container, luego la declaramos (en app.component.ts) y le asignamos un valor:

private component;

constructor() {

this.component = CineComponent;

}

Cuando se hace click en el título del tab, llamamos a la función changeComponent, que lo que hace es asignar el componente especificado en el parámetro.

changeComponent(componente) {

switch (componente) {

case 'Musica':

this.component = MusicaComponent;

break;

case 'Teatro':

this.component = TeatroComponent;

break;

default:

this.component = CineComponent;

break;

}

}

El resultado final quedará como se muestra a continuación:

En esta entrada hemos visto como la directiva NgComponentOutlet simplifica mucho la carga dinámica de componentes.
Espero que os haya gustado.

Código fuente disponible en: https://github.com/jorgetrigueros/ngComponentOutlet-ejemplo