Declare View child conditionally

Question

I have input box inside two divs that render conditionally.

html

<div ngIf="show==true">
<input #ref />
</div>

<div ngIf="show==true">
<input #ref />
</div>

.ts

@ViewChild('ref ') ref : ElementRef;

ngOnInit(){

 if(someCondition){
  show = true;
 }

Observable.fromEvent(this.ref .nativeElement, 'keyup');
}

It shows the undefind ref as ref variable declared before ngOnInit

I believe we cannot initialize viewchild later,

What could be alternate solution.

Thanks

https://stackoverflow.com/questions/40165294/access-multiple-viewchildren-using-viewchild — Xesenix, Jul 22 '19 at 08:59
You have two different DOM elements rendered conditionally. What is the need of accessing the with a common reference ? — Saurabh Tiwari, Jul 22 '19 at 08:59

score 2 · Accepted Answer · answered Jul 22 '19 at 09:03

you need to access that viewchild component like as below. Means you have to make use of "ngAfterViewInit" (implement AfterViewInit ), as child component doesnt get avaiable when "ngOnit" runs

  @ViewChild('ref ') ref : ElementRef;

  ngAfterViewInit() {
    console.log('Values on ngAfterViewInit():');
    console.log("ref:", this.ref);
  }

Declare View child conditionally

1 Answers1