javascript - Auth0 service unable to find container using Angular 2 -

i'm creating angular 2 spa learning purposes , integrating auth0 handeling authentication. have auth.service.ts going called difference places in application, example in top-navbar logout , on auth-page handle logins , registrations.

when trying place auth0 container in div setting container option following error: can't find element id auth-container

how can let auth.service know how/where auth-container div? placing logic inside auth.component.ts assumably not option because auth.service used other functionality in other places lock variable used.

auth.service.ts

import { injectable }      '@angular/core'; import { tokennotexpired } 'angular2-jwt'; import { myconfig }        './auth.config';  declare var auth0lock: any; var options = { container: 'auth-container' };  @injectable() export class auth {      lock = new auth0lock(myconfig.clientid, myconfig.domain, options);      constructor() {         this.lock.on('authenticated', (authresult) => {             localstorage.setitem('id_token', authresult.idtoken);         });     }      public authenticated() {         return tokennotexpired();     };      public logout() {         localstorage.removeitem('id_token');     }; } 

auth.component.ts

constructor(public auth: auth) {     auth.lock.show(); } 

auth.component.html

 <div id="auth-container"></div> 

well did not make life easy mistake made work.

try this:

auth.component.ts

ngoninit() {     this.auth.login()   } 

delete constructor

auth.lock.show();