I have a user table list with mat-checkbox
. When mat-checkbox
is clicked, the checkbox should be checked only if a certain condition is true.
Here in this code, I am trying to have checkbox checked only for id=2
. But as you can see, initially when checkbox of 2
is clicked, it doesn't get checked even though 2
is added to array of elements which should be checked.
On the other hand, when checkbox of 1,3 or 4
is clicked, they get checked.
component.html
<tbody>
<tr *ngFor="let user of users; let in = index">
<td>
<mat-checkbox [ngModel]="canbeChecked(user.id)" (click)="userSelectClick(user.id)"></mat-checkbox>
</td>
</tr>
</tbody>
component.ts
export class AppComponent {
users = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
checked: boolean = true
constructor() { }
selected: any = [];
canbeChecked(id): boolean {
console.log("check " + id)
console.log(this.selected)
return this.selected.includes(id);
}
userSelectClick(id) {
if (!this.selected.includes(id)) {
if (id == 2)
this.selected.push(id);
console.log("select " + id)
console.log(this.selected)
}
else {
this.selected = this.selected.filter(item => item !== id)
}
}
}
Working code: https://stackblitz.com/edit/mat-checkbox-conditional
I have used event binding on ngModel
in the html and also modified some code in app.component.ts. Now only the checkbox with id 2 can be checked. Please see the code below
in app.component.html
<mat-checkbox (ngModel)="canbeChecked(user.id)" (click)="userSelectClick(user.id)"></mat-checkbox>
and in app.component.ts
export class AppComponent {
users = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
checked: boolean = true
constructor() { }
selected: any = [];
canbeChecked(id): boolean {
console.log(this.selected.includes(id));
return this.selected.includes(id);
}
userSelectClick(id) {
if (!this.selected.includes(id)) {
if (id == 2){
this.selected.push(id);
}
else{
return false;
}
}
else {
if(id == 2){
this.selected = [];
}
else
return false;
}
}
}
Here is a working link
I'm novice over stackoverflow.You can try change event for that stuff.
component.ts
import { Component } from '@angular/core';
@Component({
selector: 'material-app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
user_checked = false;
users = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
checked: boolean = false;
constructor() { }
selected: any = [];
canbeChecked(id): boolean {
console.log("check " + id)
console.log(this.selected)
return this.selected.includes(id);
}
userSelectClick(event,id) {
if (!this.selected.includes(id)) {
if (id == 2)
this.selected.push(id);
console.log("selecrted iDs " + id)
console.log(this.selected)
}
else {
this.selected = this.selected.filter(item => item !== id)
}
}
}
/**
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
component.html
Checkboxes
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.