CODEWITHSUNDEEP
angular
Amol Borkar
Amol Borkar

Reputation: 2609

Call directive when component is visible

I've created a directive to prevent scroll when certain components are visible (angular 12), here's my code:

import { DOCUMENT } from '@angular/common';
import { Directive, HostListener, Inject, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appRemoveScroll]'
})

export class RemoveScrollDirective {
  constructor(
    @Inject(DOCUMENT) private document: Document,
    private renderer: Renderer2,
  ) { }

  @HostListener('visible', ['$event'])
  toggleNoScroll(visible: boolean) {
    console.log("called", visible)
    if (visible) {
      this.renderer.addClass(this.document.body, 'no-scroll');
    } else {
      this.renderer.removeClass(this.document.body, 'no-scroll');
    }
  }
}

I'm then adding this directive to a component which gets toggled using *ngIf:

<div *ngIf="displayProductLayover" id="product-layover" appRemoveScroll>
  <app-layover [heading]="layoverHeading">
    // More code here

I'm not getting any errors but this is not working, I'm not getting any console statements. What am I doing wrong here?

Upvotes: 1

Views: 870

Answers (1)

Drenai
Drenai

Reputation: 12357

DOM elements like div don't emit a visible event, so @HostListener('visible', ['$event']) won't be called

Upvotes: 1

Related Questions