Angular Directive to add class to component on scroll?

Question

In my older AngularJS app, we made a directive to add and remove a class to an element based on scroll position:

(function () {
  'use strict';

  angular.module('pb.ds.components').directive('pbdsHeaderShadow', function ($window) {
    return {
      restrict: 'AE',
      link: function postLink (scope, element) {

        angular.element($window).on('scroll', function () {
          if (this.pageYOffset > 20) {
            element.addClass('shadow');
          } else {
            element.removeClass('shadow');
          }
        });
      }
    };
  });
})();

What's the Angular (6) way to create this same directive?

It would be alot easier to show you if you gave the angular 6 component you're working on as well. Simply put, you bind the class you want to be optional to a function. <div [class.somthing]="checkSomething()"></div>. To listen for scroll events, see this — fredrik
– fredrik, Commented May 31, 2018 at 17:40
Possible duplicate of Tracking scroll position and notifying other components about it — fredrik
– fredrik, Commented May 31, 2018 at 17:40

MichaelSolati · Accepted Answer · 2018-05-31 17:49:01Z

1

Throwing together a little stab in the dark...

@Directive({
  selector: '[pbdsHeaderShadow]',
})
export class HeaderShadowDirective implements OnInit, OnDestroy {
  @HostBinding('class.shadow') shadow: boolean;

  constructor() { }

  ngOnInit() {
    if (typeof window !== undefined) {
      window.addEventListener('scroll', () => this._checkScroll());
    }

  }

  ngOnDestroy() {
    if (typeof window !== undefined) {
      window.removeEventListener('scroll', () => this._checkScroll());
    }
  }

  private _checkScroll() {
    if (typeof window !== undefined) {
      this.shadow = (window.pageYOffset > 20);
    }
  }
}

answered May 31, 2018 at 17:49

MichaelSolati

2,8721 gold badge19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Steve Over a year ago

Nice. That's far simpler than what we were starting to do. Thanks.

MichaelSolati Over a year ago

Well hopefully that actually works, 😅. If it does let me know!

Collectives™ on Stack Overflow

Angular Directive to add class to component on scroll?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related