Угловые 2 динамические вкладки погрузчика

Question

I want to create a dynamic tabs loader using angular 2 material this is the syntax which I want to support

<generic-tabs [tabs]="tabs" tabVisibleField="name"> 
      <test-cmp [tabContent] testData="hello"></test-cmp> 
      <test-cmp [tabContent] testData="hello from cmp one"></test-cmp> 
      <test-cmp [tabContent] testData="hello from cmp 2"></test-cmp></generic-tabs> 

And inside the component I want to render tabs using material design and bind to each tab a component which contains tabContent This is the template for generic tabs

<md-tab-group *ngIf="componentsReferences && componentsReferences.length > 0"> 
    <md-tab *ngFor="let componentRef of componentsReferences; let i=index" (click)="onTabClick($event, i)"> 
     <template md-tab-label>{{getDisplayField(i)}}</template> 

     <template md-tab-content> 
      //inject the component for this tab 
     </template> 
    </md-tab> 
</md-tab-group> 

What I don't know is how to select all the component which are are inside the generic-tabs tag and make angular to create them

Answer 1

I found the solution using multiple content transclusion

<md-tab-group *ngIf="tabsContentComponents" [selectedIndex]="selectedIndex" (selectChange)="onTabClick($event)"> 
    <md-tab *ngFor="let componentRef of tabsContentComponents; let i=index"> 
     <template md-tab-label> 
      <tab-header [tabHeader]="tabHeaders[i]"> </tab-header> 
     </template>   
     <template md-tab-content *ngIf="componentRef"> 
      <template [ngTemplateOutlet]="componentRef"></template> 
     </template> 
    </md-tab> 
</md-tab-group> 

@Component({ 
    moduleId: module.id, 
    selector: 'generic-tabs', 
    templateUrl: 'generic-tabs.html', 
    encapsulation: ViewEncapsulation.None, 
    styleUrls: [ 
     './generic-tabs.css' 
    ] 
}) 
export class GenericTabsComponent implements AfterViewInit { 
    @Input() tabHeaders: Array<TabHeaderModel>; 
    @Input() selectedIndex: number = 0; 
    @Input() 
    set tabErrors(errors: Array<ITabError>) { 
     for (let e of errors) { 
      this.setTabError(e); 
     } 
    } 

    @Input() 
    set resetErrorIndex(tabIndex: number) { 
     if (tabIndex < 0 || tabIndex >= this.tabErrors.length) { 
      return; 
     } 

     this.setTabError({ tabIndex, errorColor: "", errorIcon: "", errorsCount: 0 }); 
    } 

    @ContentChildren(TemplateRef) tabsContentTemplateRef: QueryList<TemplateRef<any>>; 
    @Output() onTabChange: EventEmitter<ITabChangeEvent> = new EventEmitter<ITabChangeEvent>(); 

    private tabsContentComponents: Array<any> = []; 

    ngAfterViewInit() { 
     this.mapTabs(); 
     this.tabsContentTemplateRef.changes.subscribe(this.remapTabs.bind(this)); 
    } 

    remapTabs() { 
     this.tabsContentComponents = []; 
     this.mapTabs(); 
    } 

    mapTabs() { 
     this.tabsContentTemplateRef.map(t => { 
      this.tabsContentComponents.push(t); 
     }); 
    } 

    onTabClick($event) { 
     this.selectedIndex = $event.index; 
     this.onTabChange.emit({ $event, selectedTab: this.tabHeaders[this.selectedIndex], selectedTabIndex: this.selectedIndex}); 
    } 

    private setTabError(e: ITabError) { 
     this.tabHeaders[e.tabIndex].errorsCount = e.errorsCount; 
     this.tabHeaders[e.tabIndex].errorsIcon = e.errorIcon; 
     this.tabHeaders[e.tabIndex].errorsIconColor = e.errorIcon; 
    } 
} 

Using this component I can use the tabs to render specific component's in their content.

<generic-tabs *ngIf="selectedItem && formRef && formRef.editMode" [tabHeaders]="tabHeaders" (onTabChange)="log($event)"> 
       <template> 
        <data-grid> 
        </data-grid> 
       </template> 
       <template> 
        Pay Types 
       </template> 
       <template> 
        <shift-calendar></shift-calendar> 
       </template> 
       <template> 
        <holiday-calendar></holiday-calendar> 
       </template> 
      </generic-tabs>