DEV Community

Cover image for What is NgComponentOutlet in Angular?
Ambroise BAZIE
Ambroise BAZIE

Posted on • Updated on

What is NgComponentOutlet in Angular?

NgComponentOutlet is used to instantiate a component type and insert its Host View into the current View.

Things to know

You can control the component creation process by using the attributes below:

  • ngComponentOutletInputs: Optional component inputs object, which will be bind to the component.
  • ngComponentOutletInjector: Optional custon Inject that will be used as parent for the component. Defaults to the injector of the current view container

Example

<!-- dynamic.component.html -->
<ng-container *ngComponentOutlet="displayedComponent"></ng-container>

<!-- dynamic.component.ts -->

@Component({
// ....
})
export class DynamicComponent implements OnInit {

  displayedComponent = EmptyComponent;

  showDetail = false;

  ngOnInit(): void {
      if (this.showDetail) {
        this.displayedComponent = ProductDetailComponent
      } else {
        this.displayedComponent = EmptyComponent
      }
  }
}
Enter fullscreen mode Exit fullscreen mode

For more details visit the official documentation on Angular.io

Top comments (0)