how to get values from model function and pass the value on url in angular 6

Question

Login.model.ts:

export class Login{
    access_token : string;
    token_type : string;
    expires_in : string;
    refresh_token : string;
    FirstName : string;
    LastName : string;
    Email : string;
    AccountNo : string;
    client_Id : string;
}

This is the login model.After the user login I want to use the AccountNo

Checkout.service.ts:

Login1 : Login[];

  async getAddress() {
            const address = await this.httpClient.get<Customer[]>('http://localhost:49422/api/customer/' +'{{login1.AccountNo}}' +'/profile/', { withCredentials: true })
                .toPromise();
            return address;
        }

I want to use that account no got from login model in this url to get the corresponding customer details.Login and the checkout are totally different component.How to achieve this in angular 6

Possible duplicate of [Angular 2 Sibling Component Communication](https://stackoverflow.com/questions/35884451/angular-2-sibling-component-communication) — Lazar Ljubenović, Aug 30 '18 at 07:54

score 0 · Answer 1 · answered Aug 30 '18 at 09:44

You nee to create a new service to share resources amongst your components and services, this is done via the property called as dependency injection. You can learn more about it here.

Step 1: create a a very basic loginDetail service and import your Login model and create a very basic setData and getData function to accept and return login data.

import { Injectable } from '@angular/core';
import { Login } from './path/to/login.model.ts';

@Injectable({
  providedIn: 'root'
})
export class LoginDetailService {

  loginData: Login;

  setData: void(data: Login) {
    this.loginData = data;
  }

  getData: Login() {
     if (this.loginData) return this.loginData;
     else return {
       error: 'no login data present'
     }
  }

  constructor() { }
}

Step 2: Import this service where you are getting all your tokens and login data. Import Login model and this service.

e.g. that you are having a login service to do the stuff required

import { LoginDetailService } from './path/to/logindetail.service.ts';
import { Login } from './path/to/login.model.ts';
@Injectable({
  providedIn: 'root'
})
export class LoginService {

  loginData: Login;

  login(email, pass): Login {
     //perform login functions here and then i assume you will get the login 
     //data  and store it in some loginData variable which u need to
     //save in LoginDetailService

     this.loginDetailService.setData(loginData);
  }
  constructor(private loginDetailService: LoginDetailService) { }
}

Now you have successfully saved your data in your loginDetailService which can be retrieved from any component or service where you import and call the function getData

Step 3: Import this service in your Checkout.service.ts and call the function getData

 //assuming that u have imported the service and declared it in the constructor
 Login1 : Login = this.loginDetailService.getData();

  async getAddress() {
            const address = await this.httpClient.get<Customer[]>('http://localhost:49422/api/customer/' +Login1.AccountNo+'/profile/', { withCredentials: true })
                .toPromise();
            return address;
        }

Hope this helps. :)

how to get values from model function and pass the value on url in angular 6

1 Answers1