CODEWITHSUNDEEP
javascriptangularpolymerdartangular-dart
Kian Cross
Kian Cross

Reputation: 1818

How can I access DOM in AngularDart?

I'm trying to port some JavaScript Polymer elements to AngularDart.

I need to be able to do the equivalent of this.$.contentContainer.getBoundingClientRect(); (for those who aren't familiar with Polymer that is basically component.getElementById("contentContainer").getBoundingClientRect()).

I also need to be able to access the host element to do things such as window.getComputedStyle(this).direction where this is the host element.

How would things like this usually be done in AngularDart?

Upvotes: 1

Views: 1114

Answers (2)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657158

Alternatively you can get a reference to a specific element using @ViewChild()

@Component(
  selector: 'my-component',
  template: '''
<div #contentContainer></div>
'''
)
class MyComponent implements AfterViewInit {
  @ViewChild('contentContainer') HtmlElement cc;

  ngAfterViewInit() {
    cc....
  }
}

See also How can I select an element in a component template? (which applies to Dart with minor changes like types on the right and optional parameters in {})

Upvotes: 2

matanlurey
matanlurey

Reputation: 8614

You can inject an object called ElementRef:

import 'dart:html';

class Comp {
  final ElementRef _elementRef;

  Comp(this._elementRef) {
    final element = _elementRef.nativeElement as Element;
    element.getComputedStyle(); // ...
  }
}

In AngularDart 4.x, we'll allow you to inject Element directly.

Upvotes: 3

Related Questions