Mixing
Select All checkbox Angular material 5 | Gmail style if selecting individual it will also select
2
I need to create a select all functionality in angular material, I am sharing code below which is partially working.
<section *ngFor="let ing of pizzaIng; let i = index" class="example-section">
<mat-checkbox (change)="selectChildren()"
[(ngModel)]="ing.checked">
{{ing.name}}
</mat-checkbox>
</section>
<mat-checkbox (change)="updateCheck()"
class="example-margin"
[(ngModel)]="selectAll">
Select All
</mat-checkbox>
.ts file
export class CheckboxConfigurableExample {
pizzaIng: any;
selectAll = false;
constructor() {
this.pizzaIng = [{
name: "Pepperoni",
checked: false
},
{
name: "Sasuage",
checked: true
},
{
name: "Mushrooms",
checked: false
}
];
}
selectChildren() {
for (var i = 0; i < this.pizzaIng.length; i++) {
if (this.pizzaIng[i].checked === true) {
return this.selectAll = true;
} else {
return this.selectAll = false;
}
}
}
updateCheck() {
console.log(this.selectAll);
if (this.selectAll === true) {
this.pizzaIng.map((pizza) => {
pizza.checked = true;
});
} else {
this.pizzaIng.map((pizza) => {
pizza.checked = false;
});
}
}
}
select all/deselect is working but the individual selection is not working properly, if selected the first one it is selecting the select all but it should work when selected all individual, Please help.
javascript
angular angular-material edited Jan 2 at 4:31
Bhoomi patel
506219
asked Jan 2 at 4:23
Vivek KumarVivek Kumar
70129
add a comment |
2
I need to create a select all functionality in angular material, I am sharing code below which is partially working.
<section *ngFor="let ing of pizzaIng; let i = index" class="example-section">
<mat-checkbox (change)="selectChildren()"
[(ngModel)]="ing.checked">
{{ing.name}}
</mat-checkbox>
</section>
<mat-checkbox (change)="updateCheck()"
class="example-margin"
[(ngModel)]="selectAll">
Select All
</mat-checkbox>
.ts file
export class CheckboxConfigurableExample {
pizzaIng: any;
selectAll = false;
constructor() {
this.pizzaIng = [{
name: "Pepperoni",
checked: false
},
{
name: "Sasuage",
checked: true
},
{
name: "Mushrooms",
checked: false
}
];
}
selectChildren() {
for (var i = 0; i < this.pizzaIng.length; i++) {
if (this.pizzaIng[i].checked === true) {
return this.selectAll = true;
} else {
return this.selectAll = false;
}
}
}
updateCheck() {
console.log(this.selectAll);
if (this.selectAll === true) {
this.pizzaIng.map((pizza) => {
pizza.checked = true;
});
} else {
this.pizzaIng.map((pizza) => {
pizza.checked = false;
});
}
}
}
select all/deselect is working but the individual selection is not working properly, if selected the first one it is selecting the select all but it should work when selected all individual, Please help.
javascript
angular angular-material edited Jan 2 at 4:31
Bhoomi patel
506219
asked Jan 2 at 4:23
Vivek KumarVivek Kumar
70129
updateCheckis this for individual checkboxes when checked/unchecked manually it's not turning parent checkbox(selectAll/UnSelectedAll) is that right ?
– super cool
Jan 2 at 4:27
update check is for all the checkbox select/deselect and selectChildren will check the each individual selection and update the select all when all are selected
– Vivek Kumar
Jan 2 at 4:28
your approach is odd you should have*ngForon children only. you can fix the above mentioned issue by using $.grep and check if there is any unchecked based on that turn selectAll flag (true/false).
– super cool
Jan 2 at 4:33
add a comment |
2
2
2
I need to create a select all functionality in angular material, I am sharing code below which is partially working.
<section *ngFor="let ing of pizzaIng; let i = index" class="example-section">
<mat-checkbox (change)="selectChildren()"
[(ngModel)]="ing.checked">
{{ing.name}}
</mat-checkbox>
</section>
<mat-checkbox (change)="updateCheck()"
class="example-margin"
[(ngModel)]="selectAll">
Select All
</mat-checkbox>
.ts file
export class CheckboxConfigurableExample {
pizzaIng: any;
selectAll = false;
constructor() {
this.pizzaIng = [{
name: "Pepperoni",
checked: false
},
{
name: "Sasuage",
checked: true
},
{
name: "Mushrooms",
checked: false
}
];
}
selectChildren() {
for (var i = 0; i < this.pizzaIng.length; i++) {
if (this.pizzaIng[i].checked === true) {
return this.selectAll = true;
} else {
return this.selectAll = false;
}
}
}
updateCheck() {
console.log(this.selectAll);
if (this.selectAll === true) {
this.pizzaIng.map((pizza) => {
pizza.checked = true;
});
} else {
this.pizzaIng.map((pizza) => {
pizza.checked = false;
});
}
}
}
select all/deselect is working but the individual selection is not working properly, if selected the first one it is selecting the select all but it should work when selected all individual, Please help.
javascript
angular angular-material edited Jan 2 at 4:31
Bhoomi patel
506219
asked Jan 2 at 4:23
Vivek KumarVivek Kumar
70129
I need to create a select all functionality in angular material, I am sharing code below which is partially working.
<section *ngFor="let ing of pizzaIng; let i = index" class="example-section">
<mat-checkbox (change)="selectChildren()"
[(ngModel)]="ing.checked">
{{ing.name}}
</mat-checkbox>
</section>
<mat-checkbox (change)="updateCheck()"
class="example-margin"
[(ngModel)]="selectAll">
Select All
</mat-checkbox>
.ts file
export class CheckboxConfigurableExample {
pizzaIng: any;
selectAll = false;
constructor() {
this.pizzaIng = [{
name: "Pepperoni",
checked: false
},
{
name: "Sasuage",
checked: true
},
{
name: "Mushrooms",
checked: false
}
];
}
selectChildren() {
for (var i = 0; i < this.pizzaIng.length; i++) {
if (this.pizzaIng[i].checked === true) {
return this.selectAll = true;
} else {
return this.selectAll = false;
}
}
}
updateCheck() {
console.log(this.selectAll);
if (this.selectAll === true) {
this.pizzaIng.map((pizza) => {
pizza.checked = true;
});
} else {
this.pizzaIng.map((pizza) => {
pizza.checked = false;
});
}
}
}
select all/deselect is working but the individual selection is not working properly, if selected the first one it is selecting the select all but it should work when selected all individual, Please help.
javascript
angular angular-material javascript
angular angular-material edited Jan 2 at 4:31
Bhoomi patel
506219
asked Jan 2 at 4:23
Vivek KumarVivek Kumar
70129
edited Jan 2 at 4:31
Bhoomi patel
506219
asked Jan 2 at 4:23
Vivek KumarVivek Kumar
70129
edited Jan 2 at 4:31
Bhoomi patel
506219
edited Jan 2 at 4:31
Bhoomi patel
506219
edited Jan 2 at 4:31
Bhoomi patel
506219
506219
asked Jan 2 at 4:23
Vivek KumarVivek Kumar
70129
asked Jan 2 at 4:23
Vivek KumarVivek Kumar
70129
asked Jan 2 at 4:23
Vivek KumarVivek Kumar
70129
70129
updateCheckis this for individual checkboxes when checked/unchecked manually it's not turning parent checkbox(selectAll/UnSelectedAll) is that right ?
– super cool
Jan 2 at 4:27
update check is for all the checkbox select/deselect and selectChildren will check the each individual selection and update the select all when all are selected
– Vivek Kumar
Jan 2 at 4:28
your approach is odd you should have*ngForon children only. you can fix the above mentioned issue by using $.grep and check if there is any unchecked based on that turn selectAll flag (true/false).
– super cool
Jan 2 at 4:33
add a comment |
updateCheckis this for individual checkboxes when checked/unchecked manually it's not turning parent checkbox(selectAll/UnSelectedAll) is that right ?
– super cool
Jan 2 at 4:27
update check is for all the checkbox select/deselect and selectChildren will check the each individual selection and update the select all when all are selected
– Vivek Kumar
Jan 2 at 4:28
your approach is odd you should have*ngForon children only. you can fix the above mentioned issue by using $.grep and check if there is any unchecked based on that turn selectAll flag (true/false).
– super cool
Jan 2 at 4:33
updateCheck is this for individual checkboxes when checked/unchecked manually it's not turning parent checkbox(selectAll/UnSelectedAll) is that right ?– super cool
Jan 2 at 4:27
updateCheck is this for individual checkboxes when checked/unchecked manually it's not turning parent checkbox(selectAll/UnSelectedAll) is that right ?– super cool
Jan 2 at 4:27
update check is for all the checkbox select/deselect and selectChildren will check the each individual selection and update the select all when all are selected
– Vivek Kumar
Jan 2 at 4:28
update check is for all the checkbox select/deselect and selectChildren will check the each individual selection and update the select all when all are selected
– Vivek Kumar
Jan 2 at 4:28
your approach is odd you should have
*ngFor on children only. you can fix the above mentioned issue by using $.grep and check if there is any unchecked based on that turn selectAll flag (true/false).– super cool
Jan 2 at 4:33
your approach is odd you should have
*ngFor on children only. you can fix the above mentioned issue by using $.grep and check if there is any unchecked based on that turn selectAll flag (true/false).– super cool
Jan 2 at 4:33
add a comment |
3 Answers
3
active
oldest
votes
2
Just change your selectchildren to this, using every will check all the checkboxes are checked, and it should work fine. You already have a checked property which has the values as checked or not, you can check if all entries are checked then youc an enable the selectAll, else disable it.
selectChildren() {
if (this.pizzaIng.every(a => a.checked)) {
this.selectAll = true;
} else {
this.selectAll = false;
}
}
Here is the demo
answered Jan 2 at 4:35
Just codeJust code
10.5k53267
add a comment |
1
HTML
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<mat-header-cell *matHeaderCellDef class="customMatCheckContainer">
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let row" class="customMatCheckContainer">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</mat-cell>
</ng-container>
<ng-container matColumnDef="displayName">
<mat-header-cell *matHeaderCellDef> Display Name </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.displayName}} </mat-cell>
</ng-container>
<ng-container matColumnDef="userEmail">
<mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.email}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)"></mat-row>
TS
Import the following modules in your module file:
MatTableModule, MatCheckboxModule, MatSelectModule
You will get all selected entries in 'selection' variable.
import { MatSort, MatTableDataSource } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';
displayedColumns = ['select', 'displayName', 'userEmail'];
dataSource: MatTableDataSource<any>;
selection = new SelectionModel<Element>(true, );
constructor() {
this.dataSource = new MatTableDataSource(this.data);
}
public isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
public masterToggle() {
this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach(row => this.selection.select(row));
}
answered Jan 2 at 4:40
Harsh MathurHarsh Mathur
193
add a comment |
1
more short solution is in your html, no need to add if and else conditions
<section *ngFor="let ing of pizzaIng; let i = index" class="example-section">
<mat-checkbox
[(ngModel)]="ing.checked">
{{ing.name}}
</mat-checkbox>
</section>
<mat-checkbox
class="example-margin"
[checked]="isAllChecked()" (change)="checkAll()"
[(ngModel)]="selectAll">
Select All
</mat-checkbox>
in yout .ts
isAllChecked() {
return this.pizzaIng.every(obj => obj.checked);
}
checkAll() {
this.pizzaIng.forEach(obj => obj.checked = this.selectAll);
}
here is a link of working demo
answered Jan 2 at 4:41
Farhat ZamanFarhat Zaman
591411
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54001173%2fselect-all-checkbox-angular-material-5-gmail-style-if-selecting-individual-it%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Just change your selectchildren to this, using every will check all the checkboxes are checked, and it should work fine. You already have a checked property which has the values as checked or not, you can check if all entries are checked then youc an enable the selectAll, else disable it.
selectChildren() {
if (this.pizzaIng.every(a => a.checked)) {
this.selectAll = true;
} else {
this.selectAll = false;
}
}
Here is the demo
answered Jan 2 at 4:35
Just codeJust code
10.5k53267
add a comment |
2
Just change your selectchildren to this, using every will check all the checkboxes are checked, and it should work fine. You already have a checked property which has the values as checked or not, you can check if all entries are checked then youc an enable the selectAll, else disable it.
selectChildren() {
if (this.pizzaIng.every(a => a.checked)) {
this.selectAll = true;
} else {
this.selectAll = false;
}
}
Here is the demo
answered Jan 2 at 4:35
Just codeJust code
10.5k53267
add a comment |
2
2
2
Just change your selectchildren to this, using every will check all the checkboxes are checked, and it should work fine. You already have a checked property which has the values as checked or not, you can check if all entries are checked then youc an enable the selectAll, else disable it.
selectChildren() {
if (this.pizzaIng.every(a => a.checked)) {
this.selectAll = true;
} else {
this.selectAll = false;
}
}
Here is the demo
answered Jan 2 at 4:35
Just codeJust code
10.5k53267
Just change your selectchildren to this, using every will check all the checkboxes are checked, and it should work fine. You already have a checked property which has the values as checked or not, you can check if all entries are checked then youc an enable the selectAll, else disable it.
selectChildren() {
if (this.pizzaIng.every(a => a.checked)) {
this.selectAll = true;
} else {
this.selectAll = false;
}
}
Here is the demo
answered Jan 2 at 4:35
Just codeJust code
10.5k53267
edited Jan 2 at 4:36
answered Jan 2 at 4:35
Just codeJust code
10.5k53267
answered Jan 2 at 4:35
Just codeJust code
10.5k53267
answered Jan 2 at 4:35
Just codeJust code
10.5k53267
10.5k53267
add a comment |
add a comment |
1
HTML
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<mat-header-cell *matHeaderCellDef class="customMatCheckContainer">
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let row" class="customMatCheckContainer">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</mat-cell>
</ng-container>
<ng-container matColumnDef="displayName">
<mat-header-cell *matHeaderCellDef> Display Name </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.displayName}} </mat-cell>
</ng-container>
<ng-container matColumnDef="userEmail">
<mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.email}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)"></mat-row>
TS
Import the following modules in your module file:
MatTableModule, MatCheckboxModule, MatSelectModule
You will get all selected entries in 'selection' variable.
import { MatSort, MatTableDataSource } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';
displayedColumns = ['select', 'displayName', 'userEmail'];
dataSource: MatTableDataSource<any>;
selection = new SelectionModel<Element>(true, );
constructor() {
this.dataSource = new MatTableDataSource(this.data);
}
public isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
public masterToggle() {
this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach(row => this.selection.select(row));
}
answered Jan 2 at 4:40
Harsh MathurHarsh Mathur
193
add a comment |
1
HTML
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<mat-header-cell *matHeaderCellDef class="customMatCheckContainer">
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let row" class="customMatCheckContainer">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</mat-cell>
</ng-container>
<ng-container matColumnDef="displayName">
<mat-header-cell *matHeaderCellDef> Display Name </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.displayName}} </mat-cell>
</ng-container>
<ng-container matColumnDef="userEmail">
<mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.email}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)"></mat-row>
TS
Import the following modules in your module file:
MatTableModule, MatCheckboxModule, MatSelectModule
You will get all selected entries in 'selection' variable.
import { MatSort, MatTableDataSource } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';
displayedColumns = ['select', 'displayName', 'userEmail'];
dataSource: MatTableDataSource<any>;
selection = new SelectionModel<Element>(true, );
constructor() {
this.dataSource = new MatTableDataSource(this.data);
}
public isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
public masterToggle() {
this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach(row => this.selection.select(row));
}
answered Jan 2 at 4:40
Harsh MathurHarsh Mathur
193
add a comment |
1
1
1
HTML
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<mat-header-cell *matHeaderCellDef class="customMatCheckContainer">
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let row" class="customMatCheckContainer">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</mat-cell>
</ng-container>
<ng-container matColumnDef="displayName">
<mat-header-cell *matHeaderCellDef> Display Name </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.displayName}} </mat-cell>
</ng-container>
<ng-container matColumnDef="userEmail">
<mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.email}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)"></mat-row>
TS
Import the following modules in your module file:
MatTableModule, MatCheckboxModule, MatSelectModule
You will get all selected entries in 'selection' variable.
import { MatSort, MatTableDataSource } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';
displayedColumns = ['select', 'displayName', 'userEmail'];
dataSource: MatTableDataSource<any>;
selection = new SelectionModel<Element>(true, );
constructor() {
this.dataSource = new MatTableDataSource(this.data);
}
public isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
public masterToggle() {
this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach(row => this.selection.select(row));
}
answered Jan 2 at 4:40
Harsh MathurHarsh Mathur
193
HTML
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<mat-header-cell *matHeaderCellDef class="customMatCheckContainer">
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let row" class="customMatCheckContainer">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</mat-cell>
</ng-container>
<ng-container matColumnDef="displayName">
<mat-header-cell *matHeaderCellDef> Display Name </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.displayName}} </mat-cell>
</ng-container>
<ng-container matColumnDef="userEmail">
<mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.email}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)"></mat-row>
TS
Import the following modules in your module file:
MatTableModule, MatCheckboxModule, MatSelectModule
You will get all selected entries in 'selection' variable.
import { MatSort, MatTableDataSource } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';
displayedColumns = ['select', 'displayName', 'userEmail'];
dataSource: MatTableDataSource<any>;
selection = new SelectionModel<Element>(true, );
constructor() {
this.dataSource = new MatTableDataSource(this.data);
}
public isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
public masterToggle() {
this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach(row => this.selection.select(row));
}
answered Jan 2 at 4:40
Harsh MathurHarsh Mathur
193
answered Jan 2 at 4:40
Harsh MathurHarsh Mathur
193
answered Jan 2 at 4:40
Harsh MathurHarsh Mathur
193
answered Jan 2 at 4:40
Harsh MathurHarsh Mathur
193
193
add a comment |
add a comment |
1
more short solution is in your html, no need to add if and else conditions
<section *ngFor="let ing of pizzaIng; let i = index" class="example-section">
<mat-checkbox
[(ngModel)]="ing.checked">
{{ing.name}}
</mat-checkbox>
</section>
<mat-checkbox
class="example-margin"
[checked]="isAllChecked()" (change)="checkAll()"
[(ngModel)]="selectAll">
Select All
</mat-checkbox>
in yout .ts
isAllChecked() {
return this.pizzaIng.every(obj => obj.checked);
}
checkAll() {
this.pizzaIng.forEach(obj => obj.checked = this.selectAll);
}
here is a link of working demo
answered Jan 2 at 4:41
Farhat ZamanFarhat Zaman
591411
add a comment |
1
more short solution is in your html, no need to add if and else conditions
<section *ngFor="let ing of pizzaIng; let i = index" class="example-section">
<mat-checkbox
[(ngModel)]="ing.checked">
{{ing.name}}
</mat-checkbox>
</section>
<mat-checkbox
class="example-margin"
[checked]="isAllChecked()" (change)="checkAll()"
[(ngModel)]="selectAll">
Select All
</mat-checkbox>
in yout .ts
isAllChecked() {
return this.pizzaIng.every(obj => obj.checked);
}
checkAll() {
this.pizzaIng.forEach(obj => obj.checked = this.selectAll);
}
here is a link of working demo
answered Jan 2 at 4:41
Farhat ZamanFarhat Zaman
591411
add a comment |
1
1
1
more short solution is in your html, no need to add if and else conditions
<section *ngFor="let ing of pizzaIng; let i = index" class="example-section">
<mat-checkbox
[(ngModel)]="ing.checked">
{{ing.name}}
</mat-checkbox>
</section>
<mat-checkbox
class="example-margin"
[checked]="isAllChecked()" (change)="checkAll()"
[(ngModel)]="selectAll">
Select All
</mat-checkbox>
in yout .ts
isAllChecked() {
return this.pizzaIng.every(obj => obj.checked);
}
checkAll() {
this.pizzaIng.forEach(obj => obj.checked = this.selectAll);
}
here is a link of working demo
answered Jan 2 at 4:41
Farhat ZamanFarhat Zaman
591411
more short solution is in your html, no need to add if and else conditions
<section *ngFor="let ing of pizzaIng; let i = index" class="example-section">
<mat-checkbox
[(ngModel)]="ing.checked">
{{ing.name}}
</mat-checkbox>
</section>
<mat-checkbox
class="example-margin"
[checked]="isAllChecked()" (change)="checkAll()"
[(ngModel)]="selectAll">
Select All
</mat-checkbox>
in yout .ts
isAllChecked() {
return this.pizzaIng.every(obj => obj.checked);
}
checkAll() {
this.pizzaIng.forEach(obj => obj.checked = this.selectAll);
}
here is a link of working demo
answered Jan 2 at 4:41
Farhat ZamanFarhat Zaman
591411
answered Jan 2 at 4:41
Farhat ZamanFarhat Zaman
591411
answered Jan 2 at 4:41
Farhat ZamanFarhat Zaman
591411
answered Jan 2 at 4:41
Farhat ZamanFarhat Zaman
591411
591411
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54001173%2fselect-all-checkbox-angular-material-5-gmail-style-if-selecting-individual-it%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
updateCheckis this for individual checkboxes when checked/unchecked manually it's not turning parent checkbox(selectAll/UnSelectedAll) is that right ?– super cool
Jan 2 at 4:27
update check is for all the checkbox select/deselect and selectChildren will check the each individual selection and update the select all when all are selected
– Vivek Kumar
Jan 2 at 4:28
your approach is odd you should have
*ngForon children only. you can fix the above mentioned issue by using $.grep and check if there is any unchecked based on that turn selectAll flag (true/false).– super cool
Jan 2 at 4:33