How to pass a value from html to be use from other component functions Typescript

Question

I have a dropdown and I want to pass the Id of the selected value ($event.target.value) in other component functions.

 <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>

I have project service with these two 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',[]))
      )
  }

And I have table component in which I need the id value from HTML in argument 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 meessgaes: " + 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 don't know how to do this. How to pass $event.target.value because I need this value as an argument of other component functions(in typescript) when the users choose something from the dropdown.

Answer 1

Approach 1.) If you are using other component on same page than

In component.ts

selectedProject = null;

getSelectedVariantProject(id){
 this.selectedProject = id;
}

in component.html

<app-other-component selectedProject="selectedProject"></app-other-component>

in otherComponent.ts

@Input() selectedProject;

Approach 2.) OR other component is on other page than you can use service.

In component

constructor(private someService: SomeService) {

}

getSelectedVariantProject(id){
     this.someService.selectedProject = id;
}

in otherComponent.ts

constructor(private someService: SomeService) {
 console.log(this.someService.selectedProject);
}