Angular 2 - Get component instance

Question

I have two components like these:

@Component({
    selector: 'comp1',
    template: `<h1>{{ custom_text }}</h2>`
})
export class Comp1 {
    custom_text:string;
    constructor(text:string) {
        this.custom_text = text;
    }
}

/*********************************************/

@Component({
    selector: 'comp2',
    directives: [Comp1],
    template: `
    <b>Comp 2</b>
    <comp1></comp1>
    `
})
export class Comp2 {
    constructor() {
        // ...
        // How to send my own text to comp1 from comp2
        // ...
    }
}

Is it possible to send my own text from comp1 to comp2?

Is it possible to get the comp1 instance from comp2?

Check this out blog.mgechev.com/2016/01/23/…

TGH
– TGH

2016-02-23 01:18:23 +00:00
Commented Feb 23, 2016 at 1:18 — TGH
– TGH, Commented Feb 23, 2016 at 1:18

Mark Rajcok · Accepted Answer · 2016-02-23 02:09:23Z

5

comp2 is the parent of comp1, so

to send data from child to parent (comp1 to comp2) add an OutputProperty to the child:
@Output() someEvent = newEventEmitter();
and emit() an event on it: this.someEvent.emit('some text');
The parent will need to bind to the output property/event: <comp2 (someEvent)="someHandler()"></comp2>
to get a reference to an instance of a child component (comp2 gets an reference to comp1), use @ViewChild or @Query in comp2: @ViewChild(Comp1) viewChild:comp1; You can then access this.comp1 in ngAfterViewInit(), or later in the component's lifecycle.

answered Feb 23, 2016 at 2:09

Mark Rajcok

365k114 gold badges500 silver badges494 bronze badges

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

1 Comment

C B Over a year ago

I started to think it was an Output case as well but if you look at his code he is trying to do an input case and expressed it wrongly. I like your answer on the emitters but normally I see that Outputs make the component hard to change as we need to maintain the call back contracts, I normally change a change in the backend to save and propagate change but for minimal state data a callback is fine.

C B · Accepted Answer · 2016-02-23 01:27:00Z

Yes it is very easy to accomplish that,

Checkout the Tutorial : MULTIPLE COMPONENTS Part 3 of the Angular2 Tutorials to see how to send inputs.

@Component({
    selector: 'comp1',
    template: `<h1>{{customText}}</h2>`,
    inputs: ['customText']
})
export class Comp1 {
    public customText:string;
    constructor(text:string) {
        this.customText= text;
    }

 // ngOnChange to make sure the component is in sync with inputs changes in parent
 ngOnChanges() {
       this.customText= text;
    }
}

/*********************************************/

@Component({
    selector: 'comp2',
    directives: [Comp1],
    template: `
    <b>Comp 2</b>
    <comp1 customText = "My Custom Test"></comp1>
    `
})
export class Comp2 {
    constructor() {
    }
}

Try it out and let me know how it went.

@Jon..., thanks, yes your original example had the issue. I was wondering/asking why Chibi didn't show a working solution. (So that future readers don't try to cut and paste the solution, only to find out it doesn't work.)

Collectives™ on Stack Overflow

Angular 2 - Get component instance

2 Answers 2

1 Comment

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Related