Angular 4 forwardRef?

Question

I bought an Angular 4 template mostly to see how the layout is being done but includes working components, I noticed they have a bunch of settings in the app component which is mostly for the menu, changing styles, mostly controlling the outer framework.

In the menu component and few other components they are communicating with the AppComponent settings using the following:

constructor(@Inject(forwardRef(() => AppComponent)) public app:AppComponent) {}

and will call something like: this.app.darkMenu = true in the menu component

Is this valid design, good, bad, outdated? I didn't even know you could communicate with the App or parent component like this? Should this be an Observable Subject or EventEmitter instead or is this acceptable to communicate via forwardRef? This seems that is similar in .NET where I could communicate with the MasterPage by using this.master.whateverproperty.

I like how forwardRef works but not sure if I should use it or change it to communicate differently??

I see that you already got an answer, but I thought I'd share this one tho: hackernoon.com/… — AT82
you can read What is forwardRef in Angular and why we need it that explains the matter in details — Max Koretskyi

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2017-07-13T14:51:25

forwardRef is not for communication. forwardRef is to be able to use a type name that is only declared further down in the same file.
If export class AppComponent {} is in a different file, there is no need for forwardRef.
IMHO it's usually better to use a shared service for communication between components that are not direct parent-child.

Angular 4 forwardRef?

1 Answers