Angular pass multiple templates to Component

Question

I\'m trying to create a component that accepts multiple templates as inputs. This is the example I have:

@Component({
    selector: \'data-list\',
    styles         


        

Answer 1

I solved this same issue by using the string selector available to the ContentChild decorator.

You will need to specify template variables when using your data-list component:

    
        
{{ item.header }}
        
{{ item.content }}
    
    
        
{{ item.header }}
        
{{ item.content }}
    

Then, inside your data-list component class, assign the template variables to local variables on the component:

@Input() itemsData: any[];
@ContentChild('firstItemTemplate') firstItemTemplate: TemplateRef;
@ContentChild('standardTemplate') standardTemplate: TemplateRef;

After this, you'll be able to render the passed-in templates from your data-list component.

@Component({
    selector: 'data-list',
    styles: [
        require('./data-list.component.scss')
    ],
    template: `
        
            
            
        
    `
})