0

I'm using p3x-angular-compiler plugin and I have a reference variable in my html and I'm trying to get it in component.

HTML - 

<div #scrollMe></div>

ts -

@ViewChild('scrollMe') private chatScrollContainer: ElementRef;

when i console this.chatScrollContainer in ngOnInit i get undefined.

indrajeet
  • 837
  • 10
  • 17
  • If the `div` is inside an `*ngIf` conditional block, you can take a look at [this answer](https://stackoverflow.com/a/51567261/1009922). – ConnorsFan Jun 06 '19 at 18:40
  • I Tried that solution but still it ```this.chatScrollContainer``` is undefined. – indrajeet Jun 06 '19 at 19:08

2 Answers2

0

Try moving your code from ngOnInit to ngAfterViewInit

AC101
  • 851
  • 8
  • 13
  • still it's undefined – indrajeet Jun 06 '19 at 18:22
  • Maybe you have *ngIf in parent elements which is preventing it from rendering in html. I really can't make any better suggestion without seeing your code. If you're using angular 8, you can provide {static: false} as second parameter to @ViewChild() which will auto update reference on re renders of element. – AC101 Jun 06 '19 at 18:44
  • It has to do something with ```p3x-angular-compile``` because if i use normal html template(not dynamic) it works. – indrajeet Jun 06 '19 at 19:05
0

I know this thread is quite old but the reason is that p3x-angular-compile creates a component with a context object inside which contains your variables.

You should prefix your template variables with 'context.':

{{context.foo}}
tannax
  • 36
  • 1