Angular 6: How to access an element from another component

Question

In `footer.component`

signIn() {
    const el = this.elRef.nativeElement.querySelector('.UserTrigger');
    console.log(el); // null
    el.dispatchEvent(new Event('click'));
}

--

<a (click)="signIn()">Sign In</a>

In `header.component.html`

<div #userTrigger class="UserTrigger" (click)="loginModal()">Sign In</div>

Question

In the above I am trying to click the login button in the footer which will trigger the signin modal which lives in the header. I know i can just reference the the modal in the footer but thats not what i want.

How do I access elements from another component?

Have you read the docs regarding component interaction here? angular.io/guide/component-interaction just to know if you have already considered any of the methods described there or if those don't fit your use case — IvanS95
– IvanS95, Commented Nov 2, 2018 at 17:22
This is considered an anti-pattern. It would be better to bubble up an event from the footer to the parent notifying that a sign in event has been triggered and for this parent to interact with the header component to call the loginModal() public method on that component. — Daniel W Strimpel
– Daniel W Strimpel, Commented Nov 2, 2018 at 17:27

nate-kumar · Accepted Answer · 2018-11-02 17:42:59Z

1

Have you considered migrating your login-related events/state into a dedicated service? You can then inject the service into any component which needs to respond to a (click) event and route this into the component in which your modal resides. This decouples the fact that two components which do not share a parent/child relationship need to interact in this way.

answered Nov 2, 2018 at 17:42

nate-kumar

1,7712 gold badges12 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Angular 6: How to access an element from another component

In `footer.component`

In `header.component.html`

Question

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

In footer.component

In header.component.html

Question

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related

In `footer.component`

In `header.component.html`