Angular Multiselect Dropdown komponenta za web aplikacije

Angular Multiselect Dropdown komponenta za web aplikacije

Angular2 Multiselect Dropdown
https://www.npmjs.com/package/angular2-multiselect-dropdown

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.

$ ng new AngularMultiselect
$ cd AngularMultiselect
$ ng serve

Na adresi http://localhost:4200/ dobijem sljedeće:

Novi Angular projekt

Nakon što sam uspješno kreirao projekt mogu dodati potrebnu komponentu, a to radim, unutar mape projekta, naredbom:

$ npm i angular2-multiselect-dropdown

npm i angular2-multiselect-dropdown

Jednom kada je komponenta uspješno instalirana potrebno je istu dodati unutar app.module.ts datoteke.

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:

"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:

<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.

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:

Angular Multiselect Dropdown komponenta za web aplikacije

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’.

Can't bind to 'ngModel' since it isn't a known property of 'angular2-multiselect'

potrebno je u projekt dodati FormsModule.

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

{
  "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"
  }
}

Objavio

Tomislav Stanković

Bloger širokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *