Ngx-Bootstrap - Ordinabile
Il componente ordinabile ngx-bootstrap fornisce un componente ordinabile configurabile, con supporto del trascinamento.
SortableComponent
selettore
bs-sortable
Ingressi
fieldName - stringa, nome del campo se l'array di input è costituito da oggetti.
itemActiveClass - stringa, nome della classe per l'elemento attivo.
itemActiveStyle- {[chiave: stringa]: stringa; }, oggetto di stile per l'elemento attivo.
itemClass - stringa, nome della classe per l'elemento
itemStyle - stringa, nome della classe per l'elemento
itemTemplate- TemplateRef <any>, utilizzato per specificare un modello di elemento personalizzato. Variabili del modello: elemento e indice;
placeholderClass - stringa, nome della classe per segnaposto
placeholderItem - stringa, elemento segnaposto che verrà mostrato se la raccolta è vuota
placeholderStyle - stringa, oggetto di stile per segnaposto
wrapperClass - stringa, nome della classe per il wrapper degli elementi
wrapperStyle- {[chiave: stringa]: stringa; }, oggetto di stile per il wrapper degli elementi
Uscite
onChange- attivato al cambio di array (riordino, inserimento, rimozione), come ngModelChange. Restituisce la nuova raccolta di elementi come carico utile.
Esempio
Dato che utilizzeremo un ordinabile, dobbiamo aggiornare app.module.ts usato nel capitolo Valutazione ngx-bootstrap da usareSortableModule e DraggableItemService.
Aggiorna app.module.ts per utilizzare SortableModule e DraggableItemService.
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';
import { PopoverModule, PopoverConfig } from 'ngx-bootstrap/popover';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { RatingModule, RatingConfig } from 'ngx-bootstrap/rating';
import { SortableModule, DraggableItemService } from 'ngx-bootstrap/sortable';
@NgModule({
declarations: [
AppComponent,
TestComponent
],
imports: [
BrowserAnimationsModule,
BrowserModule,
AccordionModule,
AlertModule,
ButtonsModule,
FormsModule,
CarouselModule,
CollapseModule,
BsDatepickerModule.forRoot(),
BsDropdownModule,
ModalModule,
PaginationModule,
PopoverModule,
ProgressbarModule,
RatingModule,
SortableModule
],
providers: [AlertConfig,
BsDatepickerConfig,
BsDropdownConfig,
BsModalService,
PaginationConfig,
ProgressbarConfig,
RatingConfig,
DraggableItemService],
bootstrap: [AppComponent]
})
export class AppModule { }
Aggiorna styles.css per utilizzare gli stili per il componente ordinabile.
Styles.css
.sortableItem {
padding: 6px 12px;
margin-bottom: 4px;
font-size: 14px;
line-height: 1.4em;
text-align: center;
cursor: grab;
border: 1px solid transparent;
border-radius: 4px;
border-color: #adadad;
}
.sortableItemActive {
background-color: #e6e6e6;
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}
.sortableWrapper {
min-height: 150px;
}
Aggiorna test.component.html per utilizzare il componente ordinabile.
test.component.html
<bs-sortable
[(ngModel)]="items"
fieldName="name"
itemClass="sortableItem"
itemActiveClass="sortableItemActive"
wrapperClass="sortableWrapper">
</bs-sortable>
Aggiorna test.component.ts per le variabili e i metodi corrispondenti.
test.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
items = [
{
id: 1,
name: 'Apple'
},
{
id: 2,
name: 'Orange'
},
{
id: 3,
name: 'Mango'
}
];
constructor() {}
ngOnInit(): void {
}
}
Costruisci e servi
Eseguire il seguente comando per avviare il server angolare.
ng serve
Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200.