*ngFor on elements of ng-content Angular

Question

I was wondering if is it possible to create a iteration of certain elements of . I need a different css class to every element of the ng-content so i need to make a loop of every element of ng-content. Is it possible?

Right now i pass a parameter to the child element to enumerate him, but i would like to do it without the number. This is my code:

<sys-tab [tabs]="['Principal', 'Complementar']">
  <sys-tab-content [num]="1">
    <sys-panel header="Dados Gerais">
      <sys-input-text header="Nome" tam="1"></sys-input-text>

      <sys-input-mask header="CNPJ"></sys-input-mask>
      <sys-input-mask header="CNES"></sys-input-mask>
      <sys-input-mask header="Telefone"></sys-input-mask>

      <sys-input-text header="Email"></sys-input-text>
    </sys-panel>
  </sys-tab-content>
  <sys-tab-content [num]="2">
    <sys-input-text header="Email"></sys-input-text>
  </sys-tab-content>
</sys-tab>

As you can see, to the child i passs the number so i can recognize who is him, but i want to create a loop to the ng-coontent so i can add a different class to every "sys-tab-content"

Are you passing an ***ngFor** loop as `ng-content` into a parent-component. Or are you manually adding the components inside, like in the example above? — Mihailo, Sep 18 '17 at 18:18
See https://stackoverflow.com/questions/36755844/angular2-child-component-as-data/36760027#36760027, https://stackoverflow.com/questions/35190188/can-an-ng-content-be-used-inside-of-an-ng-for/35192483#35192483 — Günter Zöchbauer, Sep 18 '17 at 18:20
The idea is avoid doing that, i can leave it as it is right now, passing the number, but the idea is to recognize the ngcontent — Hely Saul Oberto, Sep 18 '17 at 18:27
You could try using `elementRef.nativeElement.querySelectorAll('sys-tab-content')` in the parent-component which would return the array of HtmlElements with the corresponding tag name. — Mihailo, Sep 18 '17 at 18:31
You can add a nth-child css selector in your global css file to select the corresponding sys-tab-content element under sys-tab tag if that's what you are looking for... — saNiks, Sep 18 '17 at 18:58

score 3 · Answer 1 · answered Aug 02 '18 at 19:47

Simple List Example with dynamic ngTemplate

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent  {
  items = [ { name: 'abc' }, { name: 'cdf' }, { name: 'fgh' } ];
}

app.component.html

<nu-list [itemTpl]="itemTpl" [items]="items"></nu-list>
<ng-template let-item #itemTpl> 
    <h1>{{item.name}}</h1>
</ng-template>

list.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'nu-list',
  templateUrl: './list.component.html'
})
export class ListComponent  {

  @Input() itemTpl;
  @Input() items;

}

list.component.html

<ng-container *ngFor="let item of items">
  <ng-container *ngTemplateOutlet="itemTpl; context: {$implicit: item}"></ng-container>
</ng-container>

Example Link: https://stackblitz.com/edit/angular-list-ngtemplateoutlet

score 0 · Accepted Answer · answered Oct 31 '17 at 09:04

0

There's two ways of adding a "ngFor" or iterate trough the childs.

One is by transclusion: and the other one is by checking the ViewChildren of the parent component.

answered Oct 31 '17 at 09:04

Hely Saul Oberto

577
1
10
22

*ngFor on elements of ng-content Angular

2 Answers2