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