How to wrap each child of contentchildren in their own elements in Angular

Question

lets say I want to make a component that arranges all of its children. I should be able to provide the element for example:

<app-layout-list>
  <p>foo</p>
  <p>bar</p>
  <p>etc</p>
</app-layout-list>

and inside the app-layout-list should do something like

<ul>
  <li>
    <ng-content>
  </li>
<ul>

where it generates an li for each content. Is this possible using ng-content or do I need to do something more complicated?

Answer 1

Of course you can! :)

And it is very simple! (Directly to the Stackplitz Demo)

Angular provides a perfect API for this kind of problems.

Basically what you want is to splitt your <ng-content></ng-content> in their different parts.

First of all you have to mark the portions you want to display inside the <li> elements via a directive. The best way to achive this is via a Structural Directive, because it generates a <ng-template></ng-template> for us, which we need later.

The Directive we build is very basic. It only injects the TemplateRef in the constructor and saves the template in a `public variable:

list-item.directive.ts

import { Directive, TemplateRef } from '@angular/core';

@Directive({
  selector: '[appListItem]'
})
export class ListItemDirective {

  public itemTemplate: TemplateRef<any>;

  constructor(private templateRef: TemplateRef<any>) {
    this.itemTemplate = this.templateRef;
  }

}

With this directive we mark our html elements which we like to place inside a <li> element.

app.component.ts

<app-layout-list>
  <p *appListItem>foo</p>
  <p *appListItem>bar</p>
  <p *appListItem>etc</p>
</app-layout-list>

Inside LayoutListComponent we get hold of the projected elements via @ContentChildren(ListItemDirective) listItems

layout-list.component.ts

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

@Component({
  selector: 'app-layout-list',
  templateUrl: './layout-list.component.html',
  styleUrls: ['./layout-list.component.css']
})
export class LayoutListComponent {
  @ContentChildren(ListItemDirective) listItems: QueryList<ListItemDirective>;
}

Finally inside the Component template we are iterating through the listItems and placing the TemplateReference of every item inside a ngTemplateOutlet

layout-list.component.html

<ul>
  <ng-container *ngFor="let item of listItems">
    <li>
      <ng-container [ngTemplateOutlet]="item.itemTemplate"></ng-container>
    </li>
  </ng-container>
</ul>

DEMO: Stackblitz Demo

GITHUB SOURCE: Github Source