एनएक्सएक्स-बूटस्ट्रैप - सॉर्टेबल
एनजीएक्स-बूटस्ट्रैप छांटने वाला घटक ड्रैग ड्रॉप समर्थन के साथ एक विन्यास योग्य घटक प्रदान करता है।
SortableComponent
चयनकर्ता
bs-sortable
इनपुट
fieldName - स्ट्रिंग, फील्ड का नाम यदि इनपुट ऐरे में ऑब्जेक्ट्स हैं।
itemActiveClass - स्ट्रिंग, सक्रिय आइटम के लिए वर्ग का नाम।
itemActiveStyle- {[कुंजी: स्ट्रिंग]: स्ट्रिंग; }, सक्रिय वस्तु के लिए स्टाइल ऑब्जेक्ट।
itemClass - स्ट्रिंग, आइटम के लिए वर्ग का नाम
itemStyle - स्ट्रिंग, आइटम के लिए वर्ग का नाम
itemTemplate- CustomRef <any>, एक कस्टम आइटम टेम्पलेट निर्दिष्ट करने के लिए उपयोग किया जाता है। टेम्पलेट चर: आइटम और सूचकांक;
placeholderClass - प्लेसहोल्डर के लिए स्ट्रिंग, क्लास का नाम
placeholderItem - स्ट्रिंग, प्लेसहोल्डर आइटम जो संग्रह खाली होने पर दिखाया जाएगा
placeholderStyle - स्ट्रिंग, प्लेसहोल्डर के लिए स्टाइल ऑब्जेक्ट
wrapperClass - स्ट्रिंग, आइटम आवरण के लिए वर्ग का नाम
wrapperStyle- {[कुंजी: स्ट्रिंग]: स्ट्रिंग; }, आइटम आवरण के लिए स्टाइल ऑब्जेक्ट
आउटपुट
onChange- सरणी परिवर्तन (फायरिंग, इंसर्ट, रिमूव) पर निकाल दिया गया, जो कि ngModelChange के समान है। एक पेलोड के रूप में नए आइटम संग्रह लौटाता है।
उदाहरण
जैसा कि हम एक छँटाई का उपयोग करने जा रहे हैं, हम उपयोग करने के लिए ngx-bootstrap रेटिंग अध्याय में app.module.ts को अपडेट करने के लिए हैSortableModule तथा DraggableItemService।
App.module.ts को SortableModule और 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 { }
क्रमबद्ध घटक के लिए शैलियों का उपयोग करने के लिए style.css अपडेट करें।
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;
}
Sortable घटक का उपयोग करने के लिए test.component.html अपडेट करें।
test.component.html
<bs-sortable
[(ngModel)]="items"
fieldName="name"
itemClass="sortableItem"
itemActiveClass="sortableItemActive"
wrapperClass="sortableWrapper">
</bs-sortable>
इसी तरह के चर और विधियों के लिए test.component.ts को अपडेट करें।
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 {
}
}
बनाएँ और परोसें
कोणीय सर्वर शुरू करने के लिए निम्न कमांड चलाएँ।
ng serve
एक बार सर्वर ऊपर और चल रहा है। ओपन http: // लोकलहोस्ट: 4200।