title: Can I access child elements within a directive in Angular2?
body: <p>I'm trying to create a directive that accepts in input a <code>icon</code> property which would be the icon name. So the directive internally would try to find a <code>span</code> element where it will apply a class. I wonder if this is possible from within the directive applied to the parent. Or do I have to create a directive for the child too?</p>
  
  <p>Here's my HTML code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div sfw-navbar-square sfw-navbar-icon&gt;
    &lt;span class="mdi mdi-magnify"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the directive itself:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Directive, ElementRef, Renderer } from '@angular/core';
  
  @Directive({
    selector: '[sfw-navbar-square]'
  })
  export class NavbarSquareDirective {
  
    // Here I'd like to define a input prop that takes a string    
    constructor(private el: ElementRef, private renderer: Renderer) {
      this.renderer.setElementClass(this.el.nativeElement, 'navbar-square-item', true);
      this.renderer.setElementClass(this.el.nativeElement, 'pointer', true);
      this.renderer.setElementClass(this.el.nativeElement, 'met-blue-hover', true);
      // Here I'd like to pass that string as a class for the span child element. Can I have access to it from here?
    }
  }
  </code></pre>