Can I access child elements within a directive in Angular2?

Question

I'm trying to create a directive that accepts in input a icon property which would be the icon name. So the directive internally would try to find a span 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?

Here's my HTML code:

<div sfw-navbar-square sfw-navbar-icon>
  <span class="mdi mdi-magnify"></span>
</div>

Here's the directive itself:

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?
  }
}

Answer 1

You can just use an input as you normally would. DOM manipulation would normally be done in the ngAfterViewInit when all views are initialized, but it will probably also work in the ngOnInit as the icon property will be set and you don't have any ViewChildren you try to access.

HTML:

<div sfw-navbar-square [sfwNavbarIcon]="'my-icon'">
  <span class="mdi mdi-magnify"></span>
</div>

Here's the directive itself (Angular 4):

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[sfw-navbar-square]'
})
export class NavbarSquareDirective {

  @Input('sfwNavbarIcon') icon:string;

  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.renderer.addClass(this.el.nativeElement, 'navbar-square-item');
    this.renderer.addClass(this.el.nativeElement, 'pointer');
    this.renderer.addClass(this.el.nativeElement, 'met-blue-hover');
  }

  ngAfterViewInit() {
    let span = this.el.nativeElement.querySelector('span');
    this.renderer.addClass(span, this.icon);
  }
}

Answer 2

 @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);
        let firstChild = this.el.nativeElement.childNodes[0];
         firstChild.className  = '';

    }
}



<div sfw-navbar-square prop="some string" sfw-navbar-icon>
    <span class="mdi mdi-magnify"></span>
</div>