1

I'm trying to add a preloader in my angular2 app but I'm stuck and can't find a answer on the internet.

I add my preloader component to the main app and an instance is created. Now I'm trying to change my property in the preloader component by injecting the class in my main app and execute the show() method. But as soon as I inject the preloader class I can see that another instance of my preloader is initiated so the execution of the method doesn't change the property of the rendered component.

I created this plunker so you can see my problem.

Heiko
  • 304
  • 1
  • 10
  • SO questions should contain the essential parts of the code related to the question so the question is still valuable for future visitors when the link is broken as it often happens to links. – Günter Zöchbauer Jan 19 '16 at 10:12
  • 1
    We want to see code when looking at the question. External links do not suffice. If you want to increase your chances of getting a good answer, please follow the provided hints. – joepd Jan 19 '16 at 10:13
  • Alright. I'll update my question later :) – Heiko Jan 19 '16 at 10:26

1 Answers1

1

If you want a global service (singleton) only add it to bootstrap(AppComponent, [MySingletonService]) but don't add it anywhere else like @Component({providers: [...]})

In your case this is not sufficient because you want to access a component, singleton like explained above only works for services.

You might want to use an intermediate service or an event bus and communicate using events like explained in Angular2 emit event up to the DOM tree

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • This seems also quite similar to your question http://stackoverflow.com/questions/34572539/how-to-make-a-component-universally-accessible-in-angular2/34572894#34572894 – Günter Zöchbauer Jan 19 '16 at 10:19