How to display data in Html

Sign in to answer this question.

• 

  Sigar Dave2y agoPosted Jul 3, 2024, 11:55 AM

  Please ensure the id and for attributes are set correctly for each iteration.

  something like this

  
    
  
      {{ getColumnTitle(column.name) }}
      
    
  
  

  
   
• RR

  Ramco Ramco2y agoPosted Jul 3, 2024, 11:43 AM

  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 OnInit,AfterViewInit,OnChanges {
    @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<{ pageIndex: number, pageSize: number }> = new EventEmitter<{ pageIndex: number, pageSize: number }>();
    @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:any,record:any)=>{
    }
  }
  
  

  Thanks
• 

  Sigar Dave2y agoPosted Jul 3, 2024, 11:31 AM

  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:

  1. Define the displayedColumns array:

     Ensure that displayedColumns only includes "Name" and "Email".

  1. 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: '[email protected]', ContactNo: '1234567890' },
    { Id: 2, Name: 'Jane Smith', Email: '[email protected]', ContactNo: '0987654321' }
  ];
  

  With this configuration, only the "Name" and "Email" columns will be displayed in the table.