Convert integers to decimal numbers using Angular framework

Hello, I've been trying to convert the price integer to a decimal number. For example: 900 should become 9,00 or 950 should become 9,50.

I have tried various methods that I found on this platform, but it always displays as 900 or 900,00 instead of 9,00 like I desire.

Here is my code:

<ul>
    <li><img src={{product.picture}} /></li>
    <li class="padding font">{{product.title}}</li>
    <li class="padding">{{product.price| number :'2.0-2'}} €</li>
</ul>

Right here -> {{...|number : ''}}

<mock.ts>

export const PRODUCTS: IProduct[] = [
  {
    id: 1,
    category: "pizza",
    title: "Pizza Chicken",
    description:
      "Base crème fraîche, mozzarella, poulet fumé et pommes de terre.",
    price: 900,
    picture: "assets/img/pizza-chicken.png",
    includedIngredients: [
      {
.......

I am aiming to format the number as a decimal like this: 9,50

Answer №1

{{product.price/100| currency :'USD' }}

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

Unable to generate paths in Ionic 3

I am trying to view the actual route on the URL, but I'm having trouble figuring out exactly what needs to be changed. I've been referring to the documentation at: https://ionicframework.com/docs/api/navigation/IonicPage/ However, I keep encoun ...

Angular 5 is throwing an error that says: "There is a TypeError and it cannot read the property 'nativeElement' because it

Being aware that I may not be the first to inquire about this issue, I find myself working on an Angular 5 application where I need to programmatically open an accordion. Everything seems to function as expected in stackblitz, but unfortunately, I am enco ...

The 'fullDocument' property is not present in the 'ChangeStreamDropDocument' type

Upon cloning an express TypeScript project, I encountered a Typescript error within a Mongo related function as mentioned in the title. Property 'fullDocument' does not exist on type 'ChangeStreamDocument<IUser>'. Property &apos ...

Angular2: Validating routes with integer parameters

Take this router as an example: { path: '/client', component: ClientRootComponent, children: [ {path: '', component: ClientListComponent}, {path: ':clientId', component: ClientOpenComponent, resolv ...

What is the best way to identify the main dark color in Angular Material, and what other color variables are available for use with Angular Material?

Hey there, I'm trying to figure out how to utilize the primary dark color from angular material. I attempted using color="p-dark" but it doesn't seem to be working. Any ideas on how to access the dark color defined by the material color tool? I w ...

Tips for anticipating a string that begins with a particular variable

One of the challenges I'm facing involves a simple function that creates a string from a complex object. To illustrate, consider the following implementation: public generateMessage(property: string): string { return `${property} more text.`; } ...

The response code in the API remains 200 despite setting the status code to 204 in NestJS

I have developed an API that needs to return a 204 - No Content Response import { Controller, Get, Header, HttpStatus, Req, Res } from '@nestjs/common'; import { Response } from 'express'; @Get("mediation-get-api") @Head ...

Tips for ensuring the alignment of a table header and body once data has been loaded into it

I am currently developing an Angular 7 application where I am trying to populate a table with data retrieved from a web service. However, the issue I am facing is that the headers of the table do not align properly with the body content after loading data ...

The ng-bootstrap typeahead is encountering an error: TypeError - Object(...) is not functioning correctly

Hey there! I'm trying to integrate the Angular Bootstrap typeahead component in my Angular 5 application by following the linkToTypeahead. However, I'm encountering some errors along the way. Here's what I'm seeing: ERROR TypeError: Ob ...

The switch/case statement does not recognize the String constructor

Looking at the code below, the value assigned to targetValueSpecification.type is String under the variable sampleType: const sampleType = String; console.log("Sample type:"); console.log(sampleType); switch (sampleType) { case String: { ...

Utilizing TypeScript Class Inheritance: The Reference to 'super' is Only Allowed in Members of Derived Classes or Object Literal Expressions

We have encountered a scoping issue while using TypeScript classes with inheritance. It seems that TypeScript/JavaScript does not allow us to use 'super' within a promise structure or an enclosed function. The error message we are getting is: Ty ...

Navigating through embedded arrays in Angular

JSON Object const users = [{ "name":"Mark", "age":30, "isActive" : true, "cars":{ Owned : ["Ford", "BMW", "Fiat"], Rented : ["Ford", "BMW", "Fiat" ...

An issue with TypeORM syntax causing errors within a NestJS migration file

I recently encountered an issue while setting up PostgreSQL with NestJS and TypeORM on Heroku. Despite successfully running a migration, my application kept crashing. I attempted various troubleshooting methods by scouring through blogs, GitHub issues, and ...

Excessive whitespace appearing on the right and bottom edges of the Angular application

I'm fairly new to web development, so this may be a silly question, but I really could use some help. I've created my first Angular app and noticed that there is a lot of white space on the right side of the landing page, as well as at the bottom ...

What is the correct way to implement fetch in a React/Redux/TS application?

Currently, I am developing an application using React, Redux, and TypeScript. I have encountered an issue with Promises and TypeScript. Can you assist me in type-defining functions/Promises? An API call returns a list of post IDs like [1, 2, ..., 1000]. I ...

There seems to be an issue with the Angular zone.js and zone-evergreen.js files showing an error that reads:

My Angular 11 app suddenly started showing errors across all browsers and environments (local, staging, prod) about an hour ago without any updates: Uncaught TypeError: t.getElementsByTagName is not a function at computeStackTrace.js:338 at Array.f ...

Example of Using Bluebird in a Chain of Catch and Then Functions

I am struggling to understand how promises work in my code flow setup. I want to create a register function with multiple steps, but I'm unsure of what is achievable and what is not. Imagine I have a register function where I need to: register a u ...

Gathering adorned categorizations (sans any listed category divisions)

My current setup involves an event dispatcher class that triggers listeners on specified occurrences. I've successfully implemented registering event listeners via decorators, but I feel like there may be a better solution out there. At the moment, e ...

What could be causing my application to not locate the jquery module? ERROR: ENOENT: The specified file or directory cannot be found

I've decided to bring over an Angular project that already has a bootstrap template integrated into my own project. (Still unsure if this was the right move) One of the steps I took was adding these lines to the angular.json file: "styles": [ ...

Node.js built-ins require shims, while global variable names are absent

After updating my project using npm-check-updates, I encountered a strange error that stumped me. Despite following the suggested terminal command to install polyfill-node, the issue persisted with no resolution in sight online. The error displayed on the ...