CODEWITHSUNDEEP
angularionic-frameworkionic3pipecomponents
KnowledgeSeeker
KnowledgeSeeker

Reputation: 1098

Using Pipe in a component in Ionic 3 does not work

I created some reusable components that I can use in other pages that needs to use pipes. However when I try to import the Pipe the html does not know. It returns me an error below.

Error: Template parse errors: The pipe 'image' could not be found

I know using pipes in a Pages works but how can I work with components using pipes?

To explain this further more. I have a page called accounts.ts and that page use the <orders> component which I render it like this.

 <orders (viewOrder)="viewAccount($event)" [orders]="orderCancelled" *ngIf="accountsHasLoaded"></orders>

And in the ngModule of that page I declared this.

@NgModule({
  declarations: [
    AccountPage,
  ],
  imports: [
    PipesModule,
    NgCalendarModule,
    ComponentsModule,
    IonicPageModule.forChild(AccountPage),
  ],
})

This is the ngModule of thee accounts page that will use the orders component.

Here is my code below in my component.ts

@Component({
  selector: 'orders',
  templateUrl: 'orders.html',
  providers: [
    ImagePipe
  ]
})

It still does not work when I replace the ImagePipe in the provider with PipesModule.

and in my html

  <img [src]="order?.client?.image?.url | image: 'original'" onError="this.src='assets/imgs/No_Image_Available.jpg';">

The pipes image works well with pages but when I try to use it in a component it does not work.

This is my pipes module below

import { NgModule } from '@angular/core';
import { ChatDatePipe } from './chat-date/chat-date';
import { MomentPipe } from './moment/moment';
import { DatepickerFormatPipe } from './datepicker-format/datepicker-format';
import { ImagePipe } from './image/image';
@NgModule({
    declarations: [
        ChatDatePipe,
        MomentPipe,
        DatepickerFormatPipe,
        ImagePipe
    ],
    imports: [],
    exports: [
        ChatDatePipe,
        MomentPipe,
        DatepickerFormatPipe,
        ImagePipe
    ],
    providers: [
        ImagePipe
    ]
})
export class PipesModule { }

Appreciate if someone could help. Thanks in advance.

Upvotes: 0

Views: 1243

Answers (4)

Mike Zriel
Mike Zriel

Reputation: 1865

This is how you use a Pipe in a component in Ionic Framework:

Code is for mycomponent.ts file:

import { Component, Input } from '@angular/core';

import { MyPipe } from '../../pipes/mypipe/mypipe';

@Component({
  selector: 'mycomponent',
  templateUrl: 'mycomponent.component.html',
  providers: [ MyPipe ]
})
export class MyComponent {

@Input() param: string;  

  constructor( private myPipe: MyPipe) {

  }

  getFilename( value: string ) {
    return this.myPipe.transform(value);
  } 

}

And in your mycomponent.html file:

<div>
    <img src="assets/imgs/svg/{{ getFilename(param) }}.svg">
</div>

The method you call is in curly braces

Upvotes: 0

Sunil
Sunil

Reputation: 11241

Just perform following checks

1.Check if you have given desired pipe name.

@Pipe({ name: 'image' })
export class ImagePipe {

}

2.You have declared the pipe into the module

   @NgModule({
      declarations: [
        ImagePipe,
      ],
    })

Upvotes: 1

Patricio Vargas
Patricio Vargas

Reputation: 5522

For what I can see you can try this Try this:

<img [src]="order?.client?.image?.url | ImagePipe: 'original'" onError="this.src='assets/imgs/No_Image_Available.jpg';">

Your pipe is called ImagePipe, not image.

if this doesn't work, post your ImagePipe code

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222722

You need to declare the pipe in module declaration:

declarations: [ ImagePipe ],
providers: [ImagePipe ]

Upvotes: 2

Related Questions