How to get Children component like in React's this.props.children in Angular 2?

Question

How can I build a container component which can access child component like React's this.props.children?

You could use `@ViewChildren`: http://stackoverflow.com/a/36018562/5115768 — lenny, Nov 07 '16 at 23:40
@lenny Thanks but I did not quite get it, since what I build is a container component, I did not know what child a user will put inside, how can I access that?(I thought ViewChild is used to refer to a Child which already specified in the template) — Kuan, Nov 08 '16 at 00:10

score 66 · Accepted Answer · answered Nov 11 '16 at 17:10

66

in React you do

const Comp = ({ children }) => (
    <div class="wrapper">{children}</div>
);

in Angular2 you do

@Component({
    selector: 'comp',
    template: `
        <div class="wrapper"><ng-content></ng-content></div>
    `
})
class Comp {}

answered Nov 11 '16 at 17:10

jcperez-ch

score 7 · Answer 2 · answered Nov 08 '16 at 10:47

7

You need to use @ViewChildren inside your component to access children placed inside the component.

Also, you want to decide where children are placed inside your template, you need to place an <ng-content></ng-content> somewhere in your template.

answered Nov 08 '16 at 10:47

Amit

2 Answers2