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.