Specialized pipe encountering issues with conditional statements that function properly within a function

When using a custom pipe that returns a string based on certain conditions, it seems to always return the first result even when the conditions are not met. However, when the same if/else statements are used in a method, it works fine.

  transform(orderType: String, completed: Boolean, requestType: String): any{
    if (completed && orderType !== 'web') {
      console.log('1');
      return 'not web';
    } else if (completed && orderType === 'web')  {
      console.log('2');
      return 'web';
    } else {
      return 'N/A';
    }
  }

Here is the part where it's being called:

     {{ this.orderType| getOrderType: this.order.requestType: this.completed}} {{this.order.requestType}}

Although the requestType and completed variables are logging correctly in the console, the pipe still returns 'not web' even when it should be 'web'.

Answer №1

Please ensure that the parameters are passed in the correct order. The completed parameter should be passed before the requestType parameter, as you are capturing them in that order in the class.

{{ this.orderType| getOrderType: this.completed:this.order.requestType}} {{this.order.requestType}}

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

When using the `.push` method, the array becomes null

Currently, I am in the process of developing an angular application. Within my component's .ts file, there exists an array structured as follows: public myArray = []; public dataFromAPI = []; In a particular method within this component, whenever I ...

TS2688 Error: Type definition file for 'tooltip.js' not found

Why am I getting an 'undefined' error when trying to import the Tooltip class from the npm tooltip.js package in my TypeScript file? ...

Unexpected errors are encountered when using ng serve

When I run the ng serve command, unexpected errors are occurring on my system. The errors include: PS C:\Users\SAYED-SADAT\Desktop\data\coding\itsm-frontend\itsm-frontend> ng serveYour global Angular CLI version (13.0 ...

Tap into the live monitoring feature of angular-cli build

Is there a way to integrate custom functionality with angular-cli's build/watch command? ng build /w This command creates files and places them in the project's /dist folder I am looking to automatically copy the contents of the dist folder ...

Broaden the current category within the MUI Theme

I am attempting to enhance the current options within MUI's theme palette by adding a couple of properties. Take a look at this example: declare module @material-ui/core/styles/createMuiTheme { interface CustomOptions extends SimplePaletteColorOptio ...

In Express, the async middleware is bypassed, allowing the next route to be executed seamlessly

Currently, I am in the process of developing an application similar to Zotero using express.js, but I have encountered a perplexing issue. Although I cannot pinpoint the exact problem, based on the logs I am receiving, it appears that my middlewares are n ...

Automate the selection of an item in a Primeng Listbox using Angular 2 and PrimeNg

After displaying a list using a PrimeNg Listbox (p-listbox), I needed to monitor the changes in selection by implementing the ngDoCheck lifecycle hook. Specifically, I wanted to detect when the user selected a specific group ("Group0") and then revert the ...

Next.js displays an error when attempting to update the `AuthContextProvider` component while rendering the `Login` component

I have developed a basic next.js application that involves user login functionality through a graphql-api. The login process utilizes the react context-API to update the context once the user successfully logs in. Upon successful login, the intention is to ...

Struggling to establish object notation through parent-child relationships in Angular 2

Hi there, I am new to Angular and JavaScript. Currently, I am working on achieving a specific goal with some data. data = ['middlename.firstname.lastname','firstname.lastname']; During the process, I am looping through the .html usin ...

Creating a Prisma schema with a complex nested structure and incorporating an array of strings for a specific property

I'm trying to create a detailed Prisma schema for a product database that includes nested properties and an array of strings for image content. The structure I'm aiming for looks like this: interface Product { id: number; name: string; ...

Why is it necessary to omit node_modules from webpack configuration?

Check out this webpack configuration file: module.exports = { mode: "development", entry: "./src/index.ts", output: { filename: "bundle.js" }, resolve: { extensions: [".ts"] }, module: { rules: [ { test: /\.ts/ ...

Can TypeScript interfaces be used to achieve the same functionality as an abstract class?

I am currently working on developing a function that will return an array type with custom methods, allowing me to utilize it across various sections of the application. Typically, this is achieved using Abstract Classes where abstract methods are defined ...

Angular nested Tree is not appearing as anticipated

The tree structure I created using Angular Nested Tree component is not displaying the User Interface as expected. The words "fruit" and "vegetables" are overlapping with the text "expand more", making it difficult to read. Can someone help me fix this UI ...

Invoking a function from a collection of mixed data types

I have established a mapping for a discriminated union consisting of different types, each linked to a corresponding function that uses a member of the union as a parameter: export interface Truncate { type: 'truncate' maxLength: number } ex ...

Receive a notification when the div element stops scrolling

I am attempting to replicate Android's expandable toolbar within an Angular component. My HTML code appears as follows: <div (scroll)="someScroll($event)"> <div class="toolbar"></div> <div class="body"></div> </d ...

Oops! An issue has occurred: Control with the specified path (formArray) could not be

I encountered an issue with Angular showing the error message: ERROR Error: Cannot find control with path: 'notes -> 1', 'notes -> 0'. Below is the code snippet from component.html: <div formArrayName="notes"> ...

Exploring the archives of PubNub within Angular5

I've been working on integrating PubNub history into my web app, but I'm currently only able to view it in the console. Here's what I have so far: pubnub.history( { channel: 'jChannel', reverse: false, ...

How can I access a TypeScript variable from a global var set in a .cshtml file?

I have defined several variables in my .cshtml file to be used in my angular services: <script> var _APIURL = '@(Url.Content("~/Admin/api/"))'; var _AREAURL = '@(Url.Content("~/Admin/"))'; var _APPURL = &a ...

Angular 2's latest release, RC.5, introduces an indispensable singleton global shared

I am currently working on implementing global singleton services. I came across this solution - https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module, but unfortunately it is not working for me. Here's a simplified version of my share ...

Following the update, Angular no longer requires any node dependencies

Recently upgraded from Angular 5 to 9 and encountered an error in the browser's devtools: Uncaught ReferenceError: global is not defined After researching, I found a helpful post that discusses the issue: Upgrading to angular-6.x gives "Unca ...