I encountered an issue while trying to implement a custom pipe using the built-in pipe

My custom pipe seems to be functioning well, except for the built-in pipes not working within it. I've imported Pipe and can't figure out what could be causing the issue.

Below is the code with the errors:

import { Pipe, PipeTransform } from '@angular/core';
import { Perso } from './perso';

@Pipe({ name: 'startsWithPersoPipe' })
export class StartsWithPersoPipe implements PipeTransform {
  transform(Persos: Perso[], search:string){
    // Ensure Persos has data before proceeding
    if(Persos == null) {
      return null;
    }
    for(let perso of Persos){
      console.log(perso.nom); // works fine
      console.log(perso.nom | lowercase); // ORIGINAL EXCEPTION: ReferenceError: lowercase is not defined
    }
    return Persos.filter(p => (p.nom) && (p.nom).startsWith(search)); // works fine
  }
}

Answer №1

console.log(person.name.toLowerCase()); 

This code snippet is not functioning as expected.

| somePipe

The pipe operator is only supported in templates within binding expressions.

If you want to use pipes in your code, you can do so by injecting the necessary pipe like this:

constructor(private lowercase: LowerCasePipe) {}

console.log(this.lowercase.transform(person.name)); 

Remember, there's no need to import LowerCasePipe

Alternatively, instead of using a pipe, you can directly call the method on the string itself like this:

person.name && person.name.toLowerCase() 

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

Launching Angular 7 on github pages

I am facing an issue with my Angular 7 app that features two routes: the main route and the 'article' route. While the app functions perfectly when tested locally, it fails to load the page's css when deployed on GitHub pages. I followed the ...

Angular2 bootstrapping of multiple components

My query pertains to the following issue raised on Stack Overflow: Error when bootstrapping multiple angular2 modules In my index.html, I have included the code snippet below: <app-header>Loading header...</app-header> <app-root>L ...

Attempting to utilize the setInterval function in Ionic 4 to invoke a specific function every second, unfortunately, the function fails to execute

Working with Ionic 4 has been a breeze for me. Recently, I encountered a situation where I needed to update the value of an ion-range every second by invoking a function. However, despite successfully compiling the code, the changeMark function never seeme ...

Is dynamic routing in Angular 8 only functional when utilizing RouterLink?

While working on dynamic routing in Angular, I ran into a strange issue. Dynamic routes only seem to be functional when accessed through a RouterLink, but the app crashes whenever I try to directly enter the URL in the browser. (The console error message ...

Angular: How to Resolve Validation Error Messages

I have a TypeScript code block: dataxForm: fromGroup this.dataxForm = new FormGroup({ 'Description':new FormControl(null, Validaros.required}; 'Name':new FormControl(null, Validators.required}) Here is an HTML snippet: <mat-divider& ...

Can you merge two TypeScript objects with identical keys but different values?

These TypeScript objects have identical keys but different properties. My goal is to merge the properties from one object onto the other. interface Stat<T, V> { name: string; description: string; formatValue: (params: { value: V; item: T }) =&g ...

Should the token be stored in the browser's sessionStorage?

What is the preferred client-side storage option provided by web browsers? ...

Angular is unable to bind to 'dirUnless' because it is not recognized as a valid property

I am seeking to implement a custom directive that acts as the opposite of *ngIf. Below is the code I have written for this custom directive: import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core'; @Directive({ sele ...

What is the best way to identify property errors in a React/Typescript project using ESLint?

I'm currently in the process of transitioning a Typescript project created with create-react-app to the latest version. As part of this update, I am moving from tslint to eslint which has posed some challenges. The main issue I'm facing is gettin ...

Error encountered in Typescript: The property 'prevUrl' is expected to be present in the props object, but it appears to be missing

When trying to access the props.prevUrl property, the following error is encountered: Property 'prevUrl' does not exist on type '{ nextUrl: string; } | { prevUrl: string; nextUrl: string; } | { prevUrl: string; confirm: () => void; }&apos ...

Type-constrained generic key access for enhanced security

While attempting to create a versatile function that retrieves the value of a boolean property using a type-safe approach, I encountered an issue with the compiler not recognizing the type of my value. type KeyOfType<T, V> = keyof { [P in keyof T a ...

Encountering issues with the command npm install --save web-animations-js, the

Issue encountered while trying to run "npm install --save web-animations-js". It seems like the request to https://registry.npmjs.org/web-animations-js failed due to a mismatch in the Hostname/IP in the certificate. The error message indicates that the Hos ...

Circular dependency has been detected when using the ESLint with TypeORM

Having two entity typeorm with a bi-directional one-to-one relationship: Departament: @Entity('Departament') export default class Departament { @PrimaryGeneratedColumn() id: string; @Column() departament_name: string; @OneToOne(type ...

Provide users with the option to select the email they want to use for signing up while utilizing Angular Firebase's Google signup

My implementation involves using Angular with Firebase for sign up with Google. var result = await this.afAuth.auth.signInWithPopup( new auth.GoogleAuthProvider() ); When I visit my website in Google Chrome while logged into multiple Gmail accounts ...

Angular 8: Issue with setErrors not reflecting on the template when marking a control as invalid

In my component, I am using the following code: this.frmGroup.controls['dorms'].setErrors({'incorrect': true}); For debugging purposes, I have added the following to my template: {{this.frmGroup.controls['dorms'].invali ...

unable to call a function within Angular

To create a dynamic menu, I am utilizing primeng's menu panel. Firstly, I declare my item variable: items: MenuItem[]=[]; I have two JavaScript objects to incorporate into the menu, namely groupsItem and ejsItem. Here is their structure: groupsI ...

Why is it that PowerShell cannot execute Angular commands?

Recently, I started diving into Angular and encountered an issue using PowerShell in Windows. Every time I run an angular command like: ng new new-app or ng serve I keep getting this error message: ng : File C:\Users\< username >\ ...

Unable to call a function without a call signature. The type 'moment' does not have any compatible call signatures at position (4,1). TS2349 error needs resolution

I encountered issues with Typescript 3.* and momentjs when working with dates, resulting in compile time errors. Error:(3, 13) TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'typeof moment' has no compatible call s ...

Using the Ternary Operator in JavaScript to Dynamically Update HTML Elements with Angular

Is there a way to convert the code below into a ternary operator so that it can be used in an .HTML file? statusChange && statusChange === 'Employed' ? true : employmentStatus === 'Employed'; To clarify, I want to assign the re ...

Navigate smoothly through Angular components without any page reloads

Here is a simplified version of my current setup: <app-header></app-header> <app-search></app-search> <router-outlet></router-outlet> <app-footer></app-footer> Within the router-outlet, I have two component ...