How to get the values(in array format) from a table populated using ngFor on click a button

I have a simple json using which I populated a table , now on click of button I need to get all the checkbox value and corresponding document id in array format. Here is code below. code demo is here - https://stackblitz.com/edit/angular-ltme4j?file=src/app/app.component.html,src/app/app.component.ts

app.component.html


<div class="container-fluid mt-3">
<h2>Document Types List</h2>
<table class="table">
<thead>
<tr>
<th>Allow Expired</th>
<th>Document Types Id</th>
<th>Document Types Name</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let documenttype of documenttypes; let i = index">
<td> <input class="form-check-input" type="checkbox" value={{documenttype.allowexpired}} [checked]="documenttype.allowexpired"> {{documenttype.allowexpired}}</td>
<td>{{documenttype.docid}}</td>
<td>{{documenttype.docname}}</td>
</tr>
</tbody>
</table>
<button type="submit" #refreshData (click)="submitExpired()" class="btn btn-primary">Save</button>
</div>

app.component.ts


import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
documenttypes: any[] = [
{
allowexpired: true,
docid: 1,
docname: 'document1',
},
{
allowexpired: true,
docid: 2,
docname: 'document2',
},
{
allowexpired: false,
docid: 3,
docname: 'document3',
},
{
allowexpired: false,
docid: 4,
docname: 'document4',
},
];
ngOnInit() {}

submitExpired() {
const samplearrayformatValue = [{"allowexpired":true,"docid":1},{"allowexpired":true,"docid":2},{"allowexpired":false,"docid":3},{"allowexpired":false,"docid":4}]
}
}

Continue reading...