9

I am starting to learn DOM manipulation in Angular and notice templateRef and its method createEmbeddedView. I am more curious to learn about this method. Now all my question is, how to use the createEmbeddedView of this method

@Component({
  selector: 'app-root',
  template: `
<ng-template #template>

</ng-template>
  `
})
export class AppComponent implements AfterViewChecked {
        @ViewChild('template', { read: TemplateRef }) _template: TemplateRef<any>;      
  constructor() { }

  ngAfterViewChecked() {
    this._template.createEmbeddedView('this is a embedded view')
  }
}
raven
  • 2,381
  • 2
  • 20
  • 44
Lijin Durairaj
  • 4,910
  • 15
  • 52
  • 85

2 Answers2

18

You can create an embedded view using createEmbeddedView method then attach that view to the DOM via ViewContainerRef:

@Component({
    selector: 'app-root',
    template: `
        <ng-template #template let-name='fromContext'><div>{{name}}</ng-template>
        <ng-container #vc></ng-container>
    `
})
export class AppComponent implements AfterViewChecked {
    @ViewChild('template', { read: TemplateRef }) _template: TemplateRef<any>;
    @ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;
    constructor() { }

    ngAfterViewChecked() {
        const view = this._template.createEmbeddedView({fromContext: 'John'});
        this.vc.insert(view);
    }
}

Or you can create a view using ViewContainerRef directly:

ngAfterViewChecked() {
    this.vc.createEmbeddedView(this._template, {fromContext: 'John'});
}

The context is an object with properties and you can access those properties through let- bindings.

To learn more read Exploring Angular DOM manipulation techniques using ViewContainerRef and also see this answer.

Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488
  • what would be the context type, will it be a string? and what is vc stands for, is it viewContainerRef? – Lijin Durairaj Dec 22 '17 at 10:19
  • yes, i understood that, but my question is what is the "context" type which you have also mentioned in your code. is it a string which takes the value ie.
    this is a dynamic element
     – Lijin Durairaj Dec 22 '17 at 10:34
  • @LijinJohn, I just added an example of using context object properties inside the template – Max Koretskyi Dec 22 '17 at 10:38
  • @LijinDurairaj, is there any else unclear about my answer? – Max Koretskyi Dec 26 '17 at 16:38
  • 1
    @LijinDurairaj Please mark this as answer, if this answered your question. – James Poulose Nov 14 '18 at 05:57
  • 1
    Has anyone else noticed that this answer creates an ExpressionChangedAfterItHasBeenCheckedError error? – Skyler Jan 27 '19 at 21:07
  • @Skyler, this error is not specific to this approach, it can occur at various circumstances, you can read more about it [here](https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4) and [here](https://blog.angularindepth.com/a-gentle-introduction-into-change-detection-in-angular-33f9ffff6f10) – Max Koretskyi Feb 01 '19 at 17:48
  • For anyone stuck up with `ExpressionChangedAfterItHasBeenCheckedError` use `{static:true}` and pefrom changes in `ngAfterContentInit` cycle – sql_dummy Aug 19 '23 at 06:49
0

New easier way to make the same:

<ng-template #yourTemplateRef let-item="data">
    Data is: {{data}}
</ng-template>
<ng-container [ngTemplateOutlet]="yourTemplateRef" [ngTemplateOutletContext]="{data: 123}"></ng-container>
beegG
  • 1