Using Angular 2 global pipes without requiring PLATFORM_PIPES

I was interested in utilizing a feature to create a global pipe and came across this link: https://angular.io/docs/ts/latest/api/core/index/PLATFORM_PIPES-let.html

However, I discovered that it is deprecated with the following message: Providing platform pipes via a provider is deprecated. The recommendation is to provide platform pipes via an AppModule instead.

The lack of documentation on this is frustrating. Here is the old version that needs to be updated:

import {PLATFORM_PIPES} from '@angular/core';
import {OtherPipe} from './myPipe';
@Component({
  selector: 'my-component',
  template: `
    {{123 | other-pipe}}
  `
})
export class MyComponent {
  ...
}
bootstrap(MyComponent, [{provide: PLATFORM_PIPES, useValue: [OtherPipe], multi:true}]);

Does anyone have insights on how to transform this example into a new version that utilizes the AppModule?

Answer №1

AppModules are a recent addition and have undergone significant changes lately (expected to be finalized in RC.5). It is recommended to stick with the deprecated method for now.

Although not tested, the following code snippet should achieve what you need:

@AppModule({
  // modules: [MyModule],
  providers: [...]
  pipes: [OtherPipe]
})
class MyModule {}

bootstrap(AppCmp, {modules: [RouterModule, MyModule])

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

How can we determine the props' type specific to each component?

type ComponentCProps = { c: string; }; function ComponentC(props: ComponentCProps) { return <div>component C</div>; } type ComponentDProps = { d: string; }; function ComponentD(props: ComponentDProps) { return <div>component D& ...

Unable to place value into an array following the invocation of a function in Angular 9

Within an array I established, I am encountering an undefined value when I use console.log. Take a look at my component.ts below: export class OrderExceptionReportComponent implements OnInit { public sessionData: ExceptionReportSessionData[] = []; n ...

How can I showcase a different component within another *ngFor loop?

I am currently working on a table in HTML that displays product information. Here is the code snippet for it: <form [formGroup]="myform" (ngSubmit)="submit()" > <tbody> <tr class="group" *ngFor="let item of products;"&g ...

Angular allows you to easily upload multiple files at once

I am currently facing an issue while attempting to upload multiple files. There seems to be an error somewhere in my code that I have yet to identify. The problem is that nothing is being displayed in the console, but the 'uploadData' appears to ...

Using React along with TypeScript to specify the type of useState as an object containing key/value pairs of strings

I'm currently working in React with typescript and attempting to set the type of useState as an object containing string key/value pairs. Despite searching on SO, I haven't found a solution yet. I've experimented with <{ [key: string]: s ...

Adjusting column sizes smaller than 1/12 within the Primeng flex grid in Angular 8

In using primeng grid, a common desire is to have 2 columns behave a certain way: the first column should take up 1/13 of the total space the second column should take up the remaining space. Many attempt different solutions like: <div class="p-g ...

Discrepancies in ESLint outcomes during React app development

As a newcomer to React development, I am encountering discrepancies between the errors and warnings identified in my project's development environment versus its production environment. Strangely, I have not configured any differences between these en ...

Issue: Dynamic invocation of click events on anchor tags is not working in Angular

Having a challenge with Angular(2+). I've created a menu with anchor tags. We can manually select a menu item or use the keyboard to press Enter to select it. <a (click) = 'selectItem(item)' id='menuItem1'>Menu item</a> ...

Extracting data from a JSON object using Angular 2

I need advice on the most efficient way to handle JSON within my angular2 application. The JSON data I am working with includes: { "rightUpperLogoId": { "id": 100000, "value": "" }, "navbarBackgroundColorIdCss": { "id" ...

Why won't my Angular 2 *ngIf display until the function finishes?

Here is the code snippet that I am dealing with... // Pug Template .notification-header-area.layout-row.layout-align-center-center( *ngIf="notification.message != null", class="{{notification.color}}" ) // Inside angular component private onNotificationS ...

What steps do I need to take to run my Angular project locally using globally installed npm packages?

I'm interested in maintaining all my packages globally, similar to how node package itself operates. For instance, if I have a package named "Highcharts" listed in my package.json file, I prefer to install it globally instead of creating a local node_ ...

app-root component is not populating properly

As a newcomer to Angular 2, I have embarked on a small project with the following files: app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { MaterialModule } fro ...

"webpack" compared to "webpack --watch" produces varying results in terms of output

My project is built on top of this setup: https://www.typescriptlang.org/docs/handbook/react-&-webpack.html Running webpack compiles a bundle that functions correctly in the browser. However, running webpack --watch to recompile on file changes resul ...

The JWT token contains a HasGroup parameter set to true, however, the roles values are missing from the claims

I recently made some changes to the group claims in my Azure AD app's token configuration. While I can see a value of hasGroup: true in my token, I am not able to view the actual list of groups. Can someone please assist me with this? "claims&qu ...

Utilize rest parameters for destructuring操作

I am attempting to destructure a React context using rest parameters within a custom hook. Let's say I have an array of enums and I only want to return the ones passed into the hook. Here is my interface for the context type enum ConfigItem { Some ...

In TypeScript, how to refer to the type of the current class

Is there a way to reference the current class type in the type signature? This would allow me to implement something like the following: export class Component{ constructor(config?: { [field in keyof self]: any }) { Object.assign(this, config) ...

"Step-by-step guide on implementing a click event within a CellRenderer in Angular's Ag-Grid

paste your code hereI'm currently working on implementing edit and delete buttons within the same column for each row using Angular ag-Grid. To visually represent these buttons, I am utilizing icons. While I have successfully displayed the edit and de ...

Issue encountered during the creation process of a new component within Angular 4

While attempting to create a new component named signup-form using the command: ng generate component signup-form / ng g component signup-form An error is being thrown that reads: Unexpected token / in JSON at position 1154 The source of this error i ...

Typescript: Extracting data from enum items using types

I am facing a challenge with an enum type called Currency. I am unable to modify it because it is automatically generated in a graphql schema. However, I need to utilize it for my data but I'm unsure of how to go about doing so. enum Currency { rub ...

Creating a TypeScript generic type for the "pick" function to define the types of values in the resulting object

I am facing an issue while writing the type for the pick function. Everything works smoothly when picking only one key or multiple keys with values of the same type. However, if I attempt to pick a few keys and their values are of different types, I encoun ...