Angular videogular - hide navbar onHide controls

Question

Using videogular component i am trying to figure out a way how to hide my navbar when the vgControls are hidden using vgAutohide.

    <vg-controls [vgAutohide]="true" [vgAutohideTime]="1.5">

Is there any easy way how to listen to this change?

I was trying to get the information from VgControlsHiddenService but was not successfull

      console.log(this.controlsHidden.isHidden.subscribe(this.onHideControls.bind(this)));

Answer 1

I also tried with VgControlsHiddenService and it wouldn't work. I guess it is used for hidding the controls manually.

My solution for this problem was to use MutationObserver for checking when the hide class is added to vg-controls element.

This is my code:

 ngAfterViewInit() {
    const node = document.querySelector('vg-controls');
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        const target  = mutation.target as HTMLElement;

        if (mutation.attributeName === 'class') 
            this.isVgControlsHidden = target.classList.contains('hide');
      });
    });
    
    observer.observe(node, {
        attributes: true
    });
}

Answer 2

try to use this logic

<vg-controls #ref [vgAutohide]="true" [vgAutohideTime]="1.5">

in ts file :

 hide=false //show hide the navbar

@ViewChild('ref') ref

ngAfterViewInit(){

//get the value from ref 
//this.hide =true or what you want

}