Iterate through ng-content in template

Question

I'm using Angular 8.1.3 . This initial explanation is probably poor, but I hope the example will make it clear: I'm trying to eliminate repetition in my code, by creating a new angular component. I want this component to place different types of content that is passed into it in different places, based on the type of content. I know I can do this with together with the select attribute. But, this following requirement is the cause of the question: I also want to wrap each content selector match with specific html.

For example, I want to turn this:

into this:

Notice that there are two rows. The the first row has two data cells in it, each containing an input, and the second three data cells, each with a button in it. But on different occurrences of this structure, I need a different number of inputs and different number of buttons. Note that the components that are seen by app-visualization-control's parents should be the same instances that are seen by app-visualization-control itself, because of data binding. That is, I should not be instancing new components, e.g. with something like *ngComponentOutlet (to my understanding this directive cannot be used with passed-in component instances, it instances and destroys it's "own" components).

Below is my best attempt, but it didn't work: the content was not rendered, though no compilation or runtime errors were thrown upon visiting the page. Further, the correct number of were rendered, but they were empty.

@Component({
  selector: 'app-visualization-control',
  template: `
    
      
        
          
        
      
      
        
           
        
      
    
  `,
  styleUrls: ['./visualization-control.component.scss']
})
export class VisualizationControlComponent {
  @ContentChildren(InputComponent, { read: TemplateRef }) inputTemplates!: QueryList>;
  @ContentChildren(ButtonComponent, { read: TemplateRef }) buttonTemplates!: QueryList>;
}

PS: the example has been greatly simplified. In fact, I'm not even using

, I'm using ionic framework's grid system, but these details don't matter.

user_6851836 · Answer

You need wrap the ButtonComponent/InputComponent content in ng-template then render the ng-template in VisualizationControlComponent. Because the ngTemplateOutlet cannot render component.

https://stackblitz.com/edit/angular-sjv3p4

ButtonComponent


import { Component, Input, Output, EventEmitter, ViewChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-button',
  template: `
  
   
  
  `,
})
export class ButtonComponent  {
    @Input() color: string | null = null;
    @Output() click = new EventEmitter()
    @ViewChild(TemplateRef, { static: true }) templateRef: TemplateRef;
}

VisualizationControlComponent

import { Component, Input, ContentChildren, QueryList } from '@angular/core';
import { ButtonComponent } from './button.component';

@Component({
  selector: 'app-visualization-control',
  template: `
  
    
      
        
      
    

  `,
})
export class VisualizationControlComponent  {
    @ContentChildren(ButtonComponent, { descendants: true }) buttonComponents: QueryList;

}

Use


  
    Button1
  
  
    Button2
  
  
    Button3

Iterate through ng-content in template

1 Answers