QuerySelect Angular Component As MyComponent

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:

1. querySelector always returns Element not MyComponent. can i cast Element to MyComponent?

2. Is MyComponent to <my-component> like DivElement to <div>?

3. 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?

4. 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.

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.