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