How to add class on scroll in Angular

Question

Just learning Angular again. Installed AngularCLI and am trying to add a class on scroll from what I had before using jquery. Do I need to use [ngClass] to check a variable with window location? I am trying to use @HostListener right now.

$(function () {
 $(document).scroll(function () {
   $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
 });
});

$(function() {
 $(document).scroll(function() {
  var x = $(this).scrollTop();
  if (x > 3300) {
    $nav.removeClass('scrolled');
  }
 });
});

Shofol · Accepted Answer · 2019-01-31 04:59:01Z

20

You can do something like this-

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(@Inject(DOCUMENT) private document: Document) { }

  @HostListener('window:scroll', [])
  onWindowScroll() {
    if (document.body.scrollTop > 20 ||     
    document.documentElement.scrollTop > 20) {
      document.getElementById('subTitle').classList.add('red');
      document.getElementById('paragraph').classList.add('green');
    }
  }
  name = 'Angular';
}

See live example here: https://stackblitz.com/edit/angular-changeclassonscroll

answered Jan 31, 2019 at 4:59

Shofol

7331 gold badge11 silver badges26 bronze badges

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

Comments

pistol-pete · Accepted Answer · 2020-10-16 19:29:29Z

8

The above solutions work, but I think it's cleaner and more appropriate to utilize the framework as much as possible.

Typescript file:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

    scrolled: boolean = false;

    @HostListener("window:scroll", [])
    onWindowScroll() {
        this.scrolled = window.scrollY > 0;
    }
}

Html:

<div [ngClass]="{ className: scrolled }"></div>

answered Oct 16, 2020 at 19:29

pistol-pete

1,26118 silver badges14 bronze badges

1 Comment

zagros Over a year ago

this is the correct answer - the document.ElementById pure JS solution is anti pattern eventhough it works

Rajan · Accepted Answer · 2020-04-24 13:08:08Z

0

You can use this code inside the class

@HostListener('window:scroll', [])
onWindowScroll(event: Event) {
    //set up the div "id=nav"
    if (document.body.scrollTop > 3300 ||
        document.documentElement.scrollTop > 3300) {
        document.getElementById('nav').classList.add('scrolled');
    }
    else {
        document.getElementById('nav').classList.remove('scrolled');
        this.innerWidth = 'auto';
    }
}

edited Apr 24, 2020 at 13:08

Rajan

1,5682 gold badges14 silver badges19 bronze badges

answered Apr 24, 2020 at 8:06

Kent Wynn

11 bronze badge

Comments

neel upadhyay · Accepted Answer · 2021-12-16 10:52:23Z

0

add import on your typeScript file on top

{import {Component,HostListener,Directive,HostBinding,Input} from '@angular/core';}

then in app.components.ts for general scroll

add

export class AppComponent {
  title = 'Tour of Heroes';
  scrolled: boolean = false;

  @HostListener("window:scroll", [])
  onWindowScroll() {
      this.scrolled = window.scrollY > 0;
  }
}

then add

[ngClass]="{ 'scroll-add' : scrolled }"

answered Dec 16, 2021 at 10:52

neel upadhyay

3452 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to add class on scroll in Angular

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related