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

Popular posts from this blog

inversion of control - Autofac named registration constructor injection -

verilog - Systemverilog dynamic casting issues -

ios - Change Storyboard View using Seague -