CODEWITHSUNDEEP
dartcomponentsangular-dart
Slemgrim
Slemgrim

Reputation: 957

how to select light DOM in angular component

I try to select everything inside the content tag in an angular component

<my-component>
  <another-component></another-component>
  <another-component></another-component>
  <another-component></another-component>
</my-component>

my-component.html

<div>
  <content></content>
</div>

my-component.dart 

@Component(
  selector: "my-component",
  templateUrl: 'components/my-component.html',
  useShadowDom: false,
  publishAs: "ctrl"
)
class MyComponent {
   List<Element> content; //elements of content tags
}

How can i select everything inside of and put it into my list. Is there a special method where i can access the content?

Upvotes: 1

Views: 202

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657466

Add a constructor to MyComponent with an argument of type Element and select the children.

class MyComponent {
  List<Element> content; //elements of content tags

  MyComponent(Element e) {
    content = <Element>[].addAll(e.children);
    // or
    content = <Element>[].addAll((e.querySelector('content') as ContentElement).getDistributedNodes());
  }
}

(use with caution, didn't test the code and didn't use Angular.dart for a while)

Upvotes: 1

Related Questions