SHARE

—– COURSE LINKS:
+ Repo – https://github.com/iamshaunjp/angular-2-playlist
+ Atom editor – https://atom.io/
+ Download Node.js – https://nodejs.org/en/

———————————————————————————————
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage…

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== PSD to WordPress Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gnow7e45LQFkNVxwQ5BH-W

============ Node.js for Beginners Playlist =============

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

================== Social Links ==================

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

29 COMMENTS

  1. Getting this:  

    Error in ./DirectoryComponent class DirectoryComponent – inline template:6:8 caused by: Cannot find a differ supporting object 'true' of type 'boolean'. NgFor only supports binding to Iterables such as Arrays

     the error goes away should i remove the " | filter:term" pipe from the ngFor directive.

    Any ideas?

  2. Wow thanks for this I just googled "Angular Pipes " had no clue what they did and boom 12 minutes later I have a much better understanding

  3. Thank you! Helped me a lot on my project.

    Two errors in the video since the new update.
    1. Do not need to add 'pipe' to @Component. It should be added to app.module.ts and Angular CLI does it for you automatically.
    2. In the form with [(ngModel)], also add another attribute 'name' to that html property.
    Ex : <input type="text" name="searchTerm" [(ngModel)]="term">

  4. <input type="text" [(ngModel)]="term" name="name"/>

    people who asked what is {standalone: true}?
    When you mark it as standalone: true, it will not added to the FormGroup

  5. Very helpful tutorial, thanks!

    For anyone with toLowerCase errors with Ionic2, just run these on your project to install the latest versions of cloud:

    npm install @ionic/cloud-angular
    npm install @ionic/cloud

  6. What if I have an object Ninjas and every ninja has a name, an age and some other attributes and I want to filter the ninjas while typing any of their attributes?

  7. Hi,

    I have implemented search filter. I want it to search into whole orders array.
    I don't know why but anyhow it's not working. Whenever i type something into search box, list becomes empty.
    After clearing search value, i get my orders list back.
    I spent hours to find out issue, but couldn't find it.

    Please help me to fix the issue. Below is my code.

    *******************************************************************************
    FilterPipe.ts

    import { Pipe, PipeTransform, Injectable } from '@angular/core';
    @Pipe({
    name: 'filter'
    })
    @Injectable()
    export class FilterPipe implements PipeTransform {
    transform(items: any[], filterValue: string): any {
    if (!filterValue) {
    return items;
    }
    if (!items) {
    return [];
    }
    return items.filter(item => {
    for (let value of item) {
    if (String(value).indexOf(filterValue) !== -1) {
    return true;
    }
    }
    });
    };
    }
    *******************************************************************************

    Orders.html

    <ion-content>
    <ul class="list" *ngFor="let order of orders | filter : Search.value">
    <li class="item {{order.color}}" (click)="gotoorderdetails(order)">
    <div style="float:left;">
    {{order.start_date}}<br/>
    </div>
    <b>{{order.order_id}} </b> &nbsp;&nbsp;&nbsp;צ – {{order.total_staff}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ימ- {{order.number_of_days}}<br/><br/> {{order.full_name}}
    <br/>
    <div style="float:left;">
    {{order.managers}}<br/>
    </div>
    <span *ngIf="order.event_location"> {{order.event_location}}<br/></span>
    </li>
    </ul>
    </ion-content>
    <ion-footer> <ion-searchbar #Search (keyup)="0"></ion-searchbar>
    </ion-footer>

    Thanks,
    Nirav Parsana

  8. Hi @The Net Ninja: If I want to filter the ninjas based on the belt? How does the logic go??? How does the ninjas property filter it out by name???

  9. For anyone thats getting the pipe cannot be assigned to component error, its because a few months ago they moved pipe declarations from your component to app.module.ts. Don't add pipes into component, go to app.module.ts, add "import { FilterPipe } from './filter.pipe';" at the top, and then add FilterPipe under @ngMogule({declarations: [FilterPipe, component1, component2…] .

    Works like a charm!

  10. Hi sir,
    I am doing a search to find the solution for my Issue. In Anglar 1
    I have name in the controller . And I need to Display in Alphabetical order
    Like
    A
    Adam
    Adi
    B
    Bhanu,
    Bala,
    C
    Charllot,
    Chai,
    D
    Dare
    Dasari

    Can you please help me with it how can I achieve it.
    Thank you in Advance.

  11. I added a value to each ninja and now I'd like to display the sum of the ninjas that our filter pipe displays. Should I do this with another pipe using .reduce()?

  12. Thank you man its the perfect explanation just update it like we have to import the pipes into module , but is really very good explanation and example

  13. (I use the last version of angular-cli (angular-cli": "1.0.0-beta.19-3))
    I put the filter pipe in the module declarations, but i have the same error :
    "Argument of type '{ selector: string; templateUrl: string; styleUrls: string[]; pipes: typeof FilterPipe[]; }' is not assignable to parameter of type 'Component'.
    Object literal may only specify known properties, and 'pipes' does not exist in type 'Component'."

  14. getting an error "Argument of type '{ selector: string; templateUrl: string; styleUrls: string[]; pipes: typeof FilterPipe[]; }' is not assignable to parameter of type 'Component'.
    Object literal may only specify known properties, and 'pipes' does not exist in type 'Component'."

  15. hi, in angular 2 now, the filter pipe is put in the module declarations, and I believe that [(ngModel)]="term" is not working, how I can this term working now?

  16. hi, in directory.component.html needed to change the input adding [ngModelOptions] = "{standalone: true}"
    before
    <input type="text" [(ngModel)]="term" />
    after
    <input type="text" [(ngModel)]="term" [ngModelOptions]="{standalone: true}" />

    in directory.component.ts

    Alter @Component

    Before:
    @Component({
    selector: 'app-directory',
    templateUrl: './directory.component.html',
    styleUrls: ['./directory.component.css'],
    pipes:[ FilterPipe ]
    })

    After

    @Component({
    selector: 'app-directory',
    templateUrl: './directory.component.html',
    styleUrls: ['./directory.component.css']
    })

LEAVE A REPLY

Please enter your comment!
Please enter your name here