CODEWITHSUNDEEP
angulartypescriptapi
Alwin
Alwin

Reputation: 15

How to pass component function return value to service in angular

In the following html page i am displaying job details in bootstrap panel from json array using ngFor loop.Each panel displays particular job detail with jobid. Here i have click event.This click event triggers the onclick method in the TS file.

jobseeker.component.html

<div *ngFor='let joblist of joblists?.all_search_view' >
    <a style="text-decoration:none" (click)="onclick(joblist.job_id)" routerLink="/each-job-detail"
    routerLinkActive="router-link-active">
  <div class="panel panel-default">
    <div class="panel-body bg-color" style="margin-left: 5px">
        <h3 style="color: #00a4e0;margin-top: 10px;"> </h3>
        <p style="font-size: 18px">{{joblist.role}}
          <span style="float:right;margin-right: 5px">{{joblist.job_add_date}}</span> </p>
        <div class="row">
          <div class="column">Job Location: {{joblist.location}}</div>
          <div class="column">Job Id: {{joblist.job_id}}</div>
          <div class="column">Salary: {{joblist.salary}}</div>
        </div>
  </div>
  </div>
   </a>
  </div>

jobseeker.component.ts

When i click on the panel this onclick method returns jobid in my console.

    import { Component, OnInit } from '@angular/core';
import { JoblistService } from 'src/app/service/joblist/joblist.service';

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

  public joblists: any = {};
  constructor(private _joblistsService: JoblistService) { }

  ngOnInit() {
    this._joblistsService. getjoblists()
    .subscribe(data => this.joblists = data);
  }
  onclick(jobid: BigInteger) {
  console.log(jobid);
}
}

I want to pass this jobid into one of my following service(ex:id=jobid).Because this jobid will be used in my service url as(this.id).How can i do it.

jobdetails.service.ts

    import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import { Observable, from } from 'rxjs';
import { Jobdetail } from './jobdetail';

@Injectable({
  providedIn: 'root'

})
export class JobdetailService {

  id = jobid;

   private _url: any = 'http://13.126.181.94:8087/job_detail_description.php?job_id='+ this.id + '&action=filter';
   constructor(private http: HttpClient) {
  }
    getjobdetails(): Observable<Jobdetail[]> {
    return this.http.get<Jobdetail[]>(this._url);
  }
}

Thanks in advance.

Upvotes: 0

Views: 531

Answers (2)

Amit Chigadani
Amit Chigadani

Reputation: 29715

If you want to pass the job Id to getjobdetails(); method, then you can pass it as an argument to the function like

job-seeker.component

constructor(private _joblistsService: JoblistService, 
            private _jobDetailService : JobdetailService) { }

onclick(jobid: BigInteger) {
  console.log(jobid);
  this._jobDetailService .getjobdetails(jobid).subscribe().
}

Also modify your JobdetailService service accordingly 

getjobdetails(id): Observable<Jobdetail[]> {
    return this.http.get<Jobdetail[]>(this._url + '/' + id);
}

Upvotes: 2

Shrutika Patil
Shrutika Patil

Reputation: 565

You can also use observable and behavior subject for id field in service. Like this:

service file:

_id: BehaviorSubject<Number> = new BehaviorSubject(Number);

id: Observable<Number> = this._id.asObservable();

private _url: any = 'http://13.126.181.94:8087/job_detail_description.php?job_id='+ this._id.getValue() + '&action=filter';

change the value of id from your component by calling next() function like this:

onclick(jobid: BigInteger) {
  this._joblistsService._id.next(jobid);
}

For more information regarding this approach refer the following:

https://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pitfalls-to-avoid/

Upvotes: 0

Related Questions