How to display data in Html

Question

Hi Below is the data returned.I am trying below Html. I want to display only Name & Email. In List Data there are more than 2 columns like IdNameEmailContact No. etc. {{ column }} {{ element[column] }} @Input() arrChildHead: string[] = []; @Input() lstChild: any[] = []; In arrChildHead it has 2 fields NameEmail. In Lstchild it is data which is returned through API. Thanks

Sigar Dave · Answer

Please ensure the id and for attributes are set correctly for each iteration. something like this {{ getColumnTitle(column.name) }}

Ramco Ramco · Answer

Hi Dave I am getting this error. Below is the TypeScript The label's for attribute doesn't match any element id . This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly. To fix this issue make sure the label's for attribute references the correct id of a form field. export class DynamicMatTableComponent implements OnInitAfterViewInitOnChanges { @Input() title?: string; @Input() arrChildHead: string[] = ['Name' 'Email']; @Input() lstChild: any[] = []; @Input() isAction: boolean = false; @Input() columns: any = []; dataSource: MatTableDataSource ; displayedColumns: string[] = []; @Output() getTableData: EventEmitter = new EventEmitter (); @ViewChild(MatPaginator { static: true }) paginator!: MatPaginator; @ViewChild(MatSort) sort!: MatSort; @Output() pageChange = new EventEmitter (); flg?: boolean = true; isLoading = true; pageSizeOptions: number[] = []; showMessage:string=''; @Input() endpointurl?:string; constructor(private cdr: ChangeDetectorRef) { this.dataSource = new MatTableDataSource ([]); this.paginator = {} as MatPaginator; } defaultImage:string='assets/images/icons/no-photo.png'; ngOnInit(): void { //this.pageSizeOptions = this._common.getPageSizeOptions(); this.displayedColumns = this.getDisplayedColumns(); } ngOnChanges(changes:SimpleChanges){ this.isLoading = true; if (changes?.['lstChild'] && changes?.['lstChild'].currentValue) { this.dataSource = new MatTableDataSource (this.lstChild); this.dataSource.paginator = this.paginator; this.dataSource.sort = this.sort; this.isLoading = false; console.log(this.lstChild); console.log(this.arrChildHead); } this.displayedColumns = this.getDisplayedColumns(); this.cdr.detectChanges(); } ngAfterViewInit(){ } getDisplayedColumns(): string[] { this.columns = this.arrChildHead; return this.columns.filter((column:any)=>column.visible).map((column:any)=>column.name); } getColumnTitle(columnName: string): string { const column = this.columns.find((col:any) => col.name === columnName); return column ? column.title : ''; } applyFilter(event: Event) { const filterValue = (event.target as HTMLInputElement).value; this.dataSource.filter = filterValue.trim().toLowerCase(); } btnHardDelete=($event:anyrecord:any)=>{ } } Thanks

Sigar Dave · Answer

To display only the Name and Email columns from your data using Angular and Angular Material you need to make sure that arrChildHead contains only those two columns and that your displayedColumns array is set accordingly. Here's a step-by-step solution: Define the displayedColumns array : Ensure that displayedColumns only includes Name and Email. HTML Template : Modify the *ngFor directive to iterate over the displayedColumns array and bind data correctly. Here's how you can structure your component: {{ column }} {{ element[column] }} And your component TypeScript file should look like this: import { Component Input } from '@angular/core'; @Component({ selector: 'app-child-component' templateUrl: './child-component.html' }) export class ChildComponent { @Input() arrChildHead: string[] = ['Name' 'Email']; // Specify the columns you want to display @Input() lstChild: any[] = []; // Your data array displayedColumns: string[] = this.arrChildHead; // Set the displayed columns } With this setup: arrChildHead should only include the column names Name and Email. displayedColumns will take the values from arrChildHead . The HTML template iterates over displayedColumns and displays only the Name and Email columns from your data. Make sure that your data in lstChild contains the corresponding fields Name and Email. For example your data array might look something like this: lstChild = [ { Id: 1 Name: 'John Doe' Email: 'john.doe@example.com' ContactNo: '1234567890' } { Id: 2 Name: 'Jane Smith' Email: 'jane.smith@example.com' ContactNo: '0987654321' } ]; With this configuration only the Name and Email columns will be displayed in the table.