How to use Standalone Components, Pipes, or Directives in feature modules

Question

I updated my angular project to angular 14. Now I want to have some standalone components, pipes, or directives.

I have a featured module named ProductModule and want to use a standalone pipe called uppercase in this module.

// structure---Product---product.component---product.service---product.module.ts---StandabloneFolder---uppercase.pipe.ts

My uppercase pipe

@Pipe({name: 'uppercase',standalone: true,})export class UppercasePipe implements PipeTransform {transform(value: string): string {return "UPPERCASE_INPUT"}}

in product.component.html

{{'Abolfazl Roshanzamir' |uppercase}}

get the following error:

No pipe found with name 'uppercase' product.component.ts(6, 39): Erroroccurs in the template of component ProductComponent.

NOTE:

This problem will be solved if I add standalone: true to the product.component and remove the ProductComponent from declarations array.

Best Answer

you only need import it in your imports section component

import { Component } from '@angular/core';@Component({templateUrl: './basic-page.component.html',standalone: true,styles: [],imports: [JsonPipe],})export class BasicPageComponent {}

Template HTML:

<pre>{{ "objeto" | json }}</pre>

Accepted Answer

You need to add the UppercasePipe to the imports of product.module.ts.

product.module.ts

@NgModule({imports: [/*some import*/, UppercasePipe],/* other stuff*/})export class ProductModule {}

How to use Standalone Components, Pipes, or Directives in feature modules

Best Answer

Random Posts