CODEWITHSUNDEEP
angular
None
None

Reputation: 9247

Conditional is not working as expected?

I have this two components:

<app-z-grid [master]="true" title="Tip korisnika" *ngIf="showTab('Tip/podtip korisnika') || showTab('Tip korisnika')" [restPath]="'customertype'" (fillDetailParent)="reinit($event)"></app-z-grid>
     <app-z-grid title="Podtip korisnika" *ngIf="showTab('Tip/podtip korisnika') || showTab('Podtip korisnika')" [path]='"customerclassification/customerstype.json"' [restPath]="'customerstype'" [isDetail]="'customerstype'" [parentName]="'customertypeCode'" ></app-z-grid>

First one have master and second one not.

What i want is to set condtional to disabled buttons if its not master and if action.name !=='create':

[disabled]="(!master) && (action.name !== 'create')"

But problem is that is not working i get for first component all buttons enabled, and for second first is enabled. Any suggestion?

 <button *ngFor="let action of grid.actions" [disabled]="action.name !== 'create'" name="{{action.name}}"
                  type="submit" class="btn btn-block-container mousePointer" (click)="this[action.callback]('New', grid.actions)" title="{{action.label}}">
                  <i *ngIf="action.icon" style="color: white !important" class="{{action.icon}}"></i>
              </button>

json:

  "actions":[
          {"name":"create","label":"New", "icon":"fa fa-file buttonicon","disabled":false, "callback":"create"},
          {"name":"update","label":"Edit", "icon":"fa fa-pencil-square-o buttonicon", "disabled":true, "callback":"edit"},
          {"name":"deletemodal","label":"Delete", "icon":"fa fa-trash buttonicon", "disabled":true, "callback":"deletemodal"}
        ],

Upvotes: 0

Views: 52

Answers (2)

Aravind
Aravind

Reputation: 41533

Documentation of bootstrap says if you want to disable a button you should use it as disabled="disabled" where as you are setting it as true or false..

Use a function to achieve this as 

<button *ngFor="let action of data.actions" [disabled]="isDisabled(action)" name="{{action.name}}"
                  type="submit" class="btn btn-block-container mousePointer" (click)="this[action.callback]('New', grid.actions)" title="{{action.label}}">
      <i *ngIf="action.icon" style="color: white !important" class="{{action.icon}}"></i>
       </button>

Code 

isDisabled(action):boolean{
    if(action.name !== 'create'){
      return 'disabled'
  }
  else return ''
}

LIVE DEMO

Upvotes: 0

Powkachu
Powkachu

Reputation: 2268

I don't know if I correctly get it but, for you second component:

[disabled]="(!master) && (action.name !== 'create')"

We know that master=false then !master=true. When we are on the button "create", action.name =='create' is true then action.name !== 'create' is false.

We have true && false = false so it's normal that your button is not disabled.

I don't know if it's what you want but if you only want to display the button create on master, you can put:

[disabled]="(!master) || ((!master) && (action.name !== 'create'))"

Upvotes: 1

Related Questions