Binding events when using a ngForTemplate in Angular 2

by

Been looking for an answer to this for a week now and I finally came up with a pretty decent solution. Instead of using ngForTemplate I would suggest using ngTemplateOutlet.

It is already described pretty well here:
angular2 feeding data back to `<template>` from `[ngTemplateOutlet]`

The custom template for the list items is placed between the component tags:

<my-list>
  <template let-item="item">
    Template for: <b>{{item.text}}</b> ({{item.id}})
  </template>
</my-list>

And the component template:

<ul>
  <li *ngFor="let item of listItems" (click)="pressed(item)">
    <template 
      [ngTemplateOutlet]="template" 
      [ngOutletContext]="{
        item: item
      }">
    </template>
  </li>
</ul>

I made an example here: https://plnkr.co/edit/4cf5BlVoqzZdUQASVQaC?p=preview

More Related Contents:

  1. What is the proper use of an EventEmitter?
  2. How do I share data between components in Angular 2?
  3. Could not find module “@angular-devkit/build-angular”
  4. Angular how to get the multiple checkbox values?
  5. How to add font-awesome to Angular 2 + CLI project
  6. No ‘Access-Control-Allow-Origin’ header in Angular 2 app
  7. How to watch for form changes in Angular
  8. *ngIf and local template variables
  9. ng: command not found while creating new project using angular-cli
  10. What is the difference between production and development mode in Angular2?
  11. Set default option in mat-select
  12. Queries scale with the size of your result set, not the size of your data set
  13. Resetting a form in Angular 2 after submit
  14. Angular 2 – Does ngOnDestroy get called on refresh or just when navigate away from component?
  15. Angular2: how bind to select multiple
  16. Angular subscribe elegant
  17. Angularjs2 – preload server configuration before the application starts [duplicate]
  18. How to allow access outside localhost
  19. How to get param from url in angular 4?
  20. How to check if Angular application running in Production or Development mode
  21. No provider for Router?
  22. How to detect scroll to bottom of html element
  23. ngModel cannot be used to register form controls with a parent formGroup directive
  24. How to use MatPaginatorIntl?
  25. Open/Close sidenav from another component
  26. Angular – How to fix ‘property does not exist on type’ error?
  27. Clear browser cache in Angular
  28. Angular 5 to 6 Upgrade: Property ‘map’ does not exist on type Observable
  29. Passing server parameters to ngModule after RC5 upgrade
  30. Cannot find the ‘@angular/common/http’ module

Leave a Comment