ashen plinth
I have element with an ngIf. In my component I want to interact with that element but it's undefined.
@ViewChild('player', { static: false }) private set player(player: YouTubePlayer) {
if (player) {
console.log(player)
console.log(this.player)
}
}
the set gets called when the #player variable in the template is available and player is also defined, but this.player is undefined.
tender falcon
There is no definition for this.player in your example. Where is it defined and initialized?
ashen plinth
doesn't the private set player define this.player?
same with this
@ViewChild('youtubePlayer') private youtubePlayer!: ElementRef<HTMLElement>;
I can call this.youtubePlayer
tender falcon
That's a setter here
To call it, the proper usage would be this.player(whatever player)
ashen plinth
hm but if I do this.player = player I create a infinite loop
so this.player is defined by the @ViewChild
tender falcon
Because this syntax works for setters.
ashen plinth
alright
tender falcon
Why are you using a setter here?
ashen plinth
i think i got it 🙂 haven't worked with getter/setters
the element #player is on a ngIf, I need to "wait" for it to become available in the template, that's what the set does
@ViewChild('player', { static: false }) private set playerInitial(player: YouTubePlayer) {
if (player) {
this.player = player
}
}
private player?: YouTubePlayer
this seems to work, but feels like a work-around
main pine
I am facing the same issue now, I don't think I like workaround.
I would like to react to a click event from a button that's under an *ngIf and that makes it harder to handle, (because I guess I'll have to handle multiple references since it will set a new one each time. Right ?
if I use fromEvent to handle clicks I'll need to replace the old reference and set a new one....How can I do that ?
sleek path
The "workaround" above doesnt seem like a workaround, but exactly what u need to do in the setter (well I would drop the if condition).
Not sure why you need a setter in this case tho.
sleek path
if I use fromEvent to handle clicks I'll need to replace the old reference and s...
Why would u use fromEvent tho?
Cant u just use (click) on the button?
main pine
Well, I am still trying to grasp how to properly code using declarative code. Since (click) forces me to either mutate subjects or alter component properties. I think it's an anti-pattern in this case, right ?
I am using this in a pagination situation to react to a "next page" button. I would just like to define the click event to increment the page instead of attempting to alter the page value manually
sleek path
Well, I am still trying to grasp how to properly code using declarative code. Si...
I dont think using click is an anti pattern.
I think using fromEvent, when u can use click probably is more of an anti pattern.
Since (click) forces me to either mutate subjects or alter component properties
I have no idea what you mean with this and how fromEvent would solve anything that you cant solve with (click).
Regardless, I think this is a bit offtopic for this thread. I would recommend creating your own.
main pine
Thank you for your answer, Although, I'm quite confused. would you like me to elaborate on my question since you pointed out that my explanation is unclear or leave this thread ?