Can an ng-content be used inside of an ngFor?

by

Yes, it will not give you proper result. But this can be achieved by ng-template and TemplateRef.

I have made a demo. You can see the demo that may help.

child.component.html

<li *ngFor="let rowDetail of dataSource">
  <ng-container
     *ngIf="headerTemplateRef"
     [ngTemplateOutlet]="headerTemplateRef"
     [ngTemplateOutletContext]="{$implicit:rowDetail}"
  >
  </ng-container>
</li>

child.component.ts

@ContentChild('header',{static: false}) headerTemplateRef: TemplateRef<any>;

parent.component.html

<child-app [data]="data"> 
    <ng-template let-rowDetail #header>
        <div style="padding-left:35px;">
            <div>{{rowDetail.name}}</div>
        </div>
    </ng-template>
</child-app>

More Related Contents:

  1. Global Events in Angular
  2. How to show a loading spinner while waiting on an observable getting data from a service in Angular
  3. Why use “?” operator in template binding?
  4. angular2 manually firing click event on particular element
  5. How can I watch for changes to localStorage in Angular2?
  6. How to load component dynamically using component name in angular2?
  7. Passing Data with Subjects and Proxies
  8. What’s the difference between –base-href and –deploy-url parameters of angular-cli tool
  9. How to iterate object keys using *ngFor?
  10. What are the practical differences between template-driven and reactive forms?
  11. Angular 2: getting RouteParams from parent component
  12. Get Value From Select Option in Angular 4
  13. How to undo Angular 2 Cli ng-eject?
  14. Angular2 How to navigate to certain section of the page identified with an id attribute
  15. CORS issue with Google Oauth2 for server side webapps
  16. How to smooth scroll to page anchor in angular 4 without plugins properly?
  17. How to make CORS-enabled HTTP requests in Angular 2?
  18. Angular – res.json() is not a function
  19. inject() must be called from an injection context
  20. Angular firebase email verification false after verify
  21. Property ‘of’ does not exist on type ‘typeof Observable [duplicate]
  22. Error: Unexpected value ‘undefined’ imported by the module
  23. How to enable production mode?
  24. Angular2 router (@angular/router), how to set default route?
  25. origin ‘http://localhost:4200’ has been blocked by CORS policy in Angular7
  26. How to correctly import operators from the `rxjs` package
  27. Syntax Error in Angular App: Unexpected token
  28. Angular 2 creating reactive forms with nested components
  29. Angular4 Load external html page in a div
  30. angular2: http post not executing

Leave a Comment