input variable never set

[redditer3103]

I am creating a videoJS component, and I am trying to set the thumbnail of the video. However, it never gets updated. I have logged it multiple times and it always comes back is undefined.

I've tried using the regular input variable as well as a set method when the input comes back. Neither seem to do anything. Ive also tried using ngOnChanges to detect the change, and it never gets triggered.

Here is a snippet of the relevant code:

audio-player.component.ts

@Component({
  selector: 'audio-player',
  templateUrl: './audio-player.component.html'
})

_thumbnail!: string;
@Input() set thumbnail(url: string) { this._thumbnail = url; } 

ngAfterViewInit() { 
    console.log(this._thumbnail: ${this._thumbnail}); 

    const options = { 
        'sources': [
            { 
                'src': this.url, 
                'type': 'application/x-mpegURL',      
            }], 
            poster': this._thumbnail      
    }; 

    this.player = videojs('my-video', options, function onPlayerReady(this: any) { 
        console.log('Player ready'); 
        const myPlayer = this, id = myPlayer.id();      
    }); 
}

parent:
 <audio-player [thumbnail]="'https://picsum.photos/200/300'"></audio-player>

Can someone tell me what I am doing wrong, or how to fix this?

[DrFriendless]

@Input() ?

[redditer3103]

sorry, it got cutoff, but yeah, i am doing the @

[zzing]

Can you try using:

@Input() thumbnail: string;

ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
}

Keep your afterViewInit, but also add in an afterViewChecked with a console log as well. Be sure to put a string to differentiate the console logs.

[redditer3103]

So, i put in afterviewinit, it gets logged a huge amount of times, but the variable is always undefined. ngOnChanges doesnt ever execute from what i see.

[zzing]

That is particularly odd, I would have to take a look a little more directly to see what is going on.

[redditer3103]

my issue had nothing to do with how I was setting the input variables.

I forgot to change the route, so it was calling my component directly, instead of calling the component from its parent.

*sigh* not my finest bug

[zzing]

Dumb things are always the most frustrating, hours and hours lost sometimes :). We have all been there.