Argthtjtr

I am using autocomplete and table component on the same page/component.Here on selecting particular player from the list of autocomplete component i want display that selected player details(for ex NAME and AGE) on the table like this :

I got some examples to display the selected value on the input field. Unable find it for table component.

Stackblitz DEMO

There are a few issues with your current implementation:

1. You'll have to work with ELEMENT_DATA to filter the results out instead of the options.


2. You will have to reassign to dataSource the fileted array of results. That's something that I've done in the _filter method. But since it returned string and I was filtering on ELEMENT_DATA I changed its return type to PeriodicElement.


3. Also, you're using options for the AutoComplete Suggestions instead of which you can simply use filteredOptions and then use option.name in the mat-option with the string interpolation syntax({{}})

Give this a try:

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

import {FormControl} from '@angular/forms';

import {Observable} from 'rxjs';

import {map, startWith} from 'rxjs/operators';

import {MatSort,MatPaginator,  MatTableDataSource} from '@angular/material';



export interface PeriodicElement {

  name: string;

  age: number;

}

const ELEMENT_DATA: PeriodicElement = [

  { name: 'Sachin Tendulkar', age: 42, },

  { name: 'Virat Kohli', age: 30},

];



@Component({

  selector: 'autocomplete-filter-example',

  templateUrl: 'autocomplete-filter-example.html',

  styleUrls: ['autocomplete-filter-example.css'],

})

export class AutocompleteFilterExample implements OnInit {

    displayedColumns: string = [ 'name', 'age'];

  dataSource = new MatTableDataSource(ELEMENT_DATA);



  @ViewChild(MatSort) sort: MatSort;

  @ViewChild(MatPaginator) paginator: MatPaginator;

  myControl = new FormControl();

  options: string = ['Sachin Tendulkar', 'Virat Kohli', 'Rohith Sharma'];

  filteredOptions: Observable<PeriodicElement>;



  ngOnInit() {

    this.filteredOptions = this.myControl.valueChanges

      .pipe(

        startWith(''),

        map(value => this._filter(value))

      );

    this.dataSource.sort = this.sort;

    this.dataSource.paginator = this.paginator;

  }



 applyFilter(filterValue: string) {

    this.dataSource.filter = filterValue.trim().toLowerCase();

  }



  private _filter(value: string): PeriodicElement {

    const filterValue = value.toLowerCase();

    const filteredSet = ELEMENT_DATA.filter(option => option.name.toLowerCase().includes(filterValue));

    this.dataSource = new MatTableDataSource(filteredSet);

    return filteredSet;

  }

}





/**  Copyright 2018 Google Inc. All Rights Reserved.

    Use of this source code is governed by an MIT-style license that

    can be found in the LICENSE file at http://angular.io/license */

And in your template:

<form class="example-form">

  <mat-form-field class="example-full-width">

    <input type="text" placeholder="Pick Player" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">

    <mat-autocomplete #auto="matAutocomplete">



      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">

        {{option.name}}

      </mat-option>

    </mat-autocomplete>

  </mat-form-field>

</form>





<!-- <mat-form-field>

  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">

</mat-form-field> -->





<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">





  <!-- NAME Column -->

  <ng-container matColumnDef="name">

    <th mat-header-cell *matHeaderCellDef mat-sort-header> NAME </th>

    <td mat-cell *matCellDef="let element"> {{element.name}} </td>

  </ng-container>



   <!-- AGE Column -->

  <ng-container matColumnDef="age">

    <th mat-header-cell *matHeaderCellDef mat-sort-header> AGE </th>

    <td mat-cell *matCellDef="let element"> {{element.age}} </td>

  </ng-container>



  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>



  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

Here's an Updated and Working StackBlitz for your ref.

Bind keydown event on input field as (keydown)="handlekeypressEvent($event.target.value)",

Change the table data according to keydownevent value.

<input type="text" placeholder="Pick Player" 

(keydown)="handlekeypressEvent($event.target.value)" aria-label="Number"

 matInput [formControl]="myControl" [matAutocomplete]="auto">



handlekeypressEvent($event) {

      console.log($event);

      this.dataSource = new MatTableDataSource(ELEMENT_DATA.filter(e=> 

                         e.name.toLowerCase().includes($event.toLowerCase())));

    }

Stackblitz Demo

Edit:

Will this work?

Updated And Reworked!

dataSource = new MatTableDataSource();

This will make sure your table is empty initially.

Add this in ngOnInit function

this.myControl.valueChanges

  .subscribe(v => {



    if (!v) {

      this.dataSource = new MatTableDataSource(ELEMENT_DATA);

      return;

    }



    const newDataSource = ELEMENT_DATA.filter(ob => ob.name === v);

    this.dataSource = new MatTableDataSource(newDataSource);

  });

And when you change the value from dropdown, this will populate the table.

P.S.:

Let me know, if I am still not getting your goal.