Look what happen ?
Can you show what you have in your .ts file pls ?
import { Component, OnInit } from '@angular/core';
import { LoadingController, ToastController } from '@ionic/angular';
import { JobService } from 'src/app/services/job.service';
import { Job } from 'src/app/interfaces/job';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page implements OnInit {
private loading: any;
public jobs = new Array<Job>();
private jobsSubscription: Subscription;
nbr : string;
constructor(
private loadingCtrl: LoadingController,
private jobService: JobService,
private toastCtrl: ToastController
) {
this.jobsSubscription = this.jobService.getJobs().subscribe(data => {
this.jobs = data;
});
}
ngOnInit() {
}
ionViewWillEnter(){
this.nbr='1'
}
ngOnDestroy() {
this.jobsSubscription.unsubscribe();
}
async presentLoading() {
this.loading = await this.loadingCtrl.create({ message: 'Attend SVP...' });
return this.loading.present();
}
async deleteJob(id: string) {
try {
await this.jobService.deleteJob(id);
} catch (error) {
this.presentToast('Erreur lors de la tentative de suppression');
}
}
async presentToast(message: string) {
const toast = await this.toastCtrl.create({ message, duration: 2000 });
toast.present();
}
async approveJob(id: string){
try{
await this.jobService.approveJob(id);
}catch(error){
console.dir(error);
}
}Your template doesn’t find customPipe, it seems legit because I think you forgot to add the TS code that @islamshafie gave to you. I give it to you again:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'customPipe'
})
export class CustomPipe implements PipeTransform {
transform(value: any, args: any): any {
if(Array.isArray(value)){
return value.filter(item => item.status == args);
}else{
return [];
}
}
}
Like this it still same problem
import { Component, OnInit } from '@angular/core';
import { LoadingController, ToastController } from '@ionic/angular';
import { JobService } from 'src/app/services/job.service';
import { Job } from 'src/app/interfaces/job';
import { Subscription } from 'rxjs';
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'customPipe'
})
export class CustomPipe implements PipeTransform {
transform(value: any, args: any): any {
if(Array.isArray(value)){
return value.filter(item => item.status == args);
}else{
return [];
}
}
}
@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page implements OnInit {
private loading: any;
public jobs = new Array<Job>();
private jobsSubscription: Subscription;
nbr : string;
constructor(
private loadingCtrl: LoadingController,
private jobService: JobService,
private toastCtrl: ToastController
) {
this.jobsSubscription = this.jobService.getJobs().subscribe(data => {
this.jobs = data;
});
}
ngOnInit() {
}
ionViewWillEnter(){
this.nbr='1'
}
ngOnDestroy() {
this.jobsSubscription.unsubscribe();
}
async presentLoading() {
this.loading = await this.loadingCtrl.create({ message: 'Attend SVP...' });
return this.loading.present();
}
async deleteJob(id: string) {
try {
await this.jobService.deleteJob(id);
} catch (error) {
this.presentToast('Erreur lors de la tentative de suppression');
}
}
async presentToast(message: string) {
const toast = await this.toastCtrl.create({ message, duration: 2000 });
toast.present();
}
async approveJob(id: string){
try{
await this.jobService.approveJob(id);
}catch(error){
console.dir(error);
}
}
Do like this:
import { Component, OnInit } from '@angular/core';
import { LoadingController, ToastController } from '@ionic/angular';
import { JobService } from 'src/app/services/job.service';
import { Job } from 'src/app/interfaces/job';
import { Subscription } from 'rxjs';
import { Pipe, PipeTransform } from '@angular/core';
@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
@Pipe({
name: 'customPipe'
})
export class Tab1Page implements OnInit, PipeTransform {
private loading: any;
public jobs = new Array<Job>();
private jobsSubscription: Subscription;
nbr: string;
constructor(
private loadingCtrl: LoadingController,
private jobService: JobService,
private toastCtrl: ToastController
) {
this.jobsSubscription = this.jobService.getJobs().subscribe(data => {
this.jobs = data;
});
}
transform(value: any, args: any): any {
if (Array.isArray(value)) {
return value.filter(item => item.status == args);
} else {
return [];
}
}
ngOnInit() { }
ionViewWillEnter() {
this.nbr = '1';
}
ngOnDestroy() {
this.jobsSubscription.unsubscribe();
}
async presentLoading() {
this.loading = await this.loadingCtrl.create({message: 'Attend SVP...'});
return this.loading.present();
}
async deleteJob(id: string) {
try {
await this.jobService.deleteJob(id);
} catch (error) {
this.presentToast('Erreur lors de la tentative de suppression');
}
}
async presentToast(message: string) {
const toast = await this.toastCtrl.create({message, duration: 2000});
toast.present();
}
async approveJob(id: string) {
try {
await this.jobService.approveJob(id);
} catch (error) {
console.dir(error);
}
}
}
I tried to write that the most clear possible but your code is really not well indented so that’s not an easy task…
Still same problem !!!
This should work, just adapt it with your customPipe of course:
If you still have problems, please create a StackBlitz (it creates an empty app for you, you just have to put your code in it to reproduce your issue, and then we’ll be able to check what’s happening).
You need to added it into page module
like:
pageName.module.ts
inside declarations, exports
Thank you it works finally but not with pipe it’s just
<ion-item-sliding *ngFor=“let job of jobs”>
<div *ngIf="job.status == true">
<!-- some code -->
</ion-item-sliding *ngFor=“let job of jobs>
<div *ngIf="job.status == false">
<!-- some code -->
</div>
But seriously Thank you so much all of you Thank you , I appreciate that 
those pipes it works when I search about some like I want to seach and select from list of employees
how can I do that ??
Simple way of using pipes for search
application of search pipe
<input *[(ngModel)]=“searchVal”>
list with filter
< div *ngFor=“let userdata of user_lists | search:{searchtext:searchval,property:userdata.username}” >
here searchtext has value from input control and property is on which property of user data we would like to apply the filter
SEARCH PIPE definition
import { Pipe, PipeTransform } from ‘@angular/core’;
@Pipe({
name: ‘search’,
})
export class SearchPipe implements PipeTransform {
transform(items: any, args?: any): any {
if(!items) return ;
if(!args.searchtext) return items;
if(!args.property) return items;
args.searchtext = args.searchtext.toLowerCase();
return items.filter( it => {
return it[args.property].toLowerCase().includes(args.searchtext); // only filter country name
});
}
}