Iterating through elements within the ng-content directive in Angular using *ngFor

Question

Iterating through elements within the ng-content directive in Angular using *ngFor

Is it possible to iterate through specific elements in ng-content and assign a different CSS class to each element? Currently, I am passing a parameter to enumerate child elements, but I would like to achieve this without using numbers. Here is an example of my current 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>

In the above code snippet, I pass a number as a parameter to identify child elements. However, I'm looking to create a loop for ng-content so that I can apply a unique class to each "sys-tab-content".

javascript angular typescript components angular2-ngcontent

Answer 1

Answer №1

A Basic Example of a Dynamic ngTemplate in a List

Main component TypeScript file:

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

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

Main component HTML file:

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

List component TypeScript file:

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

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

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

}

List component HTML file:

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

Check out this example here: https://stackblitz.com/edit/angular-list-ngtemplateoutlet

Answer 2

A Basic Example of a Dynamic ngTemplate in a List

Main component TypeScript file:

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

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

Main component HTML file:

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

List component TypeScript file:

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

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

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

}

List component HTML file:

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

Check out this example here: https://stackblitz.com/edit/angular-list-ngtemplateoutlet

Answer 3

Answer №2

When it comes to iterating through child components in Angular, there are two main approaches.

The first method involves using transclusion, while the second method entails checking the ViewChildren property of the parent component.

Answer 4

When it comes to iterating through child components in Angular, there are two main approaches.

The first method involves using transclusion, while the second method entails checking the ViewChildren property of the parent component.

Iterating through elements within the ng-content directive in Angular using *ngFor

Answer №1

Answer №2

Similar questions

Manage interfaces and structures

Text area containing an unspecified value within a webpage featuring interactive forms

Utilize string paths for images instead of requires when resolving img src and background-image URLs

Creating PDFs in iOS and Android using Ionic framework

The Exception: Angular Two ExpressionChangedAfterItHasBeenCheckedError

Angular - Navigate to Login Page post registration and display a confirmation message

Issue with Jquery modal not functioning properly on second attempt

Mastering the art of customizing classes and styles in material-ui (React)

Having trouble simulating a custom Axios Class in JavaScript/TypeScript

Issues encountered when attempting to use Angular2 with SystemJs and typescript transpiler

The utilization of .forRoot() in the feature modules hierarchy

Updating Text in Textarea upon Selection Change

How can the creation of directories for services be avoided in angular-cli?

Tips for integrating PHP into a Bootstrap modal dialog

A guide on how to efficiently update and submit a reactive form with a single click of the submit button in Angular

Angular's conditional statement for handling three different cases

Utilizing Angular Material to emphasize a row in a table upon clicking

Ways to remove specific characters from the escape() function in express-validators

The image file that was uploaded from a React Native iOS application to Azure Blob Storage appears to be corrupted or incomplete as it is not

Guide: Building Angular/Bootstrap button checkboxes within a loop