The ngComponentOutlet allows to instantiate a single component type and insert its view into host(parent) component view. NgComponentOutlet provides a declarative approach for dynamic component creation.
Note: It needs to be expose the outlet component before it gets assign to ngComponentOutlet.
ngComponentOutlet without attribute
1 import { Component } from '@angular/core';
2
3
4 @Component({
5 selector: 'child-outlet',
6 template: 'This is child component outlet template !!'
7 })
8 class ChildOutlet {
9 }
In the above example, a component is created with inline template that prints simple string. A Component can be assigned to to variable to the existing host component that will be bind using ngComponentOutlet directive.
1 import { Component } from '@angular/core';
2 import { ChildOutlet } from './child.component';
3
4 @Component({
5 selector: 'app-root',
6 templateUrl: 'app.component.html',
7 styleUrls: ['./app.component.less']
8 })
9 export class AppComponent {
10
11 childOutlet = ChildOutlet;
12 }
In the above example, a component is created by importing a ChildOutlet component. A component is assigned to a local variable that accessible in the component template.
1 <h1> ngComponentOutlet directive </h1>
2
3 <ng-container *ngComponentOutlet="childOutlet"></ng-container>
In the above template, a template directive ng-container added by specifying a attribute directive ngComponentOutlet by assigning a component variable childOutlet that render a specified component in the template that renders string.
Optional attributes
| 1. | injector : It is optional custom Injector that will be used as parent injector for the component. Defaults to the injector of the current view container. |
| 2. | content : It is optional list of projectable nodes to be insert into the content section of the component, if any. |
| 3. | ngModuleFactory : It is optional module factory to allow dynamically loading other module, then load a component from that module. |
ngComponentOutlet with attribute
1 import { Injectable } from "@angular/core";
2
3 @Injectable()
4 class Service {
5
6 getMessage(): string {
7 return 'This is service message !!';
8 }
9 }
In the above example, a service class is created with method getMessage() that returns a string.
1 import { Component, OnInit } from "@angular/core";
2 import { Service } from "./service/content.service";
3
4 @Component({
5 selector: 'complete-component',
6 template: `<ng-content></ng-content> <ng-content></ng-content> <br> {{ message }}`
7 })
8 class ChildComponent implements OnInit {
9
10 message: string = '';
11 constructor(public service: Service) { }
12
13 ngOnInit() {
14 this.message = this.service.getMessage();
15 }
16 }
In the above example, a component is created property message and expects a dependency of Service class. A ngOnInit() method calls service method and retrieve message. A component has inline template that defines two placeholder and render message variable using string interpolation.
1 import { Component, Injector, OnInit, ReflectiveInjector } from "@angular/core";
2 import { ChildComponent } from "./component/child.component";
3 import { Service } from "./service/content.service"
4
5
6 @Component({
7 selector: 'app-root',
8 templateUrl: './app.component.html'
9 })
10
11 export class AppComponent {
12
13 completeComponent = ChildComponent;
14 injector: Injector;
15
16 content = [
17 [document.createTextNode('This is first node !! ')],
18 [document.createTextNode('This is second node !!')]
19 ];
20
21 constructor(injector: Injector) {
22 this.injector = ReflectiveInjector.resolveAndCreate([Service], injector);
23 }
24 }
In the above example, a component is created with two variables ChildComponent and Injector. An Injector object initialize in constructor and register dependency of Service class. A content array is created with two elements of text node.
1 <h1> ngComponentOutlet directive optional attributes </h1>
2
3 <ng-container *ngComponentOutlet="completeComponent;
4 injector: injector;
5 content: content">
6 </ng-container>
In the above template, a template container ng-container is added by specifying a ngComponentOutlet by passing an optional parameters Injector that responsible to inject service in child component and content array will be rendered from content array.
Related options for your search