View Demo

Table of Contents

• About the project
  • Built with
  • Dependencies
• Usage
  • Installation
  • Setup
• Options
• Contributing
• License
• Contact

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.

1. Fork the Project

2. Create your Feature Branch (git checkout -b feature/AmazingFeature)

3. Commit your Changes (git commit -m 'Add some AmazingFeature')

4. Push to the Branch (git push origin feature/AmazingFeature)

5. Open a Pull Request

License

MIT

Contact

Hemant Halwai - @LinkedIn

Project Link: ngx-Selected-Filter