querySelect angular component as MyComponent

Question

I have an angular component

<my-component foo="" bar=""></my-component>

And its corresponding class MyComponent

I use this component in my html

<my-component foo="bar" bar="foo"></my-component>
<my-component foo="baz" bar="qux"></my-component>
<my-component foo="bar" bar="baz"></my-component>

Now i want to querySelect my custom elements and access their attributes directly. I think about something like this:

List<MyComponent> mys = querySelector('my-component');

mys.forEach((my){
  print(my.foo);
  my.bar = '1234';
});

There are a view problems with that code:

querySelector always returns Element not MyComponent. can i cast Element to MyComponent?
Is MyComponent to <my-component> like DivElement to <div>?
querySelector cannot select custom elements. i could ad a class to every my-component and select it with that class. or is there another way?
I only can access the attributes with my.getAttribute() not with my.foo. I know, this is because my is still a Element not a MyComponent.

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2014-10-08T20:06:04

This is not officially supported. There was something like ng-element that allowed this as far as I remember but was intended to be only used for unit tests. There were some changes in the last versions but I don't know the current state.

You should pass references using dependency injection, Angular events (explained here How to communicate between Angular DART controllers) or the scope to access other elements.

querySelect angular component as MyComponent

1 Answers