dmc-dropdown
v9.0.1
Published
Component to show options to choose, we can filter options.
Downloads
3
Readme
DmcDropdown
Component to show options to choose, we can filter options.
Installation
Using npm:
npm install dmc-dropdown
Usage
In app.module:
// Angular
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// Modulos
import { AppRoutingModule } from './app-routing.module';
import { DropdownModule } from 'dmc-dropdown';
// Componentes
import { AppComponent } from './app.component';
import { ShowcaseDmcDropdownComponent } from './showcase/showcase-dmc-dropdown/showcase-dmc-dropdown.component';
@NgModule({
declarations: [
AppComponent,
ShowcaseDmcDropdownComponent
],
imports: [
BrowserModule,
AppRoutingModule,
DropdownModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
In your ts:
import { DmcSelectItem } from 'dropdown';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-showcase-dmc-dropdown',
templateUrl: './showcase-dmc-dropdown.component.html',
styleUrls: ['./showcase-dmc-dropdown.component.css']
})
export class ShowcaseDmcDropdownComponent implements OnInit {
options: DmcSelectItem[];
valueSelect: string;
constructor() { }
ngOnInit() {
this.options = [
new DmcSelectItem('Label1', 'Value1'),
new DmcSelectItem('Label2', 'Value2'),
new DmcSelectItem('Label3', 'Value3'),
new DmcSelectItem('Label4', 'Value4')
]
this.valueSelect = 'Value3';
}
selectItem($event){
console.log($event);
}
}
In your html:
<div class="row">
<div class="col-2 mt-4">
<dmc-dropdown
[options]="options"
[valueSelect]="valueSelect"
[labelNoResults]="'No hay resultados que mostrar filtrando'"
(selectValue)="selectItem($event)">
<ng-template let-item="item">
{{item.label + ' - ' + item.value}}
</ng-template>
</dmc-dropdown>
<p>Este texto no se va a ver cuando se abra el dropdown</p>
</div>
</div>
Inputs
| Input | Description | | ------------- | ------------- | | options | Options to show | | valueSelect | Value of item to preload | | labelNoResults | Label to show when filter items and not found |
Outputs
| Output | Description | | ------------- | ------------- | | selectValue | Event when select item |