I'm having a huge pain with this and I believe there is nothing else I can google.
I've got an input field that when the component loads has a preset value. The value is the name of the group so is different on different groups:
Basically this.el.nativeElement does not exist on load and is in a different lifecycle to ngOnInit. I can resolve this with a setTimeout as this waits for the value to exist, but is a guess.
<input type="text"
id="name"
formControlName="name"
appPlaceholder
required>
I have a Directive which needs to know if there is a preset value on the input. As sometimes there isn't one due to creating a group.
The problem that I am having is I have to use setTimeout to wait 1 second for the component to load the value on NgInit:
setTimeout(() => {
this.activeStateCheck(this.el.nativeElement);
}, 1000);
This isn't really an ideal solution and I would prefer for the attribute directive to wait for the data to be loaded in the input and then run my function.
Things I've looked at:
- I've looked into inputs without much success
I've looked into subscribing to a valueChange but this seems to only happen when the user actually changes the input.
And the setTimeout I've already spoken about.
Also used a lot of the lifeCycle hooks like ngAfterViewInit.
Looking for a good example and an explanation why I need to wait for the data to be shown instead of just getting the nativeElement straight away.
