1

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.

Slemgrim
  • 937
  • 2
  • 8
  • 23

1 Answers1

1

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.

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 1
    I solved it with emit/broadcast like in my other question: http://stackoverflow.com/a/26176002/1310337 Now my components don't know about each other and only communicate over events. That's much simpler and cleaner than selecting the components. – Slemgrim Oct 09 '14 at 06:38