title: How do I target an html element in Angular from another sibling component (skip link)?
body: <p>I need to target a nested layout component's element from another sibling component. The desired target element is several layers deep within said component.  I Have a <code>Header</code> Component that is housing a Skip Link <code>&lt;a&gt;&lt;/a&gt;</code>.  Upon selecting the Skip Link I need to send <code>focus</code> to the aforementioned sibling component's <code>#main-content</code> element, which happens to be a <code>&lt;div&gt;&lt;/div&gt;</code>.  How can I achieve this?</p>
  
  <p>I have tried creating a custom attribute directive.  I have tried targeting the element with <code>@ViewChild("main-content")</code>, I can't seem to get the target element to achieve focus, and thus show the border with style changes.  Any Advice is greatly appreciated.</p>
  
  <p><strong>Header Component:</strong></p>
  
  <pre><code>...
  &lt;a [href]="skipLinkPath" class="skip-link" (click)="skipLink()" tabIndex="0"&gt;Skip to Main Content&lt;/a&gt; 
  ...
  </code></pre>
  
  <p><strong>Header Component's TS:</strong></p>
  
  <pre><code>...
  @ViewChild('#mainContent') mainContent: ElementRef;
  
  ...
  
  skipLink() {
    console.log("click event called");
    console.log(this.mainContent);
    this.mainContent.nativeElement.focus();
  } 
  ...
  </code></pre>
  
  <p><strong>Main Component:</strong></p>
  
  <pre><code>  &lt;div class="content-display skip-link-focus" role="main"  id="main-content" #mainContent&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;/div&gt;
  </code></pre>