Angular2 Dart - Get Text inside Angular2 Component

Question

I've got an item component which I use inside other components, the item component typically looks like this:

<item type="the-type" text="the-text"></item>

and is defined like this:

@Component(
    selector: 'item',
    template: '...')
class Item {

    @Input() String text = "text-goes-here";    
    @Input() String type = "type-goes-here";

}

Now I want to change the item so that it has a more natural feel to it:

<item type="the-type">the-text</item>

Now I want to get the text the-text from this component.

I change the item component to implement AfterContentInit to see if I can somehow capture the text and then use @ContentChild(String) to get the String content of the item component, but it doesn't seem to work ...

@Component(
    selector: 'item',
    //providers: const[String],
    template: '')
class Item implements AfterContentInit {

    @ContentChild(String) String text;
    @Input() String type = "type-goes-here";

    @override
    ngAfterContentInit() {
        print("ngAfterContentInit: " + text);
    }

}

This gives me a giant stacktrace; @ContentChild doesn't seem like the right solution here since it's probably expecting another @Component instead of a String

All the Angular examples I can find in the docs are using attributes to pass on values and mostly leaves the content part empty and those that does make use of child components, make use of a proper @Component child component.

Is it possible to get the-text out of <item>the-text</item> and if so, how should it be done?

Answer 1

With @ContentChild() or @ContentChildren() you can only query for components and directives by passing the type of these components or directives as parameter or you can query for template variables.

If you have

<item type="the-type">
  <div #someVar>the-text<div>
</item>`

then you can query for the div with

@ContentChild('someVar') ElementRef someVar;

If you don't want the user of your component to require to wrap the content with an element and add a specific template variable you can use a wrapper element around <ng-content>

@Component(
    selector: 'item',
    //providers: const[String],
    template: '<div #wrapper><ng-content></ng-content></div>')
class Item implements AfterContentInit {

    @ViewChild('wrapper') ElementRef wrapper;
    @Input() String type = "type-goes-here";

    @override
    ngAfterContentInit() {
        print(wrapper.innerHtml); // or `wrapper.text`
    }
}

Not sure yet if this issue will make this easier https://github.com/angular/angular/issues/8563