Dynamic template reference variable inside ngFor (Angular 9)

by

Template reference variables are scoped to the template they are defined in. A structural directive creates a nested template and, therefore, introduces a separate scope.

So you can just use one variable for your template reference

<div *ngFor="let member of members">
  <ng-template #popupContent>Hello, <b>{{member.name}}</b>!</ng-template>
  <button type="button" class="btn btn-secondary" [ngbPopover]="popupContent" popoverTitle="Fancy content">
      I've got markup and bindings in my popover!
  </button>
</div>

and it should work because it has already declared inside <ng-template ngFor

Plunker Example

For more details see also:

More Related Contents:

  1. Dynamic tabs with user-click chosen components
  2. What is the equivalent of ngShow and ngHide in Angular 2+?
  3. How can I use “*ngIf else”?
  4. Cannot find a differ supporting object ‘[object Object]’ of type ‘object’. NgFor only supports binding to Iterables such as Arrays
  5. What is the difference between “ng-bootstrap” and “ngx-bootstrap”?
  6. Best method to set different layout for different pages in angular 4
  7. Get reference to a directive used in a component
  8. i got this error when i use command ng new myprojectname to create new project in angular
  9. How do I pass data to Angular routed components?
  10. Angular 2 http.post() is not sending the request
  11. How can I get new selection in “select” in Angular 2?
  12. What’s the difference between markForCheck() and detectChanges()
  13. What’s the difference between @ViewChild and @ContentChild?
  14. How to dynamically add and remove form fields in Angular 2
  15. Angular Material: mat-select not selecting default
  16. How to create an RXjs RetryWhen with delay and limit on tries
  17. What is the difference between *ngIf and [hidden]?
  18. Angularfire 2 Error: The specified authentication provider is not enabled for this Firebase
  19. Generic email validator
  20. formGroup expects a FormGroup instance
  21. ng-content select bound variable
  22. Angular2 @Input to a property with get/set
  23. Angular Material 2 DataTable Sorting with nested objects
  24. Angular 6.0 firebase hosting deploy not working
  25. Angular2: validation for won’t trigger when changing the file to upload
  26. Disable Input fields in reactive form
  27. How do I override the style of primeng components?
  28. How to throw error from RxJS map operator (angular)
  29. Angular2 ngModel inside ngFor (Data not binding on input)
  30. Need BrowserAnimationsModule in Angular but gives error in Universal

Leave a Comment