Angular with Laravel

BEFORE


----AFTER DOUBLE CLICK ON CREATE INSCRIPTION IN ASIDE MENU

__________________________HTML________________________
<div class="card-header border-0 pt-5 mt-10">
<h3 class="card-title align-items-start flex-column">
<span class="card-label fw-bolder fs-3 mb-1">Inscription Status</span>
<span class="text-muted mt-1 fw-bold fs-7"></span>

<div class="card-body py-3">
<div class="table-responsive">
<table class="table align-middle gs-0 gy-4 ">

<thead>
<tr class="fw-bolder text-muted bg-light">
<!-- <th class="ps-4 min-w-325px rounded-start">id</th>-->
<th class="min-w-125px">status</th>
<th class="min-w-125px">date</th>
<th class="min-w-125px">id inscription</th>


</tr>
</thead>

<tbody>
<tr *ngFor="let ins of res">
<!-- <td>
<div class="d-flex align-items-center">
<div class="d-flex justify-content-start flex-column">

{{ins.id}}


</div>
</div>
</td>-->
<td>

{{ins.status}}

</td>
<td>

{{ins.date}}

</td>
<td>

{{ins.id_inscription}}

</td>


</tr>
</tbody>
</table>
</div>
</div>
</div>
------------------Type Script-----------------------------------
import { Component, OnInit } from '@angular/core';
import { InscriptionStatusesService } from '../service/inscription-statuses.service';

@Component({
selector: 'app-insc-statuses-list',
templateUrl: './insc-statuses-list.component.html',
styleUrls: ['./insc-statuses-list.component.scss']
})
export class InscStatusesListComponent implements OnInit {

inscriptionS: any = {
status: '',
date: '',
id_inscription: ''
};
inscriptionStatuses: any=[];
res: any;

constructor(private service: InscriptionStatusesService) { }

ngOnInit(): void {
this.showInscriptionStatus();
}




showInscriptionStatus() {
this.inscriptionStatuses = this.service.getData().
subscribe((inscription) => {
this.inscriptionStatuses = inscription;
this.res = this.inscriptionStatuses.inscription_status.data;

console.log(this.res);
});
}

}