I'm having trouble with Angular pipes in certain areas... but I must say, Stackblitz is truly incredible

Encountering this issue:

ERROR in src\app\shopping-cart-summary\shopping-cart-summary.component.html(15,42): : Property '$' does not exist on type 'ShoppingCartSummaryComponent'.

The error disappears when I remove the currency pipes.

I have experimented with various combinations of pipes recently, including:

'$'
"$"
$
"true"
'true'
true

What could be causing this mistake? 

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Order Summary</h5>
        <p class="card-text">You have {{cart.totalItemsCount }} items in your shopping cart.</p>
        <ul class="list-group list-group-flush">
            <li *ngFor="let item of cart.items" class="list-group-item">
                {{item.quantity}} x {{item.title}}
                <div class="float-right">
                    {{item.totalPrice | currency: "USD": $ }}
                </div>
            </li>
            <li class="list-group-item font-weight-bold">
                Total
                <div class="float-right">
                    {{cart.totalPrice | currency: "USD": $ }}
                </div>
            </li>
        </ul>
    </div>
</div>

I can simply add a $ before these elements. However, I am curious to know the root of the problem!

I am also experiencing strange behavior with these pipes within my data table.

I have applied the same combinations here as well.

<p>
    <a routerLink="/admin/products/new" class="btn btn-primary">New Product</a>
</p>

<p>
    <input #query (keyup)="filter(query.value)" type="text" class="form-control" placeholder="Title Search">
</p>

<data-table [items]="items" [itemCount]="itemCount" (reload)="reloadItems($event)">

    <data-table-column [property]="'title'" [header]="'Title'" [sortable]="true" [resizable]="true">
    </data-table-column>
    <data-table-column [property]="'price'" [header]="'Price'" [sortable]="true" [resizable]="true">
    </data-table-column>
    <ng-template #dataTableCell let-item="item"> {{item.price|currency: 'USD' : '$'}}></ng-template>

    <data-table-column [property]="'$key'" [width]="100">
        <ng-template #dataTableCell let-item="item">
            <a [routerLink]="['/admin/products/', item.$key]">
                    <i class="fa fa-pencil-square-o"
                        aria-hidden="true"></i>
                </a>
        </ng-template>
    </data-table-column>
</data-table>

Required Dependencies:

  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0",
    "@swimlane/ngx-datatable": "^11.1.7",
    "angular5-data-table": "^0.5.1",
    "angularfire2": "^5.0.0-rc.6",
    "bootstrap": "^4.0.0",
    "core-js": "^2.4.1",
    "firebase": "^4.9.1",
    "font-awesome": "^4.7.0",
    "ng2-validation": "^4.2.0",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "^1.7.0",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  },
angulartypescriptasync-awaitpipe

Answer №1

After testing your code, I can confirm that it works perfectly. You can see the live demo here

It's evident from the output below:

{{unitPrice | currency: "USD": $ }}

This results in:

$600.00

Additionally, using 

{{unitPrice | currency: "USD": "$" }}
with "$" or true also displays the correct value.

Make sure to verify your package versions... In the stackblitz example, Angular 5 was utilized and remember that the pipe comes from @angular/common.

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

Ways to implement a component service interface in Angular

My goal is to create a component that enforces certain design guidelines, particularly focusing on the constructor. //cool-header.component.ts @Component({ selector: 'cool-header', moduleId: module.id, templateUrl: './header.compone ...

angular

Utilizing Angular 2's ngModel feature for dynamic objects and properties

