How to pass component reference in Input with *ngIf Angular2

Question

I have 2 sibling components in Angular2:

<test1 *ngIf="data"  [data] = "makes" #test1R></formModel>
<testing *ngIf="data" [test1Ref]="test1R"></testing>

Component "Testing" has a function that call a function of test1 Component:

export class Testing{

    @Input() test1Ref: test1Component;
    constructor() { }

    testFunction($event){
        this.test1Ref.hello();
    }

My problem is that this.test1Ref is undefined, because test1 component has *ngIf (<test1 *ngIf="data") ,
but without *ngIf I have an error in test1 component for input value ([data] = "makes").
How can I pass component reference with *ngIf

williamsandonz · Accepted Answer · 2016-12-13 21:03:13Z

2

In short, you can't. You'll have to hide the component if !data , that way your local variable #test1R will still be set.

<test1 [hidden]="!data" [data]="makes" #test1R></test1>

Then null check inside test1 in ngOnInit() to avoid the exception.

If you can only execute certain code once data is set, do it like this:

Declare data as an Input inside your test1 component:

export class Test1 {
  @Input() data: any;
}

By declaring it as an @Input everytime the value changes, Angular will call ngOnChanges, so now you can do this:

ngOnChanges(changes: SimpleChanges) {
  if(changes['data'] && changes['data'].currentValue) {
    //Do something once data is set.
  }
}

edited Dec 13, 2016 at 21:03

answered Dec 13, 2016 at 20:22

williamsandonz

16.6k23 gold badges108 silver badges191 bronze badges

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

3 Comments

LorenzoBerti Over a year ago

Oh, I understand, I don't like because if I retrieve data with async call , check if data exists in ngInit is always useless..so I have to handle some event?

williamsandonz Over a year ago

Updated answer to show how to handle null checking for async.

williamsandonz Over a year ago

No probs :-) have fun!

Collectives™ on Stack Overflow

How to pass component reference in Input with *ngIf Angular2

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related