Angular -> Exporting Value to other Class and Displaying Value on the Website-CodePudding

I want to Export a Value from the CookieService from a Class and import it in antoher class, then i want to Display the Imported Value on my Website. Down below is my Code.

The Cookie Service and the Export i tried:

public login(code: string, state: string) {
    const paramsString = `?code=${code}&state=${state}`;
    this.oAuthService.getToken(paramsString).subscribe((response) => {
      const dateNow = new Date();
      dateNow.setSeconds(dateNow.getSeconds()   720);
      this.cookieService.set("access_token", response.access_token, {expires: dateNow});
      this.cookieService.set("user_info", response.user_info.user_name, {expires: dateNow});
      this.cookieService.set("user_email", response.user_info.email, {expires: dateNow});
      this.cookieService.set("user_id", response.user_info.user_id, {expires: dateNow});
    });
  }
  public setUserName() {
    return this.cookieService.get("user_info");
  }

I tried to Import it by doing this, the Import comes from the Class AppComponent:

readonly random?: AppComponent

And then i tried to display the exportet value on the Website, but that doesent work:

<div class="row">
      <div class="col-sm margin-top-3">
        Order Permissions for {{random.setUserName().toString()}}
        <br>
        <button
          style="width: 10%"
          id="orderSinglePermission"
          class="button button--primary margin-top-3"
        > Order
        </button>
      </div>

CodePudding user response：

I think it's not possible to use function in interpolation in this way, so you can do this in TS file and use value in HTML.

for example:

ts file:

constructor(your service name){}

get userName(){
    return this.serviceName.setUserName();
}

html:

{{userName().toString()}}