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?

Günter Zöchbauer · Accepted Answer · 2016-06-04 14:55:29Z

3

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

edited Jun 4, 2016 at 14:55

answered Jun 4, 2016 at 14:29

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jan Vladimir Mostert Over a year ago

I guess that's why everybody is using attributes then, the alternatives seem horrible :-|

Günter Zöchbauer Over a year ago

Yup, it's not optimal and I'm sure they will improve it eventually.

Collectives™ on Stack Overflow

Angular2 Dart - Get Text inside Angular2 Component

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related