I am facing an issue where I have a dropdown menu, and I need to pass the ID of the selected value ($event.target.value) to other functions in different components.
<div class="dropdown ml-auto">
<select (change)=getSelectedVariantProject($event.target.value)>
<option value = "default">Select project</option>
<option *ngFor = "let project of selectProject" value = {{project.projectId}}>{{project.projectName}}</option>
</select>
</div>
In my project service, I have two important functions:
getProjects(): Observable<any>{
return this.http.get<Project>(this.urlProject)
.pipe(
catchError(this.handleError('getProject',[]))
);
}
getProjectVariant(id: number): Observable<any>{
var url = this.urlProjectVariant;
url = url + id;
return this.http.get<ProjectVariant>(url)
.pipe(
catchError(this.handleError('getProjectVariant',[]))
)
}
Furthermore, in my table component, I require the ID value from HTML as an argument named projectVariantId :
export class TablesComponent implements OnInit {
filters: MisraLint;
pageMisraMessages: PageMisraLintTable;
selectedPage : number = 0;
buildId: number = 1;
sizeTableEntries: number = 100;
page: any;
constructor(private misraService: MisraService) { }
getFilters(): void{
this.misraService.getMisraLintFilters(2)
.subscribe(filters => this.filters = filters);
}
getPageMisra(page:number,projectVariantId: number,size:number,buildId:number): void{
this.misraService.getPageMisraLint(page,projectVariantId, size,buildId)
.subscribe(pageMisra => {
this.pageMisraMessages = pageMisra
console.log("Misra messages: " + pageMisra.content)
})
}
getMisraLintByFilters(page: number, projectVariantId: number, size:number, filter: string)
{
//call rest API to apply filters
this.misraService.getMisraLintByFilters(page,projectVariantId,size,filter)
.subscribe(pageMisra => {
this.pageMisraMessages = pageMisra
})
}
ngOnInit() {
this.getFilters();
this.getPageMisra(0,2,this.sizeTableEntries,this.buildId);
}
}
I am unsure how to approach this problem. How can I properly pass $event.target.value as an argument to other component functions in TypeScript when a user selects an option from the dropdown menu?