Angular2 : get hold of an element in template of a sibling component from a component

Question

recently started Angular2, came across the below scenario

where need to access the element from a sibling component, but not from Parent Cmp. Thanks for looking at it

Example:

Let's say we have component A and component B which are on same level.
Need the iframe element in templateA in ComponentB to Hide or
delete the element.

index.html

<component-A> </component-A>
<component-B> </component-B>

ComponentA.html

<div>
  <iframe id="someIframe"></iframe>
</div>

ComponentB.html

<div>
   <form id="someForm"></form>
</div>

@component

({
 selector:'component-A',
 templateUrl:'/componentA.html'

})

constructor() {

}

@component

({
 selector:'component-B',
 templateUrl:'/componentB.html'

})

constructor() {
 //need to get hold of the iframe element to hide that.
}

yes you can do it using Input and output function. – thangavel .R Jun 30 '17 at 04:34 — thangavel .R, Jun 30 '17 at 04:34

score 0 · Answer 1 · answered Jun 30 '17 at 04:44

You can use @ViewChild to get ahold of the sibling component. So your Component B class should look something like this;

import {Component,ViewChild,AfterViewInit} from 'angular2/core';
import {ComponentA}         from './componentA';

@Component({
    selector: 'component-B',
    templateUrl: '/componentB.html'
})
export class ComponentB implements AfterViewInit{
    @ViewChild(ComponentA) 
    child:ComponentA; //say get the first instance of ComponentA

    ngAfterViewInit() {
        console.log(this.child); //access the child here
    }
}

Read more about @ViewChild here

score 0 · Answer 2 · answered Jun 30 '17 at 04:45

There are couple of ways you can share data between siblings:

using a shared service: I had asked a similar question a few months back. Take a look here: share data using service
Communicating using parent: You could create a parent component to these siblings and then sibling can communicate using this parent component. So your data transfer would happen as sibling1 -> parent -> sibling2. More details here: Component Interaction

score -1 · Answer 3 · answered Jun 30 '17 at 04:35

I would certainly not want to access the element directly from component B, you'll want to leave them decoupled.

2 possible ways of solving this is:

Using a service which contains a toggle to hide or show the iframe.
Or you could use an event mechanism where you fire an event from component B which component A listens to and it toggles the iframe element accordingly.

Angular2 : get hold of an element in template of a sibling component from a component

3 Answers3