Angular Ecommerce Filter

Developed By Kundan Kumar

About

Whenever u will use this package it will return a checked item array in response() function you may write your business logic

Installation

ng add @angular/material #import in your app module or nearest module
npm i ng-ecommerce-filter

#app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgEcommerceFilterModule } from 'ng-ecommerce-filter';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgEcommerceFilterModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

#app.component.html
<lib-ng-ecommerce-filter 
[FilterName]="'Color Filter'"
[ShowColorDots]="true" 
[ShowStars]="false"
[FilterWidth]="'30vw'"
[FilterHeight]="'100px'"
[isOpen]="true"
[ShowSelected]="true"
[ShowClearFilter]="true"
[ShowSerachBar]="true"
[contentSort]="'asc'"
[ObjectArr]="[
{'title':'Orange','value':'orange','color_code':'#fcba03'},
{'title':'Green','value':'green','color_code':'#4a944e'},
{'title':'Pink','value':'pink','color_code':'#911062'},
]" (response)="myreponse($event)"></lib-ng-ecommerce-filter>

<!--
leave as empty color_code field if u 
don't wan't color filter like this 
{'title':'Medimix','value':'medimix','color_code':''},

-->

#app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'mypro';
  myreponse(e:any){
  console.log(e)
  }
}

About Params

| Params | Usage | | ------ | ------ | | [FilterName] | write your desire filter name like Color,Pattern,Price etc | | [ShowColorDots] | true means you want show color indicator for color filter | | [ShowStars] | true means you want show star icon for a rating filter | | [FilterWidth] | Always give width in vw 30vw == (30% of entire width) | | [FilterHeight] | Filter Height in px of vh | | [isOpen] | true means whenever component load filter will open | | [ShowSelected] | true means it will show how many item u checked | | [ShowSerachBar] | true means it will show input search bar | | [contentSort] | asc,des,no for array sorting | | [ObjectArr] | Array format for color filter like this [{'title':'Red','value':'Red','color_code':'#4a944e'}] | | [ObjectArr] | Array format for non color filter like this [{'title':'Red','value':'Red','color_code':''}] please leave 'color_code' field blank |

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please make sure to update tests as appropriate.

License

MIT