angular - Dynamically setting class name using ngClass -
i looping through list , displaying buttons.
within loop have job.hasjob. if set 1 add class button. name of class should job-block- plus value of job.hasjobdetails.statuscolour
for example, if job.hasjobdetails.statuscolour red class name job-block-red.
if hard code in class works:
<button ion-button color="dark" [ngclass]="{ 'job-block-red' : job.hasjob == 1}" (click)="changestatus(job.statuses)" outline>{{ job.jobname }}</button> but if try error:
<button ion-button color="dark" [ngclass]="{ 'job-block-' + job.hasjobdetails.statuscolour : job.hasjob == 1}" (click)="changestatus(job.statuses)" outline>{{ job.jobname }}</button> parser error: missing expected : @ column 16 in [{ 'job-block-' + job.hasjobdetails.statuscolour : job.hasjob == 1}] in bedjobspage@62:39 ("
i don't think can use object notation ngclass dynamic property names. try instead:
[ngclass]="job.hasjob == 1 ? 'job-block-' + job.hasjobdetails.statuscolour ? null" or build class object in typescript:
getjobclasses(job) { return { ['job-block-' + job.hasjobdetails.statuscolour] : job.hasjob == 1 } } [ngclass]='getjobclasses(job)'
Comments
Post a Comment