mardi 2 avril 2019

How to call component with same as string "component name" in html using angular 7

I'm trying to call components with the string keys in angular 7. Because my service gives me keys which component filters about to show on page per user. Can i make this filter especially in html?

<pg-tab *ngFor="let tab of tabs; let index = index">
  <ng-template #TabHeading>
    
  <a (click)="removeTab(index)" style="padding: 5px;"><i class="fa fa-times fa-lg" style="color:orangered;"></i></a>
  </ng-template>
  <div class="row column-seperation" *ngIf="tab.componentName === 'grid-sample'">
    <app-grid-sample></app-grid-sample>
  </div>

  <div class="row column-seperation" *ngIf="tab.componentName === 'pdf-export-sample'">
    <app-pdf-export-sample></app-pdf-export-sample>
  </div>
  <div class="row column-seperation" *ngIf="tab.componentName === 'notify-sample'">
    <app-notify-sample></app-notify-sample>
  </div>
  <div class="row column-seperation" *ngIf="tab.componentName === 'loader-sample'">
    <app-loader-sample></app-loader-sample>
  </div>
  <div class="row column-seperation" *ngIf="tab.componentName === 'tt-form-elements'">
    <app-tt-form-elements></app-tt-form-elements>
  </div>
  <div class="row column-seperation" *ngIf="tab.componentName === 'tt-layouts'">
    <app-tt-layouts></app-tt-layouts>
  </div>
</pg-tab>

I searched about innerHtml attribute but it's not working for angular components like in that example.

html

<div [innerHTML]="pageDetail"></div>

typescript

private _pageDetail: string = '<app-tab-page1 [tab]="tab" [tabsLength]="tabs.length" [tabs]="tabs"></app-tab-page1><button>Naber</button>';

public get pageDetail(): SafeHtml {
  return this._sanitizer.bypassSecurityTrustHtml(this._pageDetail);
}

You can guess it's not looking good right now. If it's possible, I want to turn shorter and clean that "*ngIf" attributes in html.

Do you have any ideas about it?

Something like this

<div class="row column-seperation" tab.componentName>
  <app-tab.componentName></app-tab.componentName>
</div>

Note: Sorry for my grammar mistakes.





Aucun commentaire:

Enregistrer un commentaire