How can I access DOM in AngularDart?

Question

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?

score 3 · Answer 1 · answered Aug 01 '17 at 01:32

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.

score 2 · Answer 2 · edited Nov 21 '19 at 08:54

2

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 {})

edited Nov 21 '19 at 08:54

Timmmm

88,195
71
364
509

answered Aug 01 '17 at 07:25

Günter Zöchbauer

623,577
216
2,003
1,567

Does this allow you to get the host element too? – Kian Cross Aug 01 '17 at 18:11
If you want the host element, use the method @matanlurey showed – Günter Zöchbauer Aug 01 '17 at 18:14

How can I access DOM in AngularDart?

2 Answers2