solodynamo / Ng2 Search Filter
Licence: mit
Angular 2 / Angular 4 / Angular 5 custom pipe npm module to make a search filter on any input, π₯ 100K+ downloads
Stars: β 137
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Ng2 Search Filter
Angular Google Maps
Angular 2+ Google Maps Components
Stars: β 1,982 (+1346.72%)
Mutual labels: ng2, angular2, angular4, angular5
Ng2 Smart Table
Angular Smart Data Table component
Stars: β 1,590 (+1060.58%)
Mutual labels: filter, ng2, angular2, angular4
Angular Tree Component
A simple yet powerful tree component for Angular (>=2)
Stars: β 1,031 (+652.55%)
Mutual labels: angular2, angular4, angular5
Ngautocomplete
Light-weight autocomplete component for Angular.
Stars: β 52 (-62.04%)
Mutual labels: ng2, angular2, angular4
Drip Ionic3
γζ°΄ζ»΄ζε‘γApp Open Source Code Base On Ionic V3 Framework
Stars: β 74 (-45.99%)
Mutual labels: angular2, angular4, angular5
Angularconcepts
Key Angular Concepts using Latest Angular version 5
Stars: β 31 (-77.37%)
Mutual labels: pipe, angular4, angular5
Angulartics2
Vendor-agnostic analytics for Angular2 applications.
Stars: β 963 (+602.92%)
Mutual labels: angular2, angular4, angular5
Fusebox Angular Universal Starter
Angular Universal seed project featuring Server-Side Rendering, @fuse-box bundling, material, firebase, Jest, Nightmare, and more
Stars: β 132 (-3.65%)
Mutual labels: angular2, angular4, angular5
Angular Prest
pREST component for Angular
Stars: β 16 (-88.32%)
Mutual labels: angular2, angular4, angular5
Springbootangularhtml5
β¨οΈ Spring Boot 2 + Angular 11 + HTML5 router mode + HTTP interceptor + Lazy loaded modules
Stars: β 89 (-35.04%)
Mutual labels: angular2, angular4, angular5
Ngx Papaparse
Papa Parse wrapper for Angular
Stars: β 83 (-39.42%)
Mutual labels: angular2, angular4, angular5
Ng2 Flatpickr
Angular 2+ wrapper for flatpickr (https://github.com/chmln/flatpickr)
Stars: β 91 (-33.58%)
Mutual labels: angular2, angular4, angular5
Ng Simple Slideshow
A simple, responsive slideshow for Angular 4+.
Stars: β 119 (-13.14%)
Mutual labels: angular2, angular4, angular5
Nebular
π₯ Customizable Angular UI Library based on Eva Design System πβ¨Dark Mode
Stars: β 7,368 (+5278.1%)
Mutual labels: angular2, angular4, angular5
Angular2 Carousel
An lightweight , touchable and responsive library to create a carousel for angular 2 / 4 / 5
Stars: β 26 (-81.02%)
Mutual labels: ng2, angular2, angular4
Ng2 Breadcrumbs
A breadcrumb service for the Angular 7 router
Stars: β 61 (-55.47%)
Mutual labels: ng2, angular2, angular5
Angular Admin Lte
AdminLte for Angular 2
Stars: β 109 (-20.44%)
Mutual labels: angular2, angular4, angular5
Angular Froala Wysiwyg
Angular 4, 5, 6, 7, 8 and 9 plugin for Froala WYSIWYG HTML Rich Text Editor.
Stars: β 696 (+408.03%)
Mutual labels: angular2, angular4, angular5
Ngx Permissions
Permission and roles based access control for your angular(angular 2,4,5,6,7,9+) applications(AOT, lazy modules compatible
Stars: β 749 (+446.72%)
Mutual labels: angular2, angular4, angular5
Angular 2 / Angular 4 / Angular 5 Search Filter Pipe
Filter search items
Angular 2 filter to make custom search. Works with Angular 4 and Angular 5 too.
Install
npm i ng2-search-filter --save
yarn add ng2-search-filter
Usage
In case you're using systemjs
- see configuration here.
Import Ng2SearchPipeModule
to your module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
@NgModule({
imports: [BrowserModule, Ng2SearchPipeModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
And use pipe in your component after declaring and initializing it in your component:
import { Component } from '@angular/core';
@Component({
selector: 'example-app',
template: `
<div>
<input type="text" [(ngModel)]="term">
<div *ngFor = "let item of items |filter:term" >
<p>
{{item.name}}
</p>
</div>
</div>
`
})
export class AppComponent {
items: string[] = [{ name: "archie" }, { name: "jake" }, { name: "richard" }];
term = '';
}
Support ng2-search-filter
ng2-search-filter is completely free and open-source. If you find it useful, you can show your support by π it or sharing it in your social network.
Contribute
Please do π
License
MIT Β© Solodynamo
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].