CODEWITHSUNDEEP
angular
salamanka44
salamanka44

Reputation: 944

How do I filter a json array in angular 2?

I'm a new developper in angular 2 and I really really got difficulties with it...

I have a simple array of json objects that I want to filter to search elements depending on some values. For example, I have this array : 

invoiceList = 
  [
    {
      invoiceNumber: 1234, 
      invoiceSupplier: "test", 
      invoiceStatus: "Import error", 
      invoiceCategory: "invoice with GR", 
      date: "22/01/2017", 
      amount : 134527
    },
     //others elemenys...
  ];

And I want to filter elements that have depending on the name AND the status AND the amount for example. I know that in Angular 1 we can use filters and it was easier and clearer for me, but I saw that they were removed in Angular2 and I was really really consufed about the pipes that they introduced.

Can you please show me how can I filter that array in .ts part and the .html part? Please because I felt that I'm really blocked...

Thanks in advance !

Upvotes: 0

Views: 4986

Answers (1)

Ali Baig
Ali Baig

Reputation: 3867

You can use pipes in angular 2, something like

import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
    name: 'isInRole',
    pure: false
})
export class IsInRole implements PipeTransform {
    transform(roles: string[], roleName: string): boolean {
        let filteredRoles = roles.filter(p => p.indexOf(roleName) !== -1);
        if (filteredRoles.length > 0)
            return true;
        return false;
    }
}

In your app.module.ts, register this like

import {IsInRole} from './pipes/isinrole.pipe';

@NgModule({
    imports: [BrowserModule, FormsModule, HttpModule],
    declarations: [IsInRole],
    bootstrap: [AppComponent]
})
export class AppModule { }

and then use it like this in your template

<div class="col-md-6" *ngIf="(roles | isInRole: 'Administrator')">
    ...
</div>

Upvotes: 1

Related Questions