Programmatically rendering components

ViewContainerRef

ViewContainerRef is an Angular service that provides methods for manipulating the view hierarchy. It allows you to add, remove, and reorder views within a view container, making it a powerful tool for dynamic component creation.

Key Features of ViewContainerRef

1. Creating Components: Use createComponent to dynamically create a component.
2. Inserting Views: Use insert to add views at specific positions.
3. Removing Views: Use remove to remove views.
4. Clearing Views: Use clear to remove all views.

Example: Using ViewContainerRef

// dynamic.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-dynamic',
  template: `<p>{{data}}</p>`
})
export class DynamicComponent {
  @Input() data: string;
}

// dynamic-host.directive.ts
import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appDynamicHost]'
})
export class DynamicHostDirective {
  constructor(public viewContainerRef: ViewContainerRef) {}
}

// parent.component.ts
import { Component, ViewChild, ComponentFactoryResolver } from '@angular/core';
import { DynamicHostDirective } from './dynamic-host.directive';
import { DynamicComponent } from './dynamic.component';

@Component({
  selector: 'app-parent',
  template: `
    <ng-template appDynamicHost></ng-template>
    <button (click)="loadComponent()">Load Component</button>
  `
})
export class ParentComponent {
  @ViewChild(DynamicHostDirective, { static: true }) dynamicHost!: DynamicHostDirective;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  loadComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
    const viewContainerRef = this.dynamicHost.viewContainerRef;
    viewContainerRef.clear();

    const componentRef = viewContainerRef.createComponent<DynamicComponent>(componentFactory);
    componentRef.instance.data = 'Hello, dynamically loaded component!';
  }
}

NgComponentOutlet

NgComponentOutlet is a structural directive in Angular that allows you to dynamically insert a component into the DOM. It provides a simpler and more declarative approach compared to ViewContainerRef.

Key Features of NgComponentOutlet

1. Declarative Component Insertion: Use the [ngComponentOutlet] directive to specify the component type.
2. Simple API: Easier to use for straightforward dynamic component rendering scenarios.

Example: Using NgComponentOutlet

// dynamic-one.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-dynamic-one',
  template: `<p>Dynamic Component One</p>`
})
export class DynamicOneComponent {}

// dynamic-two.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-dynamic-two',
  template: `<p>Dynamic Component Two</p>`
})
export class DynamicTwoComponent {}

// parent.component.ts
import { Component } from '@angular/core';
import { DynamicOneComponent } from './dynamic-one.component';
import { DynamicTwoComponent } from './dynamic-two.component';

@Component({
  selector: 'app-parent',
  template: `
    <ng-template [ngComponentOutlet]="currentComponent"></ng-template>
    <button (click)="loadComponent('one')">Load Component One</button>
    <button (click)="loadComponent('two')">Load Component Two</button>
  `
})
export class ParentComponent {
  currentComponent: any = null;

  loadComponent(component: string) {
    if (component === 'one') {
      this.currentComponent = DynamicOneComponent;
    } else if (component === 'two') {
      this.currentComponent = DynamicTwoComponent;
    }
  }
}

Comparison: ViewContainerRef vs NgComponentOutlet

Feature	ViewContainerRef	NgComponentOutlet
Use Case	Complex scenarios requiring programmatic control	Simple scenarios needing declarative approach
API Complexity	More complex, imperative API	Simpler, declarative API
Component Insertion	Requires ComponentFactoryResolver	Directly specify component in template
Manipulating Views	Full control over view manipulation	Limited to component insertion
Use Cases	Dynamic forms, advanced dynamic component logic	Conditional component loading
Performance	Slightly more overhead due to imperative control	Lightweight, suitable for straightforward needs

Summary

• ViewContainerRef: Provides fine-grained control over dynamic component creation and view manipulation. Suitable for advanced use cases where you need to programmatically manage views.
• NgComponentOutlet: Offers a simpler, more declarative way to dynamically insert components. Ideal for straightforward scenarios where components need to be conditionally loaded based on state or user interaction.

Choosing between ViewContainerRef and NgComponentOutlet depends on the complexity and requirements of your use case. For most simple dynamic component rendering scenarios, NgComponentOutlet is the easier and more concise choice. For more complex scenarios requiring detailed control, ViewContainerRef is the better option.