angular2 @ContentChildren with a base class post RC4

Question

With Angular2 RC1 to RC4 if you wanted to get child components which derived from a base class you could do something like:

@Component({    
...
providers: [ provide(BaseComponent,{ useExisting: forwardRef( () => Panel) )}

And your content children property would look like:

@ContentChildren(BaseComponent) allBaseComponents;

I think it was RC5 where 'provide' was depreciated. With 2.0.0 'provide' has been removed. How do we now get child components which have a common base class?

Here is more detail on the RC4 'provide' solution from stackoverflow

You use `providers: [{ provide: BaseComponent, useExistng: }]`, but I don't think that is necessary to be able to use `ContentChildren` — Paul Samsotha, Oct 13 '16 at 23:52
I updated http://stackoverflow.com/questions/36063627/angular2-and-class-inheritance-support?rq=1 — Günter Zöchbauer, Oct 14 '16 at 05:50

score 0 · Answer 1 · answered Oct 14 '16 at 05:49

0

provide(X, { Y }) was replaced with a simple object literal. So instead of calling provide explicitly, just write it like the following:

providers: [
    { provide: BaseComponent, useExisting: forwardRef(() => Panel) }
]

Then, you can still use @ContentChildren with the base component type, just like you are used to.

answered Oct 14 '16 at 05:49

poke

369,085
72
557
602

Thank you! I was close to this, just had the syntax a bit wrong. For the other answer, I had tried doing – user2055119 Oct 14 '16 at 13:54

Baumi · Answer 2 · 2016-10-14T05:51:36.100

-1

What you do is:

@ContentChildren(BaseComponent) allBaseComponents: QueryList<BaseComponent>;

You do not have to provide anything. Notice that allBaseComponents will be available from certain life cycle hook and don't forget to import ContentChildren and QueryList from @angular/core.

edited Oct 14 '16 at 05:51

answered Oct 13 '16 at 22:50

Baumi

1,745
1
17
31

You should not do it in a lifecycle hook at all, it should be at the top of your class. – Chrillewoodz Oct 14 '16 at 05:47
Yes, what I ment was that `allBaseComponents` will be available in certain life hook. In onNgInit it will be null. – Baumi Oct 14 '16 at 05:49

angular2 @ContentChildren with a base class post RC4

2 Answers2