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.

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

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

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:

Tek sada se mogu baciti na konkretan rad s komponentom.

Unutar HTML datoteke dodajem sljedeće:

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.

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.

Zaključak

Struktura projekta prema package.json

Objavio

Tomislav Stanković

Web developer. Uz to bavi se i temama vezanim uz online reputaciju. Google+

Odgovori

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