CODEWITHSUNDEEP
angulartypescriptangular6angular-services
PGH
PGH

Reputation: 2204

To get api data based on the id

Scenario:

I have an api :

https://................../api/branches

As in the api /branches means the api as multiple branches with unique ID .Each branch will have it's own contacts.

Now i am calling one particular branch contacts by mentioning the particular branch ID(i,e 8f00752-cdc6) like this:

customers.services.ts file

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
import { IBranch, IContact } from 'src/app/models/app.models';

@Injectable({
  providedIn: 'root',
})

export class CustomersService {
 private  baseUrl : string = 'https://................../api/';
 constructor(private http: HttpClient) {
  }

 public getBranchesInfo(branchId : string): Promise<IBranch> {
  const apiUrl: string = 'https://................../api/branches/';
  return this.http.get<IBranch>(apiUrl + branchId).toPromise();
 }

  public async getContactList(branchId: string): Promise<IContact[]> <=======
  {
    const apiUrl: string = `${this.baseUrl}branches/${'8f00752-cdc6'}/contacts`;
    return this.http.get<IContact[]>(apiUrl).toPromise();
  }

}

And to disaply the contacts i am calling getContactList method in another component called contacts like this:

import { Component, Input, OnInit } from '@angular/core';
import {  IContact } from 'src/app/models/app.models';
import { CustomersService } from 'src/app/services/customers.service';
@Component({
  selector: 'asw-contacts',
  templateUrl: './contacts.component.html',
  styleUrls: ['./contacts.component.css'],
})
export class ContactsComponent  {
  public contacts: IContact[];

  constructor(public customersService: CustomersService) {} 

  public async ngOnInit(): Promise<void> {
    this.contacts = await this.customersService.getContactList('');
    console.log(this.contacts);
  }


}

Here i can log and see the contacts of that mentioned branch(i,e 8f00752-cdc6)

Requirement: Instead of hard coding branch ID(i,e 8f00752-cdc6) in customers.services.ts file and getting only that mentioned branch(i,e 8f00752-cdc6) contacts, I want get contacts of branch based on which branch i selected from the dropdown

For this i have another component called branch where i am calling all the branches and displaying in the dropdown like this :

enter image description here

branch component code:

HTML

<mat-form-field>
  <mat-select placeholder="Select Branch">
    <mat-option *ngFor="let branch of branches" [value]="branch.id">
      {{branch.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

TS

import { Component, OnInit } from '@angular/core';
import { CustomersService } from 'src/app/services/customers.service';
import { IBranch } from 'src/app/models/app.models';

@Component({
  selector: 'asw-branch',
  templateUrl: './branch.component.html',
  styleUrls: ['./branch.component.css']
})
export class BranchComponent implements OnInit {
 public branches: IBranch[];

  constructor(public customersService: CustomersService) {} 

 public async ngOnInit(): Promise<void> {
    this.branches = await this.customersService.getBranchesInfo('');
  }

}

How can i pass the branch id after selecting from the dropdown present in branch component to the method i,e:

public async getContactList(branchId: string): Promise<IContact[]>{
   const apiUrl: string = `${this.baseUrl}branches/${'id'}/contacts`;<=======
        return this.http.get<IContact[]>(apiUrl).toPromise();
 }

in customers-services.ts file?

Upvotes: 2

Views: 766

Answers (1)

federico scamuzzi
federico scamuzzi

Reputation: 3778

try somehting like this:

put (onSelectionChange) event on your mat option

<mat-form-field>
  <mat-select placeholder="Select Branch">
    <mat-option *ngFor="let branch of branches" [value]="branch.id"  (onSelectionChange)="selected($event, branch.id)">
      {{branch.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

then in your component ts:

async selected(event: MatOptionSelectionChange, id: string) {
    if (event.source.selected && id) {
      console.log(id);
      this.result= await this._productService.getContactList(id);
    }
  }

and in your service.ts

  public async getContactList(businessId : string): Promise<IContact[]>{
       const apiUrl: string = `${this.baseUrl}branches/${businessId}/contacts`;<=======
            return this.http.get<IContact[]>(apiUrl).toPromise();
     }

Hope this help you!!

Upvotes: 2

Related Questions