CODEWITHSUNDEEP
angular
ssougnez
ssougnez

Reputation: 5886

Global component with angular2

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

Upvotes: 3

Views: 839

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658255

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);
    }
}

Upvotes: 4

Related Questions