CODEWITHSUNDEEP
angulartypescript
TyForHelpDude
TyForHelpDude

Reputation: 5002

how to access properties of component without inheritance

i need to edit some property of components after login. for example I need to edit message property of HomeComponent and age property of UserComponent so inherit the component class is not an option. How can I achieve this

auth.service

// app/auth.service.ts

import { Injectable }      from '@angular/core';
import { tokenNotExpired } from 'angular2-jwt';

declare var Auth0Lock: any;

@Injectable()
export class Auth {
  lock = new Auth0Lock('asdsd', 'mehmetyeneryilmaz.eu.auth0.com', {});

  constructor() {
    this.lock.on("authenticated", (authResult) => {
      localStorage.setItem('id_token', authResult.idToken);
    });
  }

  public login() {
    this.lock.show();
  }

  public authenticated() {
    return tokenNotExpired();
  }

  public logout() {
    localStorage.removeItem('id_token');
  }
}

Upvotes: 1

Views: 144

Answers (1)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657416

Use a shared service with observables and subscribe to changes:

import { Injectable }      from '@angular/core';
import { tokenNotExpired } from 'angular2-jwt';

declare var Auth0Lock: any;

@Injectable()
export class Auth {
  lock = new Auth0Lock('asdsd', 'mehmetyeneryilmaz.eu.auth0.com', {});

  private message = new BehaviorSubject<string>(null);
  public $message = this.message.asObservable(); 

  constructor() {
    this.lock.on("authenticated", (authResult) => {
      localStorage.setItem('id_token', authResult.idToken);
    });
  }

  public login() {
    this.lock.show();
    this.message.next('checking authentication');
  }

  public authenticated() {
    return tokenNotExpired();
  }

  public logout() {
    localStorage.removeItem('id_token');
    this.message.next('successfully logged in');
  }
}

class HomeComponent {
  constructor(auth:Auth) { 
    auth.$message.subscribe(msg => this.message = msg);
  }

}

Upvotes: 3

Related Questions