in my app i display list of appeals, with their status (which is displayed using mat icon). Here is piece of my template
<div class="approve-detail" fxLayout="column" fxLayoutGap="10px">
<p>Created: {{absDetail?.reqDate|date:'d. L. y HH:mm'}}</p>
<ng-container *ngIf="absDetail?.defList">
<mat-list >
<mat-list-item class="def-item" *ngFor="let def of absDetail.defList">
<mat-icon matListIcon *ngIf="def.idReject!=0" class="warn" matTooltip="Rejected">thumb_down</mat-icon >
<mat-icon matListIcon *ngIf="def.idApprove!=0&&def.idReject==0" class="success" matTooltip="Approved">thumb_up</mat-icon>
<mat-icon matListIcon *ngIf="def.idReject==0 && def.idApprove==0" matTooltip="Waiting">help</mat-icon>
<p matLine>{{def.name}}</p>
</mat-list-item>
</mat-list>
<mat-list *ngIf="abs | isDeleteAppealed:absDetail.defList">
<mat-list-item class="def-item" *ngFor="let def of absDetail.defList">
<mat-icon matListIcon *ngIf="def.idCancel<0" color="warn" matTooltip="Rejected">thumb_down</mat-icon >
<mat-icon matListIcon *ngIf="def.idCancel>0" class="success" matTooltip="Approved">thumb_up</mat-icon>
<mat-icon matListIcon *ngIf="def.idCancel==0" matTooltip="waiting">help</mat-icon>
<p matLine>{{def.name}}</p>
</mat-list-item>
</mat-list>
</ng-container>
</div>
It works, but its kinda dirty with all that ng-ifs, is there any more elegant way to do this? I was thinking about pipe, but i need to generate three dynamic properties for each element: class, tooltip and proper icon name, so it doesnt seems like a better solution. Any ideas? What about some kind of directive?
One option you could do is wrap them in a separate component. Use your let def as an @Input() parameter. When it gets set, you can automatically change the value of the class/tooltip/icon. Something like this:
abs-icon.component.ts
imports...
@Component({
selector: 'abs-icon',
templateUrl: './abs-icon.component.html',
styleUrls: ['./abs-icon.component.css']
})
export class AbsIconComponent implements OnInit {
public cls: string;
public tooltip: string;
public icont: string;
private _abs: any;
get abs(): any{
return this._abs;
}
@Input() set abs(value: any) {
this._abs = value;
if (_abs.idReject != 0) {
cls = "warn";
tooltip = "Rejected";
icont = "thumb_down"
}
else if (.......do the rest){
/* some code */
}
}
constructor() { }
ngOnInit(): void { }
}
abs-icon.component.html
<mat-icon matListIcon
class="{{cls}}"
[matTooltip]="tooltip">
{{icon}}
</mat-icon >
using it:
<abs-icon [abs]="def"> </abs-icon>