2

I haven't found any code snippet as of yet and the doc is too succinct. So my question is how to pass param to an ng-template and how to get the index back ? Intuitively the following should work, but it just throws "undefined". Any help is appreciated.

@ViewChild("vc", { read: ViewContainerRef }) vc: ViewContainerRef;
  @ViewChild("tpl") tpl: TemplateRef<any>;

  ngAfterViewInit() {
    this.vc.createEmbeddedView(this.tpl,
      new Book("The Complete Guide to Angular 4", 55));
    this.vc.createEmbeddedView(this.tpl,
      new Book("Building Web Components with TypeScript and Angular 4", 48));
  }
  deleteBook(index) {
    console.log("deleteBook index ", index);
  }

<div class="container">
    <div class="card-deck">
        <ng-container #vc></ng-container>
    </div>
    <ng-template #tpl let-book="book" let-index="index">
        <div class="card">
            <img class="card-img-top" src="..." alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Title: {{book.title}}</h4>
                <p class="card-text">Price: {{book.price}}</p>
                <button type="button" class="btn btn-primary" (click)="deleteBook(index)">Delete</button>

            </div>
        </div>
    </ng-template>
</div>
Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488
Bela
  • 21
  • 1
  • 2

1 Answers1

7

You need to pass an object with the keys that match the let-keyname syntax:

<ng-template #tpl let-book="book" let-index="index">
   ...

this.vc.createEmbeddedView(this.tpl, { 
    book: new Book("The Complete Guide to Angular 4", 55), 
    index: someIndex 
});
Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488
  • Thanks Maximus, I really didn't expected a reply that soon. – Bela Aug 03 '17 at 09:31
  • I have had this change detection issue and added this.changeDetectorRef.detectChanges(); to ngAfterViewInit() to force a new one. It seems OK now. ng:///AppModule/HomeComponent.ngfactory.js:14 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'The Complete Guide to Angular 4'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ? – Bela Aug 03 '17 at 09:34
  • you're welcome, so did it work? regarding the error you mentioned should read [Everything you need to know about the `ExpressionChangedAfterItHasBeenCheckedError` error](https://hackernoon.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4). Also you may ask another question – Max Koretskyi Aug 03 '17 at 09:38
  • @AngularInDepth.com : I am confused between when to use createEmbeddedView and createComponent. Can you plz come up with some example or what advantages one has over other? – Blaze Sep 21 '17 at 08:00
  • @Blaze, can you create a separate question and post a link here? I'll explain it there – Max Koretskyi Sep 21 '17 at 08:04
  • @AngularInDepth.com thanks for reply. Plz find it [here](https://stackoverflow.com/questions/46338790/createembeddedview-versus-createcomponent-in-angular-4) – Blaze Sep 21 '17 at 08:16
  • Thanks @AngularInDepth.com. your answer helped me. However, I am stuck again. Could you please take a look at https://stackoverflow.com/questions/51760500/unable-to-set-index-of-a-view-in-viewcontainer – Manu Chadha Aug 09 '18 at 07:38