{"id":8433,"date":"2018-09-30T22:38:27","date_gmt":"2018-09-30T20:38:27","guid":{"rendered":"https:\/\/www.tomislavstankovic.com\/blog\/?p=8433"},"modified":"2019-01-05T21:23:14","modified_gmt":"2019-01-05T19:23:14","slug":"angular-multiselect-dropdown-komponenta","status":"publish","type":"post","link":"https:\/\/www.tomislavstankovic.com\/blog\/angular-multiselect-dropdown-komponenta\/","title":{"rendered":"Angular Multiselect Dropdown komponenta za web aplikacije"},"content":{"rendered":"
\"Angular2<\/a>
https:\/\/www.npmjs.com\/package\/angular2-multiselect-dropdown<\/figcaption><\/figure>\n

U ovom \u0107u blog postu pokazati kako na brz i jednostavan na\u010din ugraditi multiselect dropdown<\/em> komponentu<\/a> u Angular<\/em> web aplikaciju.<\/p>\n

Za po\u010detak, kreiram novi projekt koriste\u0107i Angular CLI<\/a><\/em>.<\/p>\n

$ ng new AngularMultiselect\r\n$ cd AngularMultiselect\r\n$ ng serve<\/pre>\n
Na adresi http:\/\/localhost:4200\/ dobijem sljede\u0107e:<\/p>\n
\"Novi<\/a><\/p>\n
Nakon \u0161to sam uspje\u0161no kreirao projekt mogu dodati potrebnu komponentu, a to radim, unutar mape projekta, naredbom:<\/p>\n
$ npm i angular2-multiselect-dropdown<\/pre>\n
\"npm<\/a><\/p>\n
Jednom kada je komponenta uspje\u0161no instalirana potrebno je istu dodati unutar app.module.ts<\/em><\/strong> datoteke.<\/p>\n
import { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\n\r\nimport { AppComponent } from '.\/app.component';\r\n\r\nimport { AngularMultiSelectModule } from 'angular2-multiselect-dropdown\/angular2-multiselect-dropdown';\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    AngularMultiSelectModule\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }<\/pre>\n
U dokumentaciji komponente navedeno je<\/p>\n
From v3.0.0 onwards, you need to include default.theme.css file to get the basic styling of the dropdown.<\/p><\/blockquote>\n
tako da \u0107u datoteku default.theme.css<\/strong><\/em> uklju\u010diti u projekt kako bi dobio zadani stil komponente. <\/p>\n
To radim na na\u010din da unutar datoteke angular.json<\/strong><\/em> dodam sljede\u0107e:<\/p>\n
\"assets\": [\r\n              \"src\/favicon.ico\",\r\n              \"src\/assets\"\r\n            ],\r\n            \"styles\": [\r\n              \"src\/styles.css\",\r\n              \".\/node_modules\/angular2-multiselect-dropdown\/themes\/default.theme.css\"\r\n            ],\r\n            \"scripts\": []<\/pre>\n
Tek sada se mogu baciti na konkretan rad s komponentom.<\/p>\n
Unutar HTML datoteke dodajem sljede\u0107e:<\/p>\n
<div style=\"text-align:center\">\r\n  <h1>\r\n    Welcome to {{ title }}!\r\n  <\/h1>\r\n  <img width=\"300\" alt=\"Angular Logo\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==\">\r\n<\/div>\r\n\r\n<angular2-multiselect [data]=\"dropdownList\" [(ngModel)]=\"selectedItems\" \r\n    [settings]=\"dropdownSettings\" \r\n    (onSelect)=\"onItemSelect($event)\" \r\n    (onDeSelect)=\"OnItemDeSelect($event)\"\r\n    (onSelectAll)=\"onSelectAll($event)\"\r\n    (onDeSelectAll)=\"onDeSelectAll($event)\"\r\n    (onOpen)=\"onOpen($event)\"\r\n    (onClose)=\"onClose($event)\"><\/angular2-multiselect><\/pre>\n
Ova se komponenta unutar angular2-multiselect<\/span> tagova sastoji od nekoliko dijelova:<\/p>\n