Global component with angular2

Question

Is it possible to add a component in the root component template and being able to access it from a child component. For example, imagine this is the root app component:

<main>
   <global-component #globalComponent></global-component>
   <child-component></child-component>
</main>

What I would like is, in the code of "child-component", being able to do something like this:

@Component({...})
export class ChildComponent
{
    @SomethingAwesome(GlobalComponent) globalComponent: GlobalComponent;
}

The goal is to be able to display errors/warning always in the same way. The "GlobalComponent" template would be a modal message and I want to be able to display it whenever I want. For example:

...
this.globalComponent.ShowError("Something's weird in here !");
...

The alternative (I guess) I have in mind is creating a service with an observable that "GlobalComponent" would subscribed to and react accordingly but I'm wondering if what I asked is possible.

Edit:

In the example, components are siblings but it might not always be the case. "GlobalComponent" should be available in any component, whatever its "deepness".

Thanks

Günter Zöchbauer · Accepted Answer · 2016-12-07 16:01:02Z

4

If they are siblings, you can just pass it in

<main>
   <global-component #globalComponent></global-component>
   <child-component [global]="globalComponent"></child-component>
</main>

@Component({...})
export class ChildComponent
{
    @Input() global: GlobalComponent;

    ngOnInit() {
      console.log(this.global);
    }
}

edited Dec 7, 2016 at 16:01

answered Dec 7, 2016 at 15:59

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ssougnez Over a year ago

They are siblings in my example but the goal is to be able to access "globalComponent" from any component. Sibling or not. Sorry if it was not clear.

Günter Zöchbauer Over a year ago

Then you need a shared service. The GlobalComponent can inject the shared service and register itself with the service and other components that access the same service can access GlobalComponent there. A better option is to have an Observable in the shared service and use that to communicate between components. One is the subscriber, the other the emitter.

Günter Zöchbauer Over a year ago

See also angular.io/docs/ts/latest/cookbook/…

ssougnez Over a year ago

Mmmmh, that's what I thought... Ok, I'll do it that way then. Thanks.

ssougnez Over a year ago

I just did it and it works. I marked the initial answer as accepted even though it's more the one in comment that solved my issue. Thanks

Collectives™ on Stack Overflow

Global component with angular2

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related