Within my TypeScript file, I am dynamically generating properties on the object named selectedValsObj in the following manner: private selectValsObj: any = {}; setSelectedValsObj(sectionsArr) { sectionsArr.forEach(section => { section.questions. ...

angulartypescriptangular2-ngmodel

Transferring dynamic parameters from a hook to setInterval()

I have a hook that tracks a slider. When the user clicks a button, the initial slider value is passed to my setInterval function to execute start() every second. I want the updated sliderValue to be passed as a parameter to update while setInterval() is r ...

javascriptreactjstypescript

Loading Angular 4 Material Tabs when a tab is selected

Can lazy loading be implemented with Angular Material Tabs? If not, I am looking for a solution to execute a method when switching tabs. ...

angularangular-materialangular-material2

How to retrieve an array stored within a JSON object

I am trying to access a specific array within an object from a JSON file. Here is the snippet of the data I'm dealing with: best-sellers": [ { "title": "Chuteira Nike HyperVenomX Proximo II Society", "price": 499.90, "installmen ...

jsonangulartypescript

Unexpected behavior with onKeyPress in React-Native Windows resulting in missing key press events

Currently, I am working on a Windows app using react-native version 0.54.0. For one of the functionalities, I have incorporated a TextInput element and would like to use onKeyPress. Here is my code snippet: <TextInput ref = { this.setTextInputRef } on ...

typescriptreact-native

What is the reason for sending a single file to the server?

A function called "import File" was developed to send multiple files to the server, but only one file is being received. Input: <input type="files" id="files" name="files" multiple onChange={ (e) => this.importFile(e.target.files) } ...

javascriptreactjstypescript

Do Angular FormControl objects have the capability to accept input values of various types, or are they limited to TypeScript primitive types?

When creating a reactive form in Angular using FormControl objects in a FormGroup, I encountered an issue. While passing primitive arguments as values for an HTML input select control works fine, when passing an object of a self-defined class, the value in ...

angulartypescriptangular-reactive-forms

How can I use the target type (and maybe even the property type) as a type parameter within a decorator?

In the process of incorporating a deep-watch property decorator in Angular, the following usage has been implemented: @Component({ /* ... */ }) export class AppComp { @Watch( 'a.b.c', function (last, current, firstChange) { // ca ...

angulartypescriptdecorator

Issue with Angular2 Property Change Notification

I have a directive called app.service.ts that holds the state data of the app. I'm using this directive in other components to access and modify the app state, which is functioning correctly. However, I encounter an error when I attempt to bind a pro ...

angular

Using p5.js with TypeScript and Webpack is not supported

I'm currently working on a library project that involves utilizing p5.js. Specifications Here is a snippet of my Webpack configuration: const path = require('path'); module.exports = { entry: './start.ts', output: { ...

typescriptwebpackp5.js

Place the cursor at the conclusion of the text box

I am working on creating a user input form for chat messaging and I need some help. Here is the HTML-code snippet that I am currently using: HTML-code Currently, when the user presses ENTER, I retrieve the text from the textbox and save it. If the user ...

angularhtmltypescripttextboxchat

What are the steps to achieve complete test coverage for my Angular login form? Encountering an issue with reading property 'subscribe' of undefined

Recently, I made adjustments to my login component to align more closely with Angular standards. However, upon testing, I encountered errors of this kind: Cannot read property 'subscribe' of undefined After using console.log for debugging pur ...

javascriptangulartypescript

Is there a way to handle null return in case the data is not present?

Is there a way to handle situations where the data I pass is empty, like if(!testimonials) return null? Currently, it just shows an empty array. I'm not sure where to implement an "if-else" rule. AboutUs Page export const getServerSideProps = async ( ...

reactjstypescriptnext.js

Exposing the method to the outside world by making it public in

I have a situation where I have a base class with a protected method called foo, and a child class that needs to make this method publicly accessible. Since this method will be called frequently, I am looking for a more efficient solution to avoid unnecess ...

typescript

Obtaining the display name and phone numbers of a contact

Using the Ionic Contacts Native feature, I am able to retrieve a list of contacts from my phone. .ts: import { Contacts } from 'ionic-native'; ///////// export class ContactPage { contactsfound = [] constructor(public navCtrl: NavCont ...

angularionic2

I ran into a SyntaxError: The usage of 'import.meta' outside of a module is not allowed - Nx Monorepo

In setting up an angular nx monorepo, two applications were created. However, when attempting to start either of them, the following error message appears: https://i.stack.imgur.com/YwYzu.png There have been suggestions on stackoverflow advising to add " ...

angularmonoreponrwl

Incorporating a minute interval in Angular Material's time picker feature

In my Angular 15 project, I am working with this material component. <mat-form-field appearance="outline"> <mat-label>{{'DOCTOR_AREA.START_TIME' | translate}} </mat-label> ...

angularangular-materialangular15

Guide to establishing intricate conditions for TypeORM insertion

When attempting to insert data based on a specific condition, such as if shopId = "shopA", I want to include the shopdetail. In order to achieve this, I have implemented the following business logic, which is somewhat complex. Is there a more ef ...

javascripttypescripttypeorm

Encountering issues during the installation of JSNLog

Encountering some challenges with the installation and utilization of jsnlog following the instructions provided on the documentation. Continuously encountering errors when attempting to import or use the library. Attempted importing the library as outlin ...

angularnpmnpm-installjsnlog