README
Ngx-Selected-FIlter
Table of Contents
About The Project
There are multiple scenarios where a dropdown option needs to be filtered based on the previous selected values i.e each dropdown option can be selected at most once.
This scenario needs to be implemented with a custom code using the OnModelChange or onChange event to loop through the selected dropdowns and remove them from the other dropdown options.
This project targets to remove this custom code to achieve the above mentioned functionality by exporting 2 directives (selectedFilterScope and selectedFilter)
Built With
Following are the packages with versions used to create this library
| Package | Version |
|---|---|
| @angular/common | 12.0.5 |
| @angular/compiler | 12.0.5 |
| @angular/core | 12.0.5 |
| rxjs | 6.6.7 |
Dependencies
| ngx-selected-filter | Angular |
|---|---|
| 1.X | >=10.X |
Usage
Installation
npm install ngx-selected-filter --save
Setup
Step 1:
Import NgxSelectedFilterModule in your project's modules
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {NgxSelectedFilterModule} from 'ngx-selected-filter';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxSelectedFilterModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 2:
Add selectedFilterScope directive at the root level of your dropdown.
This root level can be any HTML element which is a parent in heirarchy level w.r.t this select element.
IMP: This directive can be used with any HTML element (div/form...) and does not support <ng-container>
<div selectedFilterScope>
<div *ngFor="let iterator of iterations;let i = index;">
<label>Preferred Country {{i + 1}}</label>
<select name="country">
<option disabled selected>Select Country</option>
<option *ngFor="let country of countries" [value]="country.id">
{{country.name}}
</option>
</select>
</div>
</div>
Step 3:
Add selectedFilter directive in the select tag, where filter functionality is expected. If filter is needed in multiple select tags, value of name attribute or any distinct string can be passed to this directive.
<div selectedFilterScope>
<div *ngFor="let iterator of iterations;let i = index;">
<label>Preferred Country {{i + 1}}</label>
<select selectedFilter="country" name="country">
<option disabled selected>Select Country</option>
<option *ngFor="let country of countries" [value]="country.id">
{{country.name}}
</option>
</select>
</div>
</div>
Options
By default this library, sets the attribute of already selected dropdown value as hidden. But if this option needs to be shown with specific styling, this can be achieved by passing css class name to parameter filterClass where selectedFilter is used.
<select selectedFilter="country" name="country" filterClass="css-class-name">
<option disabled selected>Select Country</option>
<option *ngFor="let country of countries" [value]="country.id">{{country.name}}</option>
</select>
Contributing
Any contributions you make are greatly appreciated.
Fork the Project
Create your Feature Branch (
git checkout -b feature/AmazingFeature)Commit your Changes (
git commit -m 'Add some AmazingFeature')Push to the Branch (
git push origin feature/AmazingFeature)Open a Pull Request
License
MIT
Contact
Hemant Halwai - @LinkedIn
Project Link: ngx-Selected-Filter