Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

NgComponentOutlet

Instantiates a Component type and inserts its Host View into the current View. NgComponentOutlet provides a declarative approach for dynamic component creation.

See more...

Exported from

Selectors

Properties

Property Description
@Input()
ngComponentOutlet: Type<any> | null
@Input()
ngComponentOutletInputs?: Record<string, unknown>
@Input()
ngComponentOutletInjector?: Injector
@Input()
ngComponentOutletContent?: any[][]
@Input()
ngComponentOutletNgModule?: Type<any>
@Input()
ngComponentOutletNgModuleFactory?: NgModuleFactory<any>

Deprecated This input is deprecated, use ngComponentOutletNgModule instead.

Description

NgComponentOutlet requires a component type, if a falsy value is set the view will clear and any existing component will be destroyed.

Fine tune control

You can control the component creation process by using the following optional attributes:

  • ngComponentOutletInputs: Optional component inputs object, which will be bind to the component.

  • ngComponentOutletInjector: Optional custom Injector that will be used as parent for the Component. Defaults to the injector of the current view container.

  • ngComponentOutletContent: Optional list of projectable nodes to insert into the content section of the component, if it exists.

  • ngComponentOutletNgModule: Optional NgModule class reference to allow loading another module dynamically, then loading a component from that module.

  • ngComponentOutletNgModuleFactory: Deprecated config option that allows providing optional NgModule factory to allow loading another module dynamically, then loading a component from that module. Use ngComponentOutletNgModule instead.

Syntax

Simple

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

With inputs

      
      <ng-container *ngComponentOutlet="componentTypeExpression;
                                  inputs: inputsExpression;">
</ng-container>
    

Customized injector/content

      
      <ng-container *ngComponentOutlet="componentTypeExpression;
                                  injector: injectorExpression;
                                  content: contentNodesExpression;">
</ng-container>
    

Customized NgModule reference

      
      <ng-container *ngComponentOutlet="componentTypeExpression;
                                  ngModule: ngModuleClass;">
</ng-container>
    

A simple example

      
      @Component({selector: 'hello-world', template: 'Hello World!'})
export class HelloWorld {}

@Component({
  selector: 'ng-component-outlet-simple-example',
  template: `<ng-container *ngComponentOutlet="HelloWorld"></ng-container>`,
})
export class NgComponentOutletSimpleExample {
  // This field is necessary to expose HelloWorld to the template.
  HelloWorld = HelloWorld;
}
    

A more complete example with additional options:

      
      @Injectable()
export class Greeter {
  suffix = '!';
}

@Component({
  selector: 'complete-component',
  template: `{{ label }}: <ng-content></ng-content> <ng-content></ng-content>{{ greeter.suffix }}`,
})
export class CompleteComponent {
  @Input() label!: string;

  constructor(public greeter: Greeter) {}
}

@Component({
  selector: 'ng-component-outlet-complete-example',
  template: ` <ng-template #ahoj>Ahoj</ng-template>
    <ng-template #svet>Svet</ng-template>
    <ng-container
      *ngComponentOutlet="
        CompleteComponent;
        inputs: myInputs;
        injector: myInjector;
        content: myContent
      "
    ></ng-container>`,
})
export class NgComponentOutletCompleteExample implements OnInit {
  // This field is necessary to expose CompleteComponent to the template.
  CompleteComponent = CompleteComponent;

  myInputs = {'label': 'Complete'};

  myInjector: Injector;
  @ViewChild('ahoj', {static: true}) ahojTemplateRef!: TemplateRef<any>;
  @ViewChild('svet', {static: true}) svetTemplateRef!: TemplateRef<any>;
  myContent?: any[][];

  constructor(
    injector: Injector,
    private vcr: ViewContainerRef,
  ) {
    this.myInjector = Injector.create({
      providers: [{provide: Greeter, deps: []}],
      parent: injector,
    });
  }

  ngOnInit() {
    // Create the projectable content from the templates
    this.myContent = [
      this.vcr.createEmbeddedView(this.ahojTemplateRef).rootNodes,
      this.vcr.createEmbeddedView(this.svetTemplateRef).rootNodes,
    ];
  }
}