Angular - NgComponentOutlet - directiva de @angular/commons

Publicado: 12 Julio 2021 por José Luis García Martínez

Categorías:
Tutorial 26

NgComponentOutlet - directiva de @angular/commons

Principales usos

La directiva NgComponentOutlet de Angular se utiliza para dinámicamente cargar y renderizar componentes en una plantilla Angular. Algunas de las cosas que se pueden hacer con esta directiva son:

Cargar componentes dinámicamente en función de la lógica de la aplicación.
Cambiar el componente que se muestra en una vista según la interacción del usuario o los datos obtenidos de una API.
Crear plantillas genéricas que pueden ser reutilizadas para renderizar diferentes componentes según sea necesario.
Aprovechar las ventajas del lazy-loading, para cargar componentes solo cuando sea necesario.
Renderizar componentes en función de la lógica del negocio y del estado de la aplicación.
Crear componentes genéricos que se pueden utilizar en diferentes partes de la aplicación.
Implementar lógica de control de acceso para restringir la visibilidad de ciertos componentes en función de los permisos del usuario.
Crear una experiencia de usuario dinámica y personalizada que cambia según las acciones del usuario o las condiciones de la aplicación.
Renderizar componentes dentro de una lista o de otro componente dinámicamente.
Crear componentes modales dinámicos que se cargan y muestran en la pantalla según las necesidades de la aplicación.

Ejemplo - Carga de componentes dinámicamente

Primero, crea dos componentes de ejemplo que se cargarán dinámicamente:

// hello.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: '<p>Hello, World!</p>'
})
export class HelloComponent {}

// goodbye.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-goodbye',
  template: '<p>Goodbye, World!</p>'
})
export class GoodbyeComponent {}

Luego, en el componente principal, importa los componentes y define una variable que represente el componente que se cargará de forma dinámica:

// app.component.ts
import { Component, Type } from '@angular/core';
import { HelloComponent } from './hello.component';
import { GoodbyeComponent } from './goodbye.component';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="switchComponent()">Switch Component</button>
    <ng-container *ngComponentOutlet="currentComponent"></ng-container>
  `,
})
export class AppComponent {
  currentComponent: Type<any>;
  private isHelloComponent: boolean = true;

  constructor() {
    this.currentComponent = HelloComponent;
  }

  switchComponent() {
    this.isHelloComponent = !this.isHelloComponent;
    this.currentComponent = this.isHelloComponent ? HelloComponent : GoodbyeComponent;
  }
}

No olvides agregar los componentes en las declaraciones y en entryComponents del módulo principal (si estás utilizando Angular 8 o inferior):

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { GoodbyeComponent } from './goodbye.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent,
    GoodbyeComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [HelloComponent, GoodbyeComponent]
})
export class AppModule { }

En este ejemplo, se crea un botón que, al hacer clic, cambia el componente que se muestra en el contenedor usando la directiva ngComponentOutlet. Los componentes HelloComponent y GoodbyeComponent se cargarán de forma dinámica en función de la lógica de la aplicación, en este caso, alternándolos cada vez que se hace clic en el botón.

... y finalmente... Si te ha gustado, difúndelo. Es solo un momento. escríbe algo en comentarios 😉 Gracias.