Utilizing Angular 2 to Pass an Argument to a Custom Pipe

I've developed a custom pipe that can accept 2 arguments, but I'm unsure of how to pass them.

Here's the code for my pipe:

export class TranslationPipe implements PipeTransform {

    private capitalize: boolean;

    constructor(
        private translationService: TranslationService
    ) {
        this.capitalize = true;
    }

    transform(key: string, capitalize?: boolean): string {
        if (typeof capitalize !== "undefined" || capitalize !== null)
            this.capitalize = capitalize;

        return this.translationService.getTranslation(key, this.capitalize);
    }
}

and here is the snippet from my HTML file:

{{ 'searchquery' | translate }}

The current setup works fine, but how can I also send capitlize = false? I've tried searching online, but I couldn't find any examples that match my specific implementation (perhaps I'm missing something?)

Appreciate your assistance!

Answer №1

{{ 'searchterm' | translate:false }}

{{ 'searchterm' | translate:'convertToUS' }}

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

"Unfortunately, Azure Web Static Apps do not have the capability to access .env files that are prefixed with NEXT

Suppose I have an .env file set up like this: NEXT_PUBLIC_API_BASE_PATH = value1 While this .env is functioning correctly in my local environment, once deployed to Azure Web Static Apps and added to the configurationhttps://i.sstatic.net/eqiYn.png My app ...

Using TypeScript with Redux for Form Validation in FieldArray

My first time implementing a FieldArray from redux-form has been quite a learning experience. The UI functions properly, but there seems to be some performance issues that I need to investigate further. Basically, the concept is to click an ADD button to i ...

Contrasting @Input with Dependency Injection in Angular 10

Is there a way to pass values from a parent component to a child component without using the @Input decorator? I'm thinking about creating an instance of the Parent class in the constructor (Dependency Injection) and then accessing the variable value ...

Having trouble uploading a pdf file into a .tsx file

As a beginner in learning TypeScript, I recently embarked on building a portfolio website using React JS and TypeScript. However, I encountered a problem when trying to import a PDF file from my images into the resume.tsx file within my project folder. Th ...

Using next.js with GraphQL resulted in the following error: "Invariant Violation: Unable to locate the "client" in the context or passed in as an option..."

I've searched extensively online, but I can't find a solution to my problem. Here is the error message I'm encountering: Invariant Violation: Could not find "client" in the context or passed in as an option. Wrap the root component in an ...

Define an object type in Typescript that includes both specified properties and an unlimited number of unspecified properties

I'm attempting to create a custom data type using the code below, but it's not working: type CustomDataType { [key: string]: CustomDataType; isValid: boolean; errors?: string[]; } My goal is to have a CustomDataType with an isValid propert ...

What is the best way to remove any objects in this array that have empty strings as values?

I have been developing a form using Angular 14. The form consists of a primary section, which includes the user's necessary information, and a secondary section where users can input additional data (an array of residences displayed in a table) befor ...

What is the best way to connect a ref to a stateless component in React?

I need help creating a stateless component with an input element that can be validated by the parent component. In my code snippet below, I'm facing an issue where the input ref is not being assigned to the parent's private _emailAddress propert ...

Encountered an issue while trying to install and run an Angular app: Error code TS2694 indicates that the Namespace does not have an exported member '

Attempting to construct and execute this angular project. Post building the project, with npm i I encountered some warnings, but no errors were found. After executing ng serve -o, the following errors appeared. Moreover, when accessed through the browser, ...

Launching Angular 2 application on Heroku

Previously, I would combine my Angular 1 and Rails applications and deploy them on Heroku, which always went smoothly. However, now that I've transitioned to Angular 2, I'm looking to segregate my Angular and Rails code. I've successfully cr ...

How can I disable AngularJS code completion/suggestion feature in VS Code?

Currently, I have made the switch from AngularJS to Angular 6. However, despite this change, VS Code continues to offer me AngularJS code suggestions. https://i.stack.imgur.com/XerhF.png The syntax presented in the first suggestion is for AngularJS while ...

What are the essential requirements for an Angular application to function properly with minimal dependencies?

If a new developer wants to begin learning Angular from scratch, what are the essential npm packages that they need to install in order to start building an Angular application with minimal dependencies? ...

The functionality of two-way data binding seems to be failing in Angular 2

I encountered an issue in my Angular 2 application where I attempted to bind view data using ngModel, but it did not function as expected. event.component.html <div class="form-group"> <label for="comment">About Us:</label> ...

Is it advisable to send a response in Express.js or not?

When working with Express.js 4.x, I'm unsure whether to return the response (or next function) or not. So, which is preferred: Option A: app.get('/url', (req, res) => { res.send(200, { message: 'ok' }); }); Or Option B: ...

Encountering a TS1005 error while trying to import types from a type definition file

Within my project, one of the libraries called parse5 is providing typing information in .d.ts files. The current syntax used to import types is causing several TypeScript errors during application runtime because TypeScript does not seem to recognize this ...

Using TypeScript and React: Implementing interfaces based on props conditions

I am currently designing a component that must either receive a prop named text or children, but not both or neither. ✓ Allow <NotificationBar text="Demo"/> <NotificationBar>Demo</NotificationBar> ✗ Disallow <NotificationBar/&g ...

Typescript is experiencing an error due to the use of attr("disabled", false) causing a disruption

Within my ts file, I'm using the code snippet below: $('input[type=hidden]').attr("disabled", false); The code functions as intended, however, an error persists: Argument of type 'false' is not assignable to parameter of typ ...

The best approach to typing a FunctionComponent in React with typescript

I'm diving into the world of React and TypeScript for the first time. Could someone verify if this is the correct way to type a FunctionComponent? type ModalProps = { children: ReactElement<any>; show: boolean; modalClosed(): void; }; co ...

Evaluating the initial value from an array for radio buttons in Angular using Typescript

I am trying to retrieve the first value from an array that I receive through a get request via an api. Below is my HTML code: <div class="row" class="select-options" *ngFor="let options of paymentOptions;let idx = index"&g ...

Launching React Native in Visual Studio Code: launchReactNative.js

Struggling to get visual studio code to create the launchReactNative.js file in the ./vscode directory. I've been attempting to configure a react-native project with typescript on visual studio code to debug typescript files, but all my efforts have ...