Issue
I have used angular material in my application.Trying to disable the particular mat checkbox.I have tried but not working properly. It is disbaling all the checkbox.But i want to disable only Car and Motor checkboxes. How to do it? If anyone konws please help to find the solution.
mautocomponent.html:
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option
*ngFor="let data of filteredData | async"
[value]="data"
[disabled]="isDisable(data)"
>
<div (click)="optionClicked($event, data)">
<mat-checkbox
[checked]="data.selected"
(change)="toggleSelection(data)"
(click)="$event.stopPropagation()"
[disabled]="isDisable(data)"
>
{{ data.item }}
</mat-checkbox>
</div>
</mat-option>
</mat-autocomplete>
mautocomponent.ts:
isDisable(obj:any){
//Only disable Car and Motor
var index = this.rawData.indexOf(obj);
console.log(index)
if (index == -1) {
return false;
}
else {
return true;
}
}
Demo: https://stackblitz.com/edit/angular-ivy-6bvdt7?file=src%2Fapp%2Fshared%2Fmauto%2Fmauto.component.ts
Solution
You are so close. Why don't you just use the obj
that you are passing to your isDisable()
function.
isDisable(obj: any){
console.log(obj)
if (obj.item === 'Car' || obj.item === 'Motor') {
return true;
}
else {
return false;
}
}
OP asked about passing disable list from parent component (app.component.ts). One of the ways to do it would be, passing the list of disable items from parent to chiild.
app.component.ts:
optionsToHide = ['Car', 'Motor'];
app.component.html:
<app-mauto
...
[optionsToHide]="optionsToHide"
...
>
mauto.component.ts:
isDisable(obj: any){
if (this.optionsToHide.findIndex(item => item === obj.item) > -1)
{
return true;
}
else {
return false;
}
}
Answered By - Nehal
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.