The function toFixed() in Ionic 3 is unavailable

I have a simple question that I haven't been able to find a clear answer to. What I'm trying to do is calculate 20% of the total scrollHeight and subtract it from the total scroll height.

This is the code I am using:

In my condition, I check if the sum of 

ev.target.offsetHeight + ev.target.scrollTop
is greater than or equal to 
ev.target.scrollHeight - (parseFloat(ev.target.scrolllHeight).toFixed(2) * 0.2)
. If it is, then I do something inside the condition.

The error message says that toFixed is not a function because the left-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type.

I attempted to use 

parseFloat((ev.target.scrolllHeight: number)).toFixed(2)
, but it did not work.

If anyone can provide some guidance, I would greatly appreciate it. Thank you in advance.

angulartypescriptionic3

Answer №1

Concentrating on 

parseFloat(ev.target.scrolllHeight)
could lead to an error since scrollHeight is already a numeric value. The parseFloat method expects a string input.

Solution

ev.target.scrolllHeight.toFixed(2)
should work without any issues.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Firebase data not appearing on screen despite using the async pipe for observables

My current challenge involves accessing data based on an id from Firebase, which comes back as an observable. Upon logging it to the console, I can confirm that the Observable is present. However, the issue arises when attempting to display this data on th ...

angulartypescriptfirebaseobservable

Injecting services with an abstract class is a common practice in Angular library modules

In my development workflow, I have established an Angular Component Library that I deploy using NPM (via Nexus) to various similar projects. This library includes a PageComponent, which contains a FooterComponent and a NavbarComponent. Within the NavbarCom ...

angulartypescript

The attribute 'positive_rule' is not found within the structure '{ addMore(): void; remove(index: any): void;'

data() { return { positive_rule: [ { positive_rule: "", }, ], }; }, methods: { addMore() { this.positive_rule.push({ positive_rule: "", }); }, ...

javascripttypescriptvue.jsfrontendvue-component

Issues encountered following the migration to Angular 16

After updating my Angular packages to version 16, I noticed a significant change. The Angular 16 devkit has moved from Webpack to Vite. Surprisingly, we haven't made any changes to the tsconfig file or other build configuration files. However, every ...

angularwebpackvite

The licensed Angular Google Map component is failing to display the map

I've been experimenting with the new Google Map component developed by the Angular Team (from the package @angular/google-maps) with the help of this insightful tutorial. Unfortunately, I'm facing an issue where the map isn't being displaye ...

javascriptangulargoogle-maps

Tips for utilizing $rootScope define within one angular service in another service with typescript

Within a service class, I have initialized a $rootScope in the constructor and assigned a property to it using this.$rootScope. However, when attempting to access this property in another service within the same class, a new $rootScope is created and the p ...

javascriptangularjstypescripttypescript1.5

Utilize Observables to track changes in Ionic 2 form input elements

Is there a way to create an Observable from an Ionic 2 form element without directly accessing the DOM? While the Observable.fromEvent function is useful for events, I have the form element reference from the FormBuilder service, not the actual element it ...

angulartypescriptionic2

Retrieve a static property from a specific type

I've encountered a dilemma with the code snippet below: class Action { public static DEPENDENCIES: (typeof Action)[] = []; public static MIN_USES: number | null = null; public static MAX_USES: number | null = null; } class SomeAction ext ...

typescript

The reason for the error message "Error: Cannot find module '@nx/nx-darwin-arm64'" occurring during an npm install in an Angular project is due to

I recently cloned an Angular Project on my MacBook (M1 Pro Chip) and I tried running npm install but encountered the following error: Error: Cannot find module '@nx/nx-darwin-arm64'. This is the error message I received. npm ERR! code 1 npm ERR! ...

node.jsangularnpmnpm-install

Troubles with using the Map function on JSON objects in ReactJS

I am currently working with React using TypeScript. I have an external JSON file that contains data needed to generate elements on the front end. There is also a button, and I want the elements to be created only when the user enables this button. However, ...

javascriptreactjstypescriptarrow-functions

Retrieve component information from the service

Incorporated within my component is a form that I'm utilizing with reactive form and my intention is to reach this form through my service. For example: const id = MyComponent.id and inside my component: @Output: public id: number = 7; ...

angulartypescript

Error encountered when running Angular 11 with SSR using @nguniversal/express-engine: "ReferenceError: globalThis is not defined"

Encountering issues while attempting to integrate @angular/fire with Angular 11 and @nguniversal/express-engine for server-side rendering (SSR). Upon initializing AngularFireModule in app.module.ts, errors arise when running the commands npm run dev:ssr or ...

angularfirebaseangularfire2

Combine the AnimatedMarker from leafletjs with typescript

After installing leaflet typescript, I encountered issues when trying to use leaflet non-typescript plugins. For instance, I had no problem importing the leaflet-routing-machine plugin by following these steps: installation: npm install --save leaflet-ro ...

angulartypescriptleaflet

Configuring webpack for Angular 2 in order to generate bundles as files rather than keeping them in memory

Currently, I am utilizing Angular2 with Webpack, following the setup outlined in the Angular2 webpack introduction. When I run the webpack dev server, it bundles my typescript files and instantly loads them in the browser from memory. However, I require ...

iisangularwebpackwindows-authentication

Organize the menu in Angular by sorting it alphabetically

I am currently exploring a way to organize the buttons inside the menu in alphabetical order using a function in the TypeScript file. Please see the code snippet below, which utilizes Angular Material. <mat-menu #menu3="matMenu" [overlapTrig ...

javascripthtmlangulartypescript

What is the trick to concealing unused elements using ngFor in Ionic?

I've been attempting to hide unused items from ngFor, and I've managed to successfully hide them. However, the issue is that even though they are hidden, their space still exists and is empty, as shown in the image below: https://i.sstatic.net/b ...

angularionic-frameworkangular-templateangular-ngfor

How should JSON files stored on the server side be properly utilized in Next.js?

Currently, I have a collection of JSON files that I expose through an API endpoint on my web application for global access. This allows different parts of the application to retrieve the data by sending a fetch request to itself... However, since this inf ...

typescriptnext.js

Ways to set a default value for Subject RxJS observable

Currently working on developing an Angular 2 application where I need to enable the reordering of columns in a List by clicking on the title, similar to how data-tables work. I came across some examples in the Angularfire 2 documentation which gave me an i ...

angularfirebasefirebase-realtime-databaserxjsangularfire2

Having difficulty utilizing defineProps in TypeScript

For some time now, I've been utilizing withDefaults and defineProps. Unfortunately, this setup has recently started failing, leaving me puzzled as to why! Here's a simple SFC example: <script setup lang = "ts"> const props ...

typescriptvue.js

transmit information from the current state to a fresh task within an rxjs effect

My goal is to access state data and use it as properties for a new action. I successfully extracted the necessary data from the state after triggering the effect, but I am facing an issue when dispatching the new action with the data. It seems that I am un ...

typescriptrxjsngrx