What is NgComponentOutlet in Angular?

ognanshissi

Ambroise BAZIE

Posted on September 7, 2023

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

💖 💪 🙅 🚩
ognanshissi
Ambroise BAZIE

Posted on September 7, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

What is NgComponentOutlet in Angular?
angular What is NgComponentOutlet in Angular?

September 7, 2023