0

I have a component in angular which provide search functionality . When user enter value it call service code which inturns call POST API and retrieve result based on query . I want to show that result in table set using angular-material library . How can I connect datasource with my service code so that it update table component when data arrives from service code. Here is my component code

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import {NgForm} from '@angular/forms';
import {CollectionViewer, DataSource} from "@angular/cdk/collections";

@Component({
  selector: 'app-searchcomponent',
  templateUrl: './searchcomponent.component.html',
  styleUrls: ['./searchcomponent.component.css']
})
export class SearchcomponentComponent implements OnInit{

  constructor(private dataservice:DataService) { }

  ngOnInit() {
  }



datasource ; datafromservice ; 

displayedColumns = ['StudentName', 'StudentBatch', 'StudentEnrollment','StudentStatus','StudentStatusUpdate']; 


searchfunctionality(f:NgForm){


    console.log("Form Value",f.value);
this.datasource = new datafromservice(f.value);


    this.dataservice.searchstudent(f.value.enrollment_no).subscribe(
    data=>{
            this.datafromservice = data.data;
            console.log("Data",this.datafromservice);

           }

);
};

}

On various blogs ,writers suggest using connect() and disconnect() method but I have only seen examples with GET request . I need to pass paramters to service code

mohammad obaid
  • 415
  • 4
  • 16

1 Answers1

0

Once you get the data in the component in subscribe block, just call datasource.update(newData) to update the table

Manoj
  • 497
  • 7
  • 13