Is there a way to pass user input to service method in angular?

I need to get user input and pass that value into a service method in order to fetch the data related to that user input and display it. (The getApplicantById fetches the data from database in postman.)I have tried the following code: component.ts-

   export class StatusComponent implements OnInit {
  trackid:number;
  display:string;
  applicants:Observable<Applicant[]>;
  staffs:Observable<Staff[]>;
  constructor(private statusService:StatusServiceService) { }

  ngOnInit(): void {
  }
  getValue(val:string){
    this.trackid= parseInt(val);
    
  }
  sendvalueintoservice(trackid:number){
    this.statusService.getApplicantById(trackid);
  }
  sendval(trackid){
    this.statusService.getStaff(trackid);
  }
}

html-

 <input type="text" 
#box
placeholder="track application"
name="name"/>
<br><button (click)="getValue(box.value)">Submit</button>
{{trackid}}

<tr *ngFor="let app of applicants | async">
    <td>{{app.applicantId}}</td>
    <td>{{app.applicantName}}</td>
    <td>{{app.applicantStatus}}</td>
    </tr>
    <tr *ngFor="let app of staffs | async">
    <td>{{app.id}}</td>
    <td>{{app.staffname}}</td>
    <td>{{app.course}}</td>
    </tr>

service-

    export class StatusServiceService {
 
 private baseURL = "http://localhost:8080/university/applicant";

  constructor(private http: HttpClient) { }
 
  getApplicantById(applicantId:number):Observable<any>{
    return this.http.get(`${this.baseURL}/Applicants/${applicantId}`);
  }

  getStaff(id: number): Observable<any> {
    return this.http.get(`${this.baseURL}/viewstaff/${id}`);
  }
}

Solution 1:

There are 2 two things missing from the code that you wrote.

1. The method sendvalueintoservice() & sendval() are not being called anywhere. So they don't fire. Due to which you don't get the data.
2. As the service methods i.e. statusService.getApplicantById() returns Observable so to begin its execution you have to use the subscribe method.

For point 1. as a test case (I'm guessing you want to get the data as soon as the user clicks on the submit button) you can simply send the values to the sendvalueintoservice() & sendval().

For point 2. you will have to subscribe to both of them. So a barebone code will look like this

 getValue(val: string): void {
    this.trackId = parseInt(val);
    this.sendValueIntoService(this.trackId);
    this.sendVal(this.trackId);
    
  }

  sendValueIntoService(trackId: number): void {
    // Below I subscribe to the method so that we can execute it
    this.statusService.getApplicantById(trackId).subscribe(resp => {
      // The response will come in this block from your service.
      console.log(resp);
    });
    ;
  }

  sendVal(trackId: number): void {
    // Below I subscribe to the method so that we can execute it
    this.statusService.getStaff(trackId).subscribe(resp => {
      console.log(resp);
    });
  }

Just a bit of advice it's good to use coding conventions like You use used for the method getValue() so I updated the sendvalueintoservice() to sendValueIntoService() to make it more consistent, same for other fields.

UPDATE

Apologies,Just saw that your data fields which you are using to display are of type Observables. In that case, if you don't have additional logic to apply on those fields and have to use them directly on the HTML, then most of what you did already works.

Point 1. is still valid, you'll have to call the methods sendvalueintoservice() & sendval(). As you are using | async pipe in HMTL you don't need to subscribe in the component to get the value. Angular will automatically get the data for you and unsubscribe from it when the component is destroyed.

The updated code will look like this

applicants:Observable<Applicant[]>;
staffs:Observable<Staff[]>;

getValue(val: string): void {
   this.trackId = parseInt(val);
   this.applicants = this.sendValueIntoService(this.trackId);
   this.staff = this.sendVal(this.trackId);
}