Guide on utilizing the "window" attribute within Angular framework

Question

Guide on utilizing the "window" attribute within Angular framework

Recently, I came across a neat "Scroll back to top" button that caught my eye:

https://www.w3schools.com/howto/howto_js_scroll_to_top.asp

Despite being new to Angular, I wanted to give it a try and implement this feature myself. However, every attempt I make results in errors and type mismatches.

This is the code snippet I have been working on:

home.component.html

<div class="country-card-container">
   <button (click)="topFunction()" class="scroll-top">TOP</button>
   <app-country-card *ngFor="let country of displayCountries" [country]="country" class="country-cards"></app-country-card>
</div>

home.component.ts

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.sass']
})
export class HomeComponent {

    mybutton = document.getElementsByClassName("scroll-top");
    
    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = this.scrollFunction();
    
    scrollFunction() {
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        this.mybutton.style.display = "block";
     } else {
        this.mybutton.style.display = "none";
     }
    }
    
    // When the user clicks on the button, scroll to the top of the document
    topFunction() {
      document.body.scrollTop = 0; // For Safari
     document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
    }
}

Encountering these errors has been quite frustrating:

Unexpected keyword or identifier.ts(1434)

Member 'window' implicitly has an 'any' type.ts(7008)

Cannot find name 'scrollFunction'.ts(2304)

Property 'style' does not exist on type 'HTMLCollectionOf<Element>'.ts(2339)

I even attempted moving

window.onscroll = this.scrollFunction();

into the ngOnInit section like so:

ngOnInit(){

    window.onscroll = this.scrollFunction();
}

Unfortunately, that didn't solve the issue either.

If anyone could guide me on the right path for successful implementation, I would greatly appreciate it. What mistakes did I make and how can they be rectified?

javascript angular typescript

Answer 1

Answer №1

Seems like you're encountering an issue where you're attempting to define a window property in your component using the following code:

export class HomeComponent {
  // This code is incorrect because you are trying to declare a class property instead of accessing the window reference
  window.onscroll = this.scrollFunction();
}

In Angular, there is a specific directive designed for this purpose called @HostListener. I suggest exploring this option.

@Component({...})
export class HomeComponent {
  @HostListener('window:scroll', ['$event'])
  onWindowScroll(event: Event) {
    // You can perform desired actions here, including working with the window object since it's accessible in this context
    console.log(window);
  }
}

For more information, refer to the official documentation at: https://angular.io/api/core/HostListener

Best of luck :)

Answer 2

Seems like you're encountering an issue where you're attempting to define a window property in your component using the following code:

export class HomeComponent {
  // This code is incorrect because you are trying to declare a class property instead of accessing the window reference
  window.onscroll = this.scrollFunction();
}

In Angular, there is a specific directive designed for this purpose called @HostListener. I suggest exploring this option.

@Component({...})
export class HomeComponent {
  @HostListener('window:scroll', ['$event'])
  onWindowScroll(event: Event) {
    // You can perform desired actions here, including working with the window object since it's accessible in this context
    console.log(window);
  }
}

For more information, refer to the official documentation at: https://angular.io/api/core/HostListener

Best of luck :)

Guide on utilizing the "window" attribute within Angular framework

Answer №1

Similar questions

Binary stream (byte array) compatible video player for seamless playback

Organize a method's for-loop using JavaScript modules

Selenium is encountering a validation error when selecting a value from a Drop Down menu

Is there a way to save the values of all input fields in a single container using local storage simultaneously?

merge various useState functions for appending values to an array into a unified function in a React component

What is the best way to implement auto-refreshing with reactQuery?

Angular 4 - dealing with request timeouts

Exploring the Power of Jasmine Testing with Ternary Conditions

Node.js now supports ES6 imports using the `--experimental-modules` flag,

Showing the contents of an array which contains arrays

Tips for displaying "No Results" without causing any lag in the browser

Utilizing Firebase objects across multiple files: A comprehensive guide

What is the best way to extract data from a nested array within an array of objects and transfer it to a separate array without altering its nested arrangement?

The request to retrieve data from the model at http://localhost:9000/model/data.json resulted in a 404

Tips for dynamically passing a string into a Javascript function

Waiting for the HTTP response in NodeJS before sending the next request

Is it beneficial to create two distinct node applications—one to serve a webservice and another to consume that webservice in order to display it on a browser?

Integrating a spinner into a React component

Tips for choosing a selection of items using the mouse (such as a calendar date range picker)

How can I configure Express to act as a pass-through proxy server?