How to find an element in a component?

Question

I am wondering how can I find an element inside a component using Renderer ?

In corner1, I would just go:

link = (scope, element, attributes) => {
            var outsideBox = element.find('.outside-box');
}

What returns me <div class="outside-box"></div>

Any pointers are more than welcome!

Answer 1

I would use his method selectRootElement:

import {Component,Renderer} from 'angular2/core';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <div class="outside-box"></div>
      <div (click)="onClick()">Click</div>
    </div>
  `
})
export class AppComponent {
  constructor(private renderer:Renderer) {
  }

  onClick() {
    var outsideBox = this.renderer.selectRootElement('.outside-box');
  }
}

See this plunkr: https://plnkr.co/edit/9OJ9kr?p=preview

Answer 2

I would use Plunker - BrowserDomAdapter

import {Component,ElementRef} from 'angular2/core';
import {BrowserDomAdapter} from 'angular2/platform/browser';
//import { DOM } from 'angular2/src/platform/dom/dom_adapter';
@Component({
    selector: 'my-app',
    template: `
    <style>
      .test{
        color:green;
        background:white;
      }
    </style>
    <button (click)="add()" class="btnClass">Add New Element</button>
    `
})

export class AppComponent {
 dom:BrowserDomAdapter;
  constructor(el:ElementRef) { 
    this.dom = new BrowserDomAdapter();
    console.log(el);
  }
  add(){

      console.log( this.dom.query(".btnClass"));    
      this.dom.addClass(this.dom.query(".btnClass"),"test");
      console.log(this.el);

  }
}

• https://angular.io/docs/ts/latest/api/platform/browser/BrowserDomAdapter-class.html