https://github.com/tauhidul0821/dynamic-component-demo

Created with StackBlitz ⚡️
https://github.com/tauhidul0821/dynamic-component-demo

Last synced: 3 months ago
JSON representation

Created with StackBlitz ⚡️

• Host: GitHub
• URL: https://github.com/tauhidul0821/dynamic-component-demo
• Owner: tauhidul0821
• Created: 2025-01-26T22:22:30.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2025-01-26T22:56:30.000Z (4 months ago)
• Last Synced: 2025-01-26T23:25:05.375Z (4 months ago)
• Language: TypeScript
• Homepage: https://stackblitz.com/edit/stackblitz-starters-8qaphyv7
• Size: 0 Bytes
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.MD

Awesome Lists containing this project

README

        
## live code and web view [click here](https://stackblitz.com/~/github.com/tauhidul0821/dynamic-component-demo?file=README.MD)

```ts

// main.ts

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

import { bootstrapApplication } from "@angular/platform-browser";

import {

  ViewChild,

  ViewContainerRef,

  ComponentFactoryResolver,

} from "@angular/core";

import { DynamicComponent } from "./app/dynamic/dynamic.component";

import { DynamicUsingFactoryResolverComponent } from "./app/dynamic-using-factory-resolver/dynamic-using-factory-resolver.component";

@Component({

  selector: "app-root",

  template: `

    
Hello from {{ name }}!


    

      Load Component Using ComponentFactoryResolver


    


    Load Component 2

    

  `,

})

export class App {

  name = "Angular";

  @ViewChild("dynamicContainer", { read: ViewContainerRef })

  container!: ViewContainerRef;

  @ViewChild("dynamicContainer2", { read: ViewContainerRef })

  container2!: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  loadDynamicComponent(): void {

    const componentFactory =

      this.componentFactoryResolver.resolveComponentFactory(

        DynamicUsingFactoryResolverComponent

      );

    this.container.clear();

    this.container.createComponent(componentFactory);

  }

  loadDynamicComponent2(): void {

    this.container2.clear();

    this.container2.createComponent(DynamicComponent);

  }

}

bootstrapApplication(App);

```