Mixing
how to bind data with checkbox angular 2?
0
JSON
[ {
"code" : "TEST",
"projectId" : "PROJECT",
"name" : "TEST",
"description" : "test",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : false
}, {
"code" : "test",
"projectId" : "PROJECT",
"name" : "Test",
"description" : "test 11",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : true
}, {
"code" : "asdasd2122",
"projectId" : "PROJECT",
"name" : "TEST12",
"description" : "ashdasdhl",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : false
}, {
"code" : "test1a",
"projectId" : "PROJECT",
"name" : "TEST122",
"description" : "a,sndkajlskdjlkajd",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : true
}, {
"code" : "dasdasd",
"projectId" : "PROJECT",
"name" : "test123123",
"description" : "asdasdasd",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : true
},
{
"code" : "asdasdTES",
"projectId" : "PROJECT",
"name" : "TEST123",
"description" : "asdasdasd",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : true
} ]
HTML
<mat-table [dataSource]="offersColumnRowData" matSort matSortActive="NAME">
<ng-container matColumnDef="SELECT">
<mat-header-cell *matHeaderCellDef> SELECT </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox>
</mat-checkbox>
</mat-cell>
</ng-container>
<ng-container matColumnDef="NAME">
<mat-header-cell *matHeaderCellDef> NAME </mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.name }} </mat-cell>
</ng-container>
<ng-container matColumnDef="CODE">
<mat-header-cell *matHeaderCellDef> CODE </mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.code }} </mat-cell>
</ng-container>
<ng-container matColumnDef="DESCRIPTION">
<mat-header-cell *matHeaderCellDef> DESCRIPTION </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.description}} </mat-cell>
</ng-container>
<ng-container matColumnDef="CREATEDATE">
<mat-header-cell *matHeaderCellDef> CREATEDATE </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<ng-container matColumnDef="UNAME">
<mat-header-cell *matHeaderCellDef> UNAME </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox type="checkbox">
</mat-checkbox>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="offersColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: offersColumns;" (mouseover)="row.hovered = true" (mouseout)="row.hovered = false"></mat-row>
</mat-table>
I'm trying to bind values into checkbox! the values in form of boolean (TRUE|FALSE)
I have tried to bind the with check box but its not working
Explaination: goto to my stackblitz -> if i select any checkbox from SELECT column the code column should be selected(i just want to print select column row CODE in console log)
2) how to bind Boolean values into checkbox column that column name is ISACTIVE if active is false check box is not selected if active is true -> checkbox is selected!
Here it is my stackblits link it would be easy for you!
https://stackblitz.com/edit/angular-gbf9kz-a2s4zc?file=app%2Ftable-basic-example.ts
angular typescript angular-material angular5 asked Jan 2 at 11:54
Just Teach MeJust Teach Me
1017
add a comment |
0
JSON
[ {
"code" : "TEST",
"projectId" : "PROJECT",
"name" : "TEST",
"description" : "test",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : false
}, {
"code" : "test",
"projectId" : "PROJECT",
"name" : "Test",
"description" : "test 11",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : true
}, {
"code" : "asdasd2122",
"projectId" : "PROJECT",
"name" : "TEST12",
"description" : "ashdasdhl",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : false
}, {
"code" : "test1a",
"projectId" : "PROJECT",
"name" : "TEST122",
"description" : "a,sndkajlskdjlkajd",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : true
}, {
"code" : "dasdasd",
"projectId" : "PROJECT",
"name" : "test123123",
"description" : "asdasdasd",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : true
},
{
"code" : "asdasdTES",
"projectId" : "PROJECT",
"name" : "TEST123",
"description" : "asdasdasd",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : true
} ]
HTML
<mat-table [dataSource]="offersColumnRowData" matSort matSortActive="NAME">
<ng-container matColumnDef="SELECT">
<mat-header-cell *matHeaderCellDef> SELECT </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox>
</mat-checkbox>
</mat-cell>
</ng-container>
<ng-container matColumnDef="NAME">
<mat-header-cell *matHeaderCellDef> NAME </mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.name }} </mat-cell>
</ng-container>
<ng-container matColumnDef="CODE">
<mat-header-cell *matHeaderCellDef> CODE </mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.code }} </mat-cell>
</ng-container>
<ng-container matColumnDef="DESCRIPTION">
<mat-header-cell *matHeaderCellDef> DESCRIPTION </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.description}} </mat-cell>
</ng-container>
<ng-container matColumnDef="CREATEDATE">
<mat-header-cell *matHeaderCellDef> CREATEDATE </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<ng-container matColumnDef="UNAME">
<mat-header-cell *matHeaderCellDef> UNAME </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox type="checkbox">
</mat-checkbox>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="offersColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: offersColumns;" (mouseover)="row.hovered = true" (mouseout)="row.hovered = false"></mat-row>
</mat-table>
I'm trying to bind values into checkbox! the values in form of boolean (TRUE|FALSE)
I have tried to bind the with check box but its not working
Explaination: goto to my stackblitz -> if i select any checkbox from SELECT column the code column should be selected(i just want to print select column row CODE in console log)
2) how to bind Boolean values into checkbox column that column name is ISACTIVE if active is false check box is not selected if active is true -> checkbox is selected!
Here it is my stackblits link it would be easy for you!
https://stackblitz.com/edit/angular-gbf9kz-a2s4zc?file=app%2Ftable-basic-example.ts
angular typescript angular-material angular5 asked Jan 2 at 11:54
Just Teach MeJust Teach Me
1017
<mat-checkbox type="checkbox" [(ngModel)]="element.active">
– Ric
Jan 2 at 12:04
thank you @Ric but if i select check box from SELECT column i want to print selected row CODE column data could you please help me that
– Just Teach Me
Jan 2 at 12:07
See my answer below. It will allow you to get the code from the selected checkbox.
– prettyfly
Jan 2 at 12:08
add a comment |
0
0
0
JSON
[ {
"code" : "TEST",
"projectId" : "PROJECT",
"name" : "TEST",
"description" : "test",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : false
}, {
"code" : "test",
"projectId" : "PROJECT",
"name" : "Test",
"description" : "test 11",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : true
}, {
"code" : "asdasd2122",
"projectId" : "PROJECT",
"name" : "TEST12",
"description" : "ashdasdhl",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : false
}, {
"code" : "test1a",
"projectId" : "PROJECT",
"name" : "TEST122",
"description" : "a,sndkajlskdjlkajd",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : true
}, {
"code" : "dasdasd",
"projectId" : "PROJECT",
"name" : "test123123",
"description" : "asdasdasd",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : true
},
{
"code" : "asdasdTES",
"projectId" : "PROJECT",
"name" : "TEST123",
"description" : "asdasdasd",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : true
} ]
HTML
<mat-table [dataSource]="offersColumnRowData" matSort matSortActive="NAME">
<ng-container matColumnDef="SELECT">
<mat-header-cell *matHeaderCellDef> SELECT </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox>
</mat-checkbox>
</mat-cell>
</ng-container>
<ng-container matColumnDef="NAME">
<mat-header-cell *matHeaderCellDef> NAME </mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.name }} </mat-cell>
</ng-container>
<ng-container matColumnDef="CODE">
<mat-header-cell *matHeaderCellDef> CODE </mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.code }} </mat-cell>
</ng-container>
<ng-container matColumnDef="DESCRIPTION">
<mat-header-cell *matHeaderCellDef> DESCRIPTION </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.description}} </mat-cell>
</ng-container>
<ng-container matColumnDef="CREATEDATE">
<mat-header-cell *matHeaderCellDef> CREATEDATE </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<ng-container matColumnDef="UNAME">
<mat-header-cell *matHeaderCellDef> UNAME </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox type="checkbox">
</mat-checkbox>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="offersColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: offersColumns;" (mouseover)="row.hovered = true" (mouseout)="row.hovered = false"></mat-row>
</mat-table>
I'm trying to bind values into checkbox! the values in form of boolean (TRUE|FALSE)
I have tried to bind the with check box but its not working
Explaination: goto to my stackblitz -> if i select any checkbox from SELECT column the code column should be selected(i just want to print select column row CODE in console log)
2) how to bind Boolean values into checkbox column that column name is ISACTIVE if active is false check box is not selected if active is true -> checkbox is selected!
Here it is my stackblits link it would be easy for you!
https://stackblitz.com/edit/angular-gbf9kz-a2s4zc?file=app%2Ftable-basic-example.ts
angular typescript angular-material angular5 asked Jan 2 at 11:54
Just Teach MeJust Teach Me
1017
JSON
[ {
"code" : "TEST",
"projectId" : "PROJECT",
"name" : "TEST",
"description" : "test",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : false
}, {
"code" : "test",
"projectId" : "PROJECT",
"name" : "Test",
"description" : "test 11",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : true
}, {
"code" : "asdasd2122",
"projectId" : "PROJECT",
"name" : "TEST12",
"description" : "ashdasdhl",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : false
}, {
"code" : "test1a",
"projectId" : "PROJECT",
"name" : "TEST122",
"description" : "a,sndkajlskdjlkajd",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : true
}, {
"code" : "dasdasd",
"projectId" : "PROJECT",
"name" : "test123123",
"description" : "asdasdasd",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : true
},
{
"code" : "asdasdTES",
"projectId" : "PROJECT",
"name" : "TEST123",
"description" : "asdasdasd",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : true
} ]
HTML
<mat-table [dataSource]="offersColumnRowData" matSort matSortActive="NAME">
<ng-container matColumnDef="SELECT">
<mat-header-cell *matHeaderCellDef> SELECT </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox>
</mat-checkbox>
</mat-cell>
</ng-container>
<ng-container matColumnDef="NAME">
<mat-header-cell *matHeaderCellDef> NAME </mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.name }} </mat-cell>
</ng-container>
<ng-container matColumnDef="CODE">
<mat-header-cell *matHeaderCellDef> CODE </mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.code }} </mat-cell>
</ng-container>
<ng-container matColumnDef="DESCRIPTION">
<mat-header-cell *matHeaderCellDef> DESCRIPTION </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.description}} </mat-cell>
</ng-container>
<ng-container matColumnDef="CREATEDATE">
<mat-header-cell *matHeaderCellDef> CREATEDATE </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<ng-container matColumnDef="UNAME">
<mat-header-cell *matHeaderCellDef> UNAME </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox type="checkbox">
</mat-checkbox>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="offersColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: offersColumns;" (mouseover)="row.hovered = true" (mouseout)="row.hovered = false"></mat-row>
</mat-table>
I'm trying to bind values into checkbox! the values in form of boolean (TRUE|FALSE)
I have tried to bind the with check box but its not working
Explaination: goto to my stackblitz -> if i select any checkbox from SELECT column the code column should be selected(i just want to print select column row CODE in console log)
2) how to bind Boolean values into checkbox column that column name is ISACTIVE if active is false check box is not selected if active is true -> checkbox is selected!
Here it is my stackblits link it would be easy for you!
https://stackblitz.com/edit/angular-gbf9kz-a2s4zc?file=app%2Ftable-basic-example.ts
angular typescript angular-material angular5 angular typescript angular-material angular5 asked Jan 2 at 11:54
Just Teach MeJust Teach Me
1017
asked Jan 2 at 11:54
Just Teach MeJust Teach Me
1017
asked Jan 2 at 11:54
Just Teach MeJust Teach Me
1017
asked Jan 2 at 11:54
Just Teach MeJust Teach Me
1017
asked Jan 2 at 11:54
Just Teach MeJust Teach Me
1017
1017
<mat-checkbox type="checkbox" [(ngModel)]="element.active">
– Ric
Jan 2 at 12:04
thank you @Ric but if i select check box from SELECT column i want to print selected row CODE column data could you please help me that
– Just Teach Me
Jan 2 at 12:07
See my answer below. It will allow you to get the code from the selected checkbox.
– prettyfly
Jan 2 at 12:08
add a comment |
<mat-checkbox type="checkbox" [(ngModel)]="element.active">
– Ric
Jan 2 at 12:04
thank you @Ric but if i select check box from SELECT column i want to print selected row CODE column data could you please help me that
– Just Teach Me
Jan 2 at 12:07
See my answer below. It will allow you to get the code from the selected checkbox.
– prettyfly
Jan 2 at 12:08
<mat-checkbox type="checkbox" [(ngModel)]="element.active">– Ric
Jan 2 at 12:04
<mat-checkbox type="checkbox" [(ngModel)]="element.active">– Ric
Jan 2 at 12:04
thank you @Ric but if i select check box from SELECT column i want to print selected row CODE column data could you please help me that
– Just Teach Me
Jan 2 at 12:07
thank you @Ric but if i select check box from SELECT column i want to print selected row CODE column data could you please help me that
– Just Teach Me
Jan 2 at 12:07
See my answer below. It will allow you to get the code from the selected checkbox.
– prettyfly
Jan 2 at 12:08
See my answer below. It will allow you to get the code from the selected checkbox.
– prettyfly
Jan 2 at 12:08
add a comment |
4 Answers
4
active
oldest
votes
2
Depending on how complex you're going to go with this, you could either take a forms approach (recommended), or you can add a simple change handler to your checkbox.
COMPONENT
selectedCodes: string = ;
receiveCheckboxChange(code: string, value: MatCheckboxChange) {
console.log(code, value.checked);
this.updateCodes(code, value.checked);
}
updateCodes(code: string, selected: boolean) {
const inArrayIndex: number = this.selectedCodes.indexOf(code);
if (selected && inArrayIndex === -1) {
this.selectedCodes.push(code);
} else if (inArrayIndex !== -1) {
this.selectedCodes.splice(inArrayIndex, 1);
}
}
isSelected(code: string) {
return this.selectedCodes.indexOf(code) !== -1;
}
TEMPLATE
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox type="checkbox" (change)="receiveCheckboxChange(element.code, $event)" [checked]="isSelected(element.code)">
</mat-checkbox>
</mat-cell>
</ng-container>
The key part here being (change)="receiveCheckboxChange(element.code, $event)" - You can supply whatever info you want from the element, or, indeed, the entire element object itself to your function. Then it's up to you to do whatever you want from there.
You will then have an array of selected codes in the variable selectedCodes. What you do with them from there, is up to you.
Blitz: https://stackblitz.com/edit/angular-gbf9kz-sgtrtv
answered Jan 2 at 12:08
prettyflyprettyfly
1,23611021
Yes you are right! when i select check box from CHECKBOX column the code column value i want to print but i actually i want to pass this CODE value to the API do you get my Qn? so could you tell me how to store this code value in to any variable?
– Just Teach Me
Jan 2 at 12:17
You can do whatever you like with thecodevalue insidereceiveCheckboxChange- you can store it as a variable, add it to an array, or directly call an API. It's up to you. :)
– prettyfly
Jan 2 at 12:19
how to store that code value in to variable? could you please tell me!
– Just Teach Me
Jan 2 at 12:25
See updated answer.
– prettyfly
Jan 2 at 12:49
just one mistake you should show selected CODE on the basis of SELECT column check box thanks!
– Just Teach Me
Jan 2 at 13:37
add a comment |
1
<ng-container matColumnDef="SELECT">
<mat-header-cell *matHeaderCellDef> SELECT </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox [(ngModel)]="element.Isselected" (change)="change()">
</mat-checkbox>
</mat-cell>
</ng-container>
in ts file
change() {
const result = this.offersColumnRowData.filter(x => x.Isselected == true);
console.log('result', result);
}
Isselected property in json
"Isselected": false,
"code" : "TEST",
"projectId" : "PROJECT",
"name" : "TEST",
"description" : "test",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : false
answered Jan 2 at 12:25
Akshay PamnaniAkshay Pamnani
215
add a comment |
1
Use [checked] and (change) to show if is element.active=true and to change the value of element.active. And use conditional operator to show (or not) the value of element.code
<ng-container matColumnDef="CODE">
<mat-header-cell *matHeaderCellDef> CODE </mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.active?element.code:"" }}
</mat-cell>
</ng-container>
...
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox type="checkbox" [checked]="element.active"
(change)="element.active=$event.checked">
</mat-checkbox>
</mat-cell>
</ng-container>
Update:Better using ngModel -not [checked] and (change)-
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox type="checkbox" [(ngModel)]="element.active">
</mat-checkbox>
</mat-cell>
</ng-container>
answered Jan 2 at 12:28
EliseoEliseo
6,8631314
Thank you so much Sir!
– Just Teach Me
Jan 2 at 13:49
add a comment |
0
I updated your stackblitz, check : https://stackblitz.com/edit/angular-gbf9kz-qg9fvw?file=app%2Ftable-basic-example.ts
Bind data on checkbox html tag using [checked]="element.active"
Get active property value using (change)="change(element)"
answered Jan 2 at 12:02
Gérôme GrignonGérôme Grignon
20916
thank you sir, but you solved only one query i want this also if i select check box from SELECT column i want to print selected row CODE column data could you please help me that
– Just Teach Me
Jan 2 at 12:08
I updated the stackblitz project. Tell me if it's what you expected.
– Gérôme Grignon
Jan 2 at 12:15
you are 90 % correct but i dont want whole row i just want CODE column value . when i select checkbox from SELECT column then i want to store the code column value into any variable!
– Just Teach Me
Jan 2 at 12:22
then you just need to do something like this.<name of the variable> = element.code into the print() method.
– Gérôme Grignon
Jan 2 at 12:32
yes its working
– Just Teach Me
Jan 2 at 17:39
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%2f54005894%2fhow-to-bind-data-with-checkbox-angular-2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Depending on how complex you're going to go with this, you could either take a forms approach (recommended), or you can add a simple change handler to your checkbox.
COMPONENT
selectedCodes: string = ;
receiveCheckboxChange(code: string, value: MatCheckboxChange) {
console.log(code, value.checked);
this.updateCodes(code, value.checked);
}
updateCodes(code: string, selected: boolean) {
const inArrayIndex: number = this.selectedCodes.indexOf(code);
if (selected && inArrayIndex === -1) {
this.selectedCodes.push(code);
} else if (inArrayIndex !== -1) {
this.selectedCodes.splice(inArrayIndex, 1);
}
}
isSelected(code: string) {
return this.selectedCodes.indexOf(code) !== -1;
}
TEMPLATE
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox type="checkbox" (change)="receiveCheckboxChange(element.code, $event)" [checked]="isSelected(element.code)">
</mat-checkbox>
</mat-cell>
</ng-container>
The key part here being (change)="receiveCheckboxChange(element.code, $event)" - You can supply whatever info you want from the element, or, indeed, the entire element object itself to your function. Then it's up to you to do whatever you want from there.
You will then have an array of selected codes in the variable selectedCodes. What you do with them from there, is up to you.
Blitz: https://stackblitz.com/edit/angular-gbf9kz-sgtrtv
answered Jan 2 at 12:08
prettyflyprettyfly
1,23611021
Yes you are right! when i select check box from CHECKBOX column the code column value i want to print but i actually i want to pass this CODE value to the API do you get my Qn? so could you tell me how to store this code value in to any variable?
– Just Teach Me
Jan 2 at 12:17
You can do whatever you like with thecodevalue insidereceiveCheckboxChange- you can store it as a variable, add it to an array, or directly call an API. It's up to you. :)
– prettyfly
Jan 2 at 12:19
how to store that code value in to variable? could you please tell me!
– Just Teach Me
Jan 2 at 12:25
See updated answer.
– prettyfly
Jan 2 at 12:49
just one mistake you should show selected CODE on the basis of SELECT column check box thanks!
– Just Teach Me
Jan 2 at 13:37
add a comment |
2
Depending on how complex you're going to go with this, you could either take a forms approach (recommended), or you can add a simple change handler to your checkbox.
COMPONENT
selectedCodes: string = ;
receiveCheckboxChange(code: string, value: MatCheckboxChange) {
console.log(code, value.checked);
this.updateCodes(code, value.checked);
}
updateCodes(code: string, selected: boolean) {
const inArrayIndex: number = this.selectedCodes.indexOf(code);
if (selected && inArrayIndex === -1) {
this.selectedCodes.push(code);
} else if (inArrayIndex !== -1) {
this.selectedCodes.splice(inArrayIndex, 1);
}
}
isSelected(code: string) {
return this.selectedCodes.indexOf(code) !== -1;
}
TEMPLATE
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox type="checkbox" (change)="receiveCheckboxChange(element.code, $event)" [checked]="isSelected(element.code)">
</mat-checkbox>
</mat-cell>
</ng-container>
The key part here being (change)="receiveCheckboxChange(element.code, $event)" - You can supply whatever info you want from the element, or, indeed, the entire element object itself to your function. Then it's up to you to do whatever you want from there.
You will then have an array of selected codes in the variable selectedCodes. What you do with them from there, is up to you.
Blitz: https://stackblitz.com/edit/angular-gbf9kz-sgtrtv
answered Jan 2 at 12:08
prettyflyprettyfly
1,23611021
Yes you are right! when i select check box from CHECKBOX column the code column value i want to print but i actually i want to pass this CODE value to the API do you get my Qn? so could you tell me how to store this code value in to any variable?
– Just Teach Me
Jan 2 at 12:17
You can do whatever you like with thecodevalue insidereceiveCheckboxChange- you can store it as a variable, add it to an array, or directly call an API. It's up to you. :)
– prettyfly
Jan 2 at 12:19
how to store that code value in to variable? could you please tell me!
– Just Teach Me
Jan 2 at 12:25
See updated answer.
– prettyfly
Jan 2 at 12:49
just one mistake you should show selected CODE on the basis of SELECT column check box thanks!
– Just Teach Me
Jan 2 at 13:37
add a comment |
2
2
2
Depending on how complex you're going to go with this, you could either take a forms approach (recommended), or you can add a simple change handler to your checkbox.
COMPONENT
selectedCodes: string = ;
receiveCheckboxChange(code: string, value: MatCheckboxChange) {
console.log(code, value.checked);
this.updateCodes(code, value.checked);
}
updateCodes(code: string, selected: boolean) {
const inArrayIndex: number = this.selectedCodes.indexOf(code);
if (selected && inArrayIndex === -1) {
this.selectedCodes.push(code);
} else if (inArrayIndex !== -1) {
this.selectedCodes.splice(inArrayIndex, 1);
}
}
isSelected(code: string) {
return this.selectedCodes.indexOf(code) !== -1;
}
TEMPLATE
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox type="checkbox" (change)="receiveCheckboxChange(element.code, $event)" [checked]="isSelected(element.code)">
</mat-checkbox>
</mat-cell>
</ng-container>
The key part here being (change)="receiveCheckboxChange(element.code, $event)" - You can supply whatever info you want from the element, or, indeed, the entire element object itself to your function. Then it's up to you to do whatever you want from there.
You will then have an array of selected codes in the variable selectedCodes. What you do with them from there, is up to you.
Blitz: https://stackblitz.com/edit/angular-gbf9kz-sgtrtv
answered Jan 2 at 12:08
prettyflyprettyfly
1,23611021
Depending on how complex you're going to go with this, you could either take a forms approach (recommended), or you can add a simple change handler to your checkbox.
COMPONENT
selectedCodes: string = ;
receiveCheckboxChange(code: string, value: MatCheckboxChange) {
console.log(code, value.checked);
this.updateCodes(code, value.checked);
}
updateCodes(code: string, selected: boolean) {
const inArrayIndex: number = this.selectedCodes.indexOf(code);
if (selected && inArrayIndex === -1) {
this.selectedCodes.push(code);
} else if (inArrayIndex !== -1) {
this.selectedCodes.splice(inArrayIndex, 1);
}
}
isSelected(code: string) {
return this.selectedCodes.indexOf(code) !== -1;
}
TEMPLATE
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox type="checkbox" (change)="receiveCheckboxChange(element.code, $event)" [checked]="isSelected(element.code)">
</mat-checkbox>
</mat-cell>
</ng-container>
The key part here being (change)="receiveCheckboxChange(element.code, $event)" - You can supply whatever info you want from the element, or, indeed, the entire element object itself to your function. Then it's up to you to do whatever you want from there.
You will then have an array of selected codes in the variable selectedCodes. What you do with them from there, is up to you.
Blitz: https://stackblitz.com/edit/angular-gbf9kz-sgtrtv
answered Jan 2 at 12:08
prettyflyprettyfly
1,23611021
edited Jan 2 at 12:54
answered Jan 2 at 12:08
prettyflyprettyfly
1,23611021
answered Jan 2 at 12:08
prettyflyprettyfly
1,23611021
answered Jan 2 at 12:08
prettyflyprettyfly
1,23611021
1,23611021
Yes you are right! when i select check box from CHECKBOX column the code column value i want to print but i actually i want to pass this CODE value to the API do you get my Qn? so could you tell me how to store this code value in to any variable?
– Just Teach Me
Jan 2 at 12:17
You can do whatever you like with thecodevalue insidereceiveCheckboxChange- you can store it as a variable, add it to an array, or directly call an API. It's up to you. :)
– prettyfly
Jan 2 at 12:19
how to store that code value in to variable? could you please tell me!
– Just Teach Me
Jan 2 at 12:25
See updated answer.
– prettyfly
Jan 2 at 12:49
just one mistake you should show selected CODE on the basis of SELECT column check box thanks!
– Just Teach Me
Jan 2 at 13:37
add a comment |
Yes you are right! when i select check box from CHECKBOX column the code column value i want to print but i actually i want to pass this CODE value to the API do you get my Qn? so could you tell me how to store this code value in to any variable?
– Just Teach Me
Jan 2 at 12:17
You can do whatever you like with thecodevalue insidereceiveCheckboxChange- you can store it as a variable, add it to an array, or directly call an API. It's up to you. :)
– prettyfly
Jan 2 at 12:19
how to store that code value in to variable? could you please tell me!
– Just Teach Me
Jan 2 at 12:25
See updated answer.
– prettyfly
Jan 2 at 12:49
just one mistake you should show selected CODE on the basis of SELECT column check box thanks!
– Just Teach Me
Jan 2 at 13:37
Yes you are right! when i select check box from CHECKBOX column the code column value i want to print but i actually i want to pass this CODE value to the API do you get my Qn? so could you tell me how to store this code value in to any variable?
– Just Teach Me
Jan 2 at 12:17
Yes you are right! when i select check box from CHECKBOX column the code column value i want to print but i actually i want to pass this CODE value to the API do you get my Qn? so could you tell me how to store this code value in to any variable?
– Just Teach Me
Jan 2 at 12:17
You can do whatever you like with the
code value inside receiveCheckboxChange - you can store it as a variable, add it to an array, or directly call an API. It's up to you. :)– prettyfly
Jan 2 at 12:19
You can do whatever you like with the
code value inside receiveCheckboxChange - you can store it as a variable, add it to an array, or directly call an API. It's up to you. :)– prettyfly
Jan 2 at 12:19
how to store that code value in to variable? could you please tell me!
– Just Teach Me
Jan 2 at 12:25
how to store that code value in to variable? could you please tell me!
– Just Teach Me
Jan 2 at 12:25
See updated answer.
– prettyfly
Jan 2 at 12:49
See updated answer.
– prettyfly
Jan 2 at 12:49
just one mistake you should show selected CODE on the basis of SELECT column check box thanks!
– Just Teach Me
Jan 2 at 13:37
just one mistake you should show selected CODE on the basis of SELECT column check box thanks!
– Just Teach Me
Jan 2 at 13:37
add a comment |
1
<ng-container matColumnDef="SELECT">
<mat-header-cell *matHeaderCellDef> SELECT </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox [(ngModel)]="element.Isselected" (change)="change()">
</mat-checkbox>
</mat-cell>
</ng-container>
in ts file
change() {
const result = this.offersColumnRowData.filter(x => x.Isselected == true);
console.log('result', result);
}
Isselected property in json
"Isselected": false,
"code" : "TEST",
"projectId" : "PROJECT",
"name" : "TEST",
"description" : "test",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : false
answered Jan 2 at 12:25
Akshay PamnaniAkshay Pamnani
215
add a comment |
1
<ng-container matColumnDef="SELECT">
<mat-header-cell *matHeaderCellDef> SELECT </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox [(ngModel)]="element.Isselected" (change)="change()">
</mat-checkbox>
</mat-cell>
</ng-container>
in ts file
change() {
const result = this.offersColumnRowData.filter(x => x.Isselected == true);
console.log('result', result);
}
Isselected property in json
"Isselected": false,
"code" : "TEST",
"projectId" : "PROJECT",
"name" : "TEST",
"description" : "test",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : false
answered Jan 2 at 12:25
Akshay PamnaniAkshay Pamnani
215
add a comment |
1
1
1
<ng-container matColumnDef="SELECT">
<mat-header-cell *matHeaderCellDef> SELECT </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox [(ngModel)]="element.Isselected" (change)="change()">
</mat-checkbox>
</mat-cell>
</ng-container>
in ts file
change() {
const result = this.offersColumnRowData.filter(x => x.Isselected == true);
console.log('result', result);
}
Isselected property in json
"Isselected": false,
"code" : "TEST",
"projectId" : "PROJECT",
"name" : "TEST",
"description" : "test",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : false
answered Jan 2 at 12:25
Akshay PamnaniAkshay Pamnani
215
<ng-container matColumnDef="SELECT">
<mat-header-cell *matHeaderCellDef> SELECT </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox [(ngModel)]="element.Isselected" (change)="change()">
</mat-checkbox>
</mat-cell>
</ng-container>
in ts file
change() {
const result = this.offersColumnRowData.filter(x => x.Isselected == true);
console.log('result', result);
}
Isselected property in json
"Isselected": false,
"code" : "TEST",
"projectId" : "PROJECT",
"name" : "TEST",
"description" : "test",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : false
answered Jan 2 at 12:25
Akshay PamnaniAkshay Pamnani
215
edited Jan 2 at 12:38
answered Jan 2 at 12:25
Akshay PamnaniAkshay Pamnani
215
answered Jan 2 at 12:25
Akshay PamnaniAkshay Pamnani
215
answered Jan 2 at 12:25
Akshay PamnaniAkshay Pamnani
215
215
add a comment |
add a comment |
1
Use [checked] and (change) to show if is element.active=true and to change the value of element.active. And use conditional operator to show (or not) the value of element.code
<ng-container matColumnDef="CODE">
<mat-header-cell *matHeaderCellDef> CODE </mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.active?element.code:"" }}
</mat-cell>
</ng-container>
...
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox type="checkbox" [checked]="element.active"
(change)="element.active=$event.checked">
</mat-checkbox>
</mat-cell>
</ng-container>
Update:Better using ngModel -not [checked] and (change)-
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox type="checkbox" [(ngModel)]="element.active">
</mat-checkbox>
</mat-cell>
</ng-container>
answered Jan 2 at 12:28
EliseoEliseo
6,8631314
Thank you so much Sir!
– Just Teach Me
Jan 2 at 13:49
add a comment |
1
Use [checked] and (change) to show if is element.active=true and to change the value of element.active. And use conditional operator to show (or not) the value of element.code
<ng-container matColumnDef="CODE">
<mat-header-cell *matHeaderCellDef> CODE </mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.active?element.code:"" }}
</mat-cell>
</ng-container>
...
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox type="checkbox" [checked]="element.active"
(change)="element.active=$event.checked">
</mat-checkbox>
</mat-cell>
</ng-container>
Update:Better using ngModel -not [checked] and (change)-
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox type="checkbox" [(ngModel)]="element.active">
</mat-checkbox>
</mat-cell>
</ng-container>
answered Jan 2 at 12:28
EliseoEliseo
6,8631314
Thank you so much Sir!
– Just Teach Me
Jan 2 at 13:49
add a comment |
1
1
1
Use [checked] and (change) to show if is element.active=true and to change the value of element.active. And use conditional operator to show (or not) the value of element.code
<ng-container matColumnDef="CODE">
<mat-header-cell *matHeaderCellDef> CODE </mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.active?element.code:"" }}
</mat-cell>
</ng-container>
...
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox type="checkbox" [checked]="element.active"
(change)="element.active=$event.checked">
</mat-checkbox>
</mat-cell>
</ng-container>
Update:Better using ngModel -not [checked] and (change)-
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox type="checkbox" [(ngModel)]="element.active">
</mat-checkbox>
</mat-cell>
</ng-container>
answered Jan 2 at 12:28
EliseoEliseo
6,8631314
Use [checked] and (change) to show if is element.active=true and to change the value of element.active. And use conditional operator to show (or not) the value of element.code
<ng-container matColumnDef="CODE">
<mat-header-cell *matHeaderCellDef> CODE </mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.active?element.code:"" }}
</mat-cell>
</ng-container>
...
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox type="checkbox" [checked]="element.active"
(change)="element.active=$event.checked">
</mat-checkbox>
</mat-cell>
</ng-container>
Update:Better using ngModel -not [checked] and (change)-
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox type="checkbox" [(ngModel)]="element.active">
</mat-checkbox>
</mat-cell>
</ng-container>
answered Jan 2 at 12:28
EliseoEliseo
6,8631314
edited Jan 3 at 12:18
answered Jan 2 at 12:28
EliseoEliseo
6,8631314
answered Jan 2 at 12:28
EliseoEliseo
6,8631314
answered Jan 2 at 12:28
EliseoEliseo
6,8631314
6,8631314
Thank you so much Sir!
– Just Teach Me
Jan 2 at 13:49
add a comment |
Thank you so much Sir!
– Just Teach Me
Jan 2 at 13:49
Thank you so much Sir!
– Just Teach Me
Jan 2 at 13:49
Thank you so much Sir!
– Just Teach Me
Jan 2 at 13:49
add a comment |
0
I updated your stackblitz, check : https://stackblitz.com/edit/angular-gbf9kz-qg9fvw?file=app%2Ftable-basic-example.ts
Bind data on checkbox html tag using [checked]="element.active"
Get active property value using (change)="change(element)"
answered Jan 2 at 12:02
Gérôme GrignonGérôme Grignon
20916
thank you sir, but you solved only one query i want this also if i select check box from SELECT column i want to print selected row CODE column data could you please help me that
– Just Teach Me
Jan 2 at 12:08
I updated the stackblitz project. Tell me if it's what you expected.
– Gérôme Grignon
Jan 2 at 12:15
you are 90 % correct but i dont want whole row i just want CODE column value . when i select checkbox from SELECT column then i want to store the code column value into any variable!
– Just Teach Me
Jan 2 at 12:22
then you just need to do something like this.<name of the variable> = element.code into the print() method.
– Gérôme Grignon
Jan 2 at 12:32
yes its working
– Just Teach Me
Jan 2 at 17:39
add a comment |
0
I updated your stackblitz, check : https://stackblitz.com/edit/angular-gbf9kz-qg9fvw?file=app%2Ftable-basic-example.ts
Bind data on checkbox html tag using [checked]="element.active"
Get active property value using (change)="change(element)"
answered Jan 2 at 12:02
Gérôme GrignonGérôme Grignon
20916
thank you sir, but you solved only one query i want this also if i select check box from SELECT column i want to print selected row CODE column data could you please help me that
– Just Teach Me
Jan 2 at 12:08
I updated the stackblitz project. Tell me if it's what you expected.
– Gérôme Grignon
Jan 2 at 12:15
you are 90 % correct but i dont want whole row i just want CODE column value . when i select checkbox from SELECT column then i want to store the code column value into any variable!
– Just Teach Me
Jan 2 at 12:22
then you just need to do something like this.<name of the variable> = element.code into the print() method.
– Gérôme Grignon
Jan 2 at 12:32
yes its working
– Just Teach Me
Jan 2 at 17:39
add a comment |
0
0
0
I updated your stackblitz, check : https://stackblitz.com/edit/angular-gbf9kz-qg9fvw?file=app%2Ftable-basic-example.ts
Bind data on checkbox html tag using [checked]="element.active"
Get active property value using (change)="change(element)"
answered Jan 2 at 12:02
Gérôme GrignonGérôme Grignon
20916
I updated your stackblitz, check : https://stackblitz.com/edit/angular-gbf9kz-qg9fvw?file=app%2Ftable-basic-example.ts
Bind data on checkbox html tag using [checked]="element.active"
Get active property value using (change)="change(element)"
answered Jan 2 at 12:02
Gérôme GrignonGérôme Grignon
20916
edited Jan 2 at 12:17
answered Jan 2 at 12:02
Gérôme GrignonGérôme Grignon
20916
answered Jan 2 at 12:02
Gérôme GrignonGérôme Grignon
20916
answered Jan 2 at 12:02
Gérôme GrignonGérôme Grignon
20916
20916
thank you sir, but you solved only one query i want this also if i select check box from SELECT column i want to print selected row CODE column data could you please help me that
– Just Teach Me
Jan 2 at 12:08
I updated the stackblitz project. Tell me if it's what you expected.
– Gérôme Grignon
Jan 2 at 12:15
you are 90 % correct but i dont want whole row i just want CODE column value . when i select checkbox from SELECT column then i want to store the code column value into any variable!
– Just Teach Me
Jan 2 at 12:22
then you just need to do something like this.<name of the variable> = element.code into the print() method.
– Gérôme Grignon
Jan 2 at 12:32
yes its working
– Just Teach Me
Jan 2 at 17:39
add a comment |
thank you sir, but you solved only one query i want this also if i select check box from SELECT column i want to print selected row CODE column data could you please help me that
– Just Teach Me
Jan 2 at 12:08
I updated the stackblitz project. Tell me if it's what you expected.
– Gérôme Grignon
Jan 2 at 12:15
you are 90 % correct but i dont want whole row i just want CODE column value . when i select checkbox from SELECT column then i want to store the code column value into any variable!
– Just Teach Me
Jan 2 at 12:22
then you just need to do something like this.<name of the variable> = element.code into the print() method.
– Gérôme Grignon
Jan 2 at 12:32
yes its working
– Just Teach Me
Jan 2 at 17:39
thank you sir, but you solved only one query i want this also if i select check box from SELECT column i want to print selected row CODE column data could you please help me that
– Just Teach Me
Jan 2 at 12:08
thank you sir, but you solved only one query i want this also if i select check box from SELECT column i want to print selected row CODE column data could you please help me that
– Just Teach Me
Jan 2 at 12:08
I updated the stackblitz project. Tell me if it's what you expected.
– Gérôme Grignon
Jan 2 at 12:15
I updated the stackblitz project. Tell me if it's what you expected.
– Gérôme Grignon
Jan 2 at 12:15
you are 90 % correct but i dont want whole row i just want CODE column value . when i select checkbox from SELECT column then i want to store the code column value into any variable!
– Just Teach Me
Jan 2 at 12:22
you are 90 % correct but i dont want whole row i just want CODE column value . when i select checkbox from SELECT column then i want to store the code column value into any variable!
– Just Teach Me
Jan 2 at 12:22
then you just need to do something like this.<name of the variable> = element.code into the print() method.
– Gérôme Grignon
Jan 2 at 12:32
then you just need to do something like this.<name of the variable> = element.code into the print() method.
– Gérôme Grignon
Jan 2 at 12:32
yes its working
– Just Teach Me
Jan 2 at 17:39
yes its working
– Just Teach Me
Jan 2 at 17:39
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%2f54005894%2fhow-to-bind-data-with-checkbox-angular-2%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
<mat-checkbox type="checkbox" [(ngModel)]="element.active">– Ric
Jan 2 at 12:04
thank you @Ric but if i select check box from SELECT column i want to print selected row CODE column data could you please help me that
– Just Teach Me
Jan 2 at 12:07
See my answer below. It will allow you to get the code from the selected checkbox.
– prettyfly
Jan 2 at 12:08