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"}
],
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'))"
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 ''
}