U ovom ću blog postu pokazati kako na brz i jednostavan način ugraditi multiselect dropdown komponentu u Angular web aplikaciju.
Za početak, kreiram novi projekt koristeći Angular CLI.
|
1 2 3 |
$ ng new AngularMultiselect $ cd AngularMultiselect $ ng serve |
Na adresi http://localhost:4200/ dobijem sljedeće:
Nakon što sam uspješno kreirao projekt mogu dodati potrebnu komponentu, a to radim, unutar mape projekta, naredbom:
|
1 |
$ npm i angular2-multiselect-dropdown |
Jednom kada je komponenta uspješno instalirana potrebno je istu dodati unutar app.module.ts datoteke.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AngularMultiSelectModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
U dokumentaciji komponente navedeno je
From v3.0.0 onwards, you need to include default.theme.css file to get the basic styling of the dropdown.
tako da ću datoteku default.theme.css uključiti u projekt kako bi dobio zadani stil komponente.
To radim na način da unutar datoteke angular.json dodam sljedeće:
|
1 2 3 4 5 6 7 8 9 |
"assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.css", "./node_modules/angular2-multiselect-dropdown/themes/default.theme.css" ], "scripts": [] |
Tek sada se mogu baciti na konkretan rad s komponentom.
Unutar HTML datoteke dodajem sljedeće:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div style="text-align:center"> <h1> Welcome to {{ title }}! </h1> <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="> </div> <angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings" (onSelect)="onItemSelect($event)" (onDeSelect)="OnItemDeSelect($event)" (onSelectAll)="onSelectAll($event)" (onDeSelectAll)="onDeSelectAll($event)" (onOpen)="onOpen($event)" (onClose)="onClose($event)"></angular2-multiselect> |
Ova se komponenta unutar angular2-multiselect tagova sastoji od nekoliko dijelova:
- [data] – podaci kojima će se napuniti komponenta
- [(ngModel)] – two-way binding
- [settings] – poziva objekt s postavkama tog konkretnog padajućeg izbornika
- (onSelect) – poziva funkciju koja će nešto napraviti kada se odabere jedan ili više podataka iz padajućeg izbornika
- (onDeSelect) – poziva funkciju koja će nešto napraviti kada se odznači jedan ili više podataka iz padajućeg izbornika
- (onSelectAll) – poziva funkciju koja će nešto napraviti kada se odaberu svi podataci iz padajućeg izbornika
- (onDeSelectAll) – poziva funkciju koja će nešto napraviti kada se odznače svi podataci iz padajućeg izbornika
- (onOpen) – metoda koja se poziva pri otvaranju padajućeg izbornika
- (onClose) – metoda koja se poziva pri zatvaranju padajućeg izbornika
Sada ću unutar app.component.ts datoteke kreirati funkcionalnost koja će upravljati podacima.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { dropdownList = []; selectedItems = []; dropdownSettings = {}; ngOnInit(){ this.dropdownList = [ {"id":1,"itemName":"Hrvatska"}, {"id":2,"itemName":"Slovenija"}, {"id":3,"itemName":"BiH"}, {"id":4,"itemName":"Srbija"}, {"id":5,"itemName":"Mađarska"}, {"id":6,"itemName":"Njemačka"}, {"id":7,"itemName":"Francuska"}, {"id":8,"itemName":"Austrija"}, {"id":9,"itemName":"Belgija"}, {"id":10,"itemName":"Poljska"} ]; this.dropdownSettings = { singleSelection: false, text:"Odaberite državu", selectAllText:'Odaberite sve', unSelectAllText:'Odznačite sve', enableSearchFilter: true, searchPlaceholderText: 'Traži', classes:"myclass custom-class" }; } onItemSelect(item:any){ console.log(item); console.log(this.selectedItems); } OnItemDeSelect(item:any){ console.log(item); console.log(this.selectedItems); } onSelectAll(items: any){ console.log(items); } onDeSelectAll(items: any){ console.log(items); } onOpen(e:any){ console.log("Otvoreno =" + " " + e); } onClose(e:any){ console.log("Zatvoreno =" + " " + e); } } |
U praksi to izgleda ovako:
P.S. U slučaju pojavljivanja sljedeće greške
Can’t bind to ‘ngModel’ since it isn’t a known property of ‘angular2-multiselect’.
potrebno je u projekt dodati FormsModule.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, AngularMultiSelectModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Zaključak
Struktura projekta prema package.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
{ "name": "angular-multiselect", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^6.1.0", "@angular/common": "^6.1.0", "@angular/compiler": "^6.1.0", "@angular/core": "^6.1.0", "@angular/forms": "^6.1.0", "@angular/http": "^6.1.0", "@angular/platform-browser": "^6.1.0", "@angular/platform-browser-dynamic": "^6.1.0", "@angular/router": "^6.1.0", "angular2-multiselect-dropdown": "^3.2.1", "core-js": "^2.5.4", "rxjs": "~6.2.0", "zone.js": "~0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.8.0", "@angular/cli": "~6.2.3", "@angular/compiler-cli": "^6.1.0", "@angular/language-service": "^6.1.0", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "codelyzer": "~4.3.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~2.9.2" } } |
