To retrieve the row details upon clicking a specific toggle button, I need to access the "row" data.
Below is the snippet of my HTML code:
<div class="container">
<div>
<h3>Manage Announcements</h3>
</div>
<div>
<table mat-table [dataSource]="announcementsDataSource" class="mat-elevation-z8">
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<!-- Rest of the table structure goes here -->
This is my Typescript code for handling the row click event:
export class AnnouncementManageComponent implements OnInit {
announcementsDataSource: AnnouncementResponse[];
displayedColumns: string[] = ['title', 'text', 'type', 'for','fromDate','toDate','createdBy','updatedBy','createdDate','lastModifiedDate','displayOn'];
constructor(private announcementManageService: AnnouncementManageService,
private announcementRetrieveService: AnnouncementRetrieveService) {
}
ngOnInit() {
this.announcementRetrieveService.getAllAnnouncements().then(announcements => {
this.announcementsDataSource = announcements.announcements;
});
}
displayModified(event: MatSlideToggleChange, modifiedAnnouncement:any) {
console.log(event.checked);
console.log(modifiedAnnouncement.title);
console.log(modifiedAnnouncement.text);
console.log(modifiedAnnouncement.displayOn);
}
All the outputs in the console log from the displayModified function appear as undefined.
true
undefined
undefined
undefined
I am seeking guidance on how to extract the entire row data. Any suggestions?