Compiling on the Fly: Dynamic Components with Angular's `Compiler` (Angular 2.0)

1. Using NgComponentOutlet: This method is suitable for scenarios where you have pre-defined components and want to dynamically insert them into your view based on certain conditions. You don't need runtime compilation here.

   • Define your components with templates as usual.
   • In the parent component's template, use the *ngComponentOutlet directive.
   • Bind the ngComponentOutlet directive to the component you want to render dynamically and provide any required inputs using the inputs property.

2. Using Compiler service for runtime compilation: This approach is useful when you need to create components whose templates are generated at runtime based on user input or fetched data.

   • In this approach, you leverage the Compiler service to dynamically compile a component class and its template at runtime.
   • You'll need to create a template string containing the HTML for the dynamic component.
   • The Compiler service can then compile this template and component class into a factory that can be used to create instances of the dynamic component.

Here's a breakdown of the relevant concepts:

• Templates: In Angular, templates define the view structure of a component using HTML-like syntax. They specify how the component will be rendered in the browser.
• Components: Components are the building blocks of an Angular application. They encapsulate a view (defined by the template) and a controller (defined by the component class written in TypeScript).
• Compilation: Compilation refers to the process of transforming TypeScript code into JavaScript code that can be understood and executed by the browser. In Angular's context of dynamic components, runtime compilation involves creating the component class and template on the fly and then compiling them into executable JavaScript code.

SimpleComponent.ts (pre-defined component)

@Component({
  selector: 'app-simple',
  template: `<h1>This is a simple component!</h1>`
})
export class SimpleComponent { }

ParentComponent.ts (using NgComponentOutlet)

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <button (click)="showSimpleComponent()">Show Simple Component</button>
    <ng-container *ngIf="showSimple">
      <app-simple></app-simple>
    </ng-container>
  `
})
export class ParentComponent {
  showSimple = false;

  showSimpleComponent() {
    this.showSimple = true;
  }
}

In this example, SimpleComponent is a pre-defined component. The ParentComponent uses *ngIf to conditionally render SimpleComponent using NgComponentOutlet.

Using Compiler for runtime compilation (Angular 2.0 specific):

DynamicComponent.ts (template generated at runtime)

import { Component } from '@angular/core';

@Component({
  selector: 'app-dynamic'
})
export class DynamicComponent {
  // This property will hold the dynamically generated template content
  template: string;

  constructor() {
    this.template = `<h1>This is a dynamic component!</h1>`; // Example template string
  }
}

ParentComponent.ts (using Compiler for runtime compilation)

import { Component, Compiler, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <button (click)="createDynamicComponent()">Create Dynamic Component</button>
    <div #container></div>
  `
})
export class ParentComponent {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private compiler: Compiler) { }

  createDynamicComponent() {
    const componentFactory = this.createComponentFactory(DynamicComponent);
    const componentRef = this.container.createComponent(componentFactory);
  }

  createComponentFactory(componentClass: any) {
    const componentString = `
      <template>
        ${componentClass.template}
      </template>
    `;
    @Component({ template: componentString })
    class RuntimeComponent extends componentClass { }

    const module = this.compiler.compileModuleAndAllComponentsSync(RuntimeModule);
    return module.componentFactories[0];
  }
}

@NgModule({
  imports: [],
  declarations: [RuntimeComponent]
})
export class RuntimeModule { }

• ViewContainerRef: This service provides access to a specific location within the component's view where you can dynamically insert or remove views.
• ComponentFactoryResolver: This service helps you resolve a component factory for a given component class. A component factory can be used to create instances of that component dynamically.

Here's an example of how to use these services for dynamic components:

@Component({
  selector: 'app-dynamic',
  template: `<h1>This is a dynamic component!</h1>`
})
export class DynamicComponent { }

ParentComponent.ts (using ViewContainerRef and ComponentFactoryResolver)

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <button (click)="createDynamicComponent()">Create Dynamic Component</button>
    <div #container></div>
  `
})
export class ParentComponent {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  createDynamicComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
    const componentRef = this.container.createComponent(componentFactory);
  }
}

In this example, the ParentComponent injects both ViewContainerRef and ComponentFactoryResolver. It uses componentFactoryResolver to get the factory for DynamicComponent and then uses ViewContainerRef to insert a new instance of the component dynamically.