How to do conditional rendering in angular

Question

Hello everyone I'm trying to display different color based on variable value... My code looks like this :

 <nb-card accent = "a.zahtjevStatusNaziv == 'Kreiran' ? 'info' : 'success'" >
                  <nb-card-body>
                    <label class="label">Kreator napomene:</label><br>
                    <p>{{a.imeKreatora}}</p>      
                    <label class="label">Napomena:</label><br>
                    <p>{{!a.napomena ? "Prilikom ove akcije nije dodana napomena" : a.napomena}}</p>
                    <label class="label">Datum kreiranja napomene:</label><br>
                    <p>{{a.datumKreiranja | date:'dd. MM. YYYY. HH:mm'}}</p>
                    <label class="label">Poslovni proces:</label><br>
                    <p>{{a.poslovniProcesDokumenta.opis}}</p>
                    <label class="label">Status dokumenta:</label><br>
                    <p>{{a.zahtjevStatusNaziv}}</p>
                  </nb-card-body>
              </nb-card>

I tried ngIf but when using ngIf I need to copy this whole block of code, so I would like only accent value (inside nb-card) to be changed:

<nb-card accent = "a.zahtjevStatusNaziv == 'Kreiran' ? 'info' : 'success'" >

Appreciate if someone can advise. Thank you in advance!

You should use [accent] instead (see the extra brackets). So the whole thing should look like this: [accent]="a.zahtjevStatusNaziv == 'Kreiran' ? 'info' : 'success'" — OctavianM
– OctavianM, Commented Oct 20, 2022 at 6:38

Girish Ingle · Accepted Answer · 2022-10-20 06:48:41Z

2

It should look something like

<nb-card [accent] = "a.zahtjevStatusNaziv == 'Kreiran' ? 'info' : 'success'" >

answered Oct 20, 2022 at 6:48

Girish Ingle

1301 gold badge2 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to do conditional rendering in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related