Use ngIf to conditionally add attribute to button

Question

I have a dialog Box which has some buttons an i can set the primary="true" to make it the default answer for the user. In my case the value for primarryButton is button1 and button2 and i want the have it set if it is primary="true" the other button will have nothing.

<div>
        <button class="button" kendoButton (click)="onCancelAction()" >{{Button2}}</button>
        <button class="button" kendoButton (click)="onConfirmAction()" >{{Button1}}</button>
</div>

so the ngif should say in the line for Button1

*ngIf="primaryButton==='button1'" then primary="true"

but not sure how to accomplish that

You could try setting the attribute with the value being the check itself, e.g. `` This will give you true or false for that attribute. — Eraph, Oct 01 '19 at 00:06
i was thinking of that but the code does not like it when you have a primary="false" so it expects primary="true" or nothing which doesnt work in this case — NoSoup4you, Oct 01 '19 at 00:08
According to https://stackoverflow.com/questions/36745734/how-to-add-conditional-attribute-in-angular-2, you can hide an attribute by setting its value to null, so to expand on the previous slice of code: `` Note that `attr.primary` must be wrapped in square brackets. — Eraph, Oct 01 '19 at 00:22

score 2 · Accepted Answer · edited Oct 01 '19 at 05:23

2

Bearly understand what u want to achieve try this:

  <kendo-dialog-actions>
      <div>
        <ng-container *ngIf="primaryButton == 'Button1'; then but1; else but2"></ng-container>
          <ng-template #but1>
              <button class="button" kendoButton (click)="onCancelAction()">{{Button2}}</button>
              <button class="button" kendoButton (click)="onConfirmAction()" primary="true" >{{Button1}}</button>
          </ng-template>
          <ng-template #but2>
              <button class="button" kendoButton (click)="onCancelAction()" primary="true">{{Button2}}</button>
              <button class="button" kendoButton (click)="onConfirmAction()" >{{Button1}}</button>
          </ng-template>
      </div>
    </kendo-dialog-actions>

edited Oct 01 '19 at 05:23

NoSoup4you

640
1
10
34

answered Oct 01 '19 at 00:08

Mises

4,251
2
19
32

What i am trying to achieve is simple, i want only the button which is set in the primaryButton value to have the additional attribute primary="true" the one which is not set should have no attribute of primary at all – NoSoup4you Oct 01 '19 at 00:13
@NoSoup4you Like this ? Edited. – Mises Oct 01 '19 at 00:19
I modified your code to work the way i need it which it does, all other did not produce the required output – NoSoup4you Oct 01 '19 at 03:55
I'm glad i could help You. – Mises Oct 01 '19 at 05:19

score 0 · Answer 2 · answered Oct 01 '19 at 03:37

0

Instead of adding ngIf on custom primaryButton attribute on your element why don't you play with class itself.

If still you need attribute only then let me know.. I will update you as per your requirement then.

answered Oct 01 '19 at 03:37

vijay sahu

765
1
7
29

nash11 · Answer 3 · 2019-10-01T08:02:39.697

You don't need to use ngIf at all here as already mentioned in the comments. In Angular, if you pass null to an attribute binding, it does not get rendered. So we can just add a ternary expression to the primary attribute using attribute binding and conditionally pass true or null.

<kendo-dialog-actions>
    <div>
        <button class="button" [attr.primary]="primaryButton === 'Button1' ? true : null" kendoButton (click)="onConfirmAction()">{{Button1}}</button>
        <button class="button" [attr.primary]="primaryButton === 'Button2' ? true : null" kendoButton (click)="onCancelAction()">{{Button2}}</button>
    </div>
</kendo-dialog-actions>

Use ngIf to conditionally add attribute to button

3 Answers3