Access inner text of component tags that is not a component or html tag?

Here is an example:

var ListItem = ng.core.Component({
    selector: "item",
    inputs: ["title"],
    template: "<li>{{title}} | <ng-content></ng-content></li>",
}).Class({
    constructor: function(){}
})

var ListOne = ng.core.Component({
    selector: "listone",
    queries: {
        list_items: new ng.core.ContentChildren(ListItem)
    },
    directives: [ListItem],
    template: "<ul><ng-content select='item'></ng-content></ul>"
}).Class({
    constructor: function(){},
    ngAfterContentInit: function(){
        console.log(this.list_items);
    }
})

And then I am using this code to display the components:

<listone>
    <item title="first">first</item>
    <item title="second">second</item>
</listone>

How can ngAfterContentInit of ListOne component access innerHTML of <item> tags?

I want a solution without wrapping the inner text with another tag.

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

This needs a bit support of the ItemComponent:

export class ItemComponent {
  title: 'title';
  constructor(public elementRef:ElementRef){}
}

For the @ContentChildren() we set descendants: true:

export class ListoneComponent {
  @ContentChildren(ItemComponent, {descendants: true}) list_items;

  ngAfterContentInit() {
    this.list_items.toArray().forEach((item) => {
      console.log(item.elementRef.nativeElement.innerHTML);
    })
  }
}

Plunker example

I hope TypeScript code is still helpful, I don’t know how to use Angular with ESx.