*ngFor u Angularu za početnike

Cilj blog posta “*ngFor u Angularu za početnike” je napraviti uvod u ngFor Angular direktivu jer ona je osnova koju svaki, Angular, developer treba i mora znati.

*ngFor direktiva se primarno koristi za prikaz niza podataka (array) i početnicima može predstavljati poseban izazov. Također, može se koristiti i za prikaz objekata uz pomoć KeyValuePipe.

Prije nego krenem s izradom primjera trebam kreirati Angular projekt, a to činim naredbom:

Projekt je vidljiv na adresi http://localhost:4200/

Uvod

*ngFor direktiva u Angularu, osim što služi za prikaz niza podataka, je optimizirana da minimalno utječe na DOM (Document Object Model).

To će se najbolje vidjeti u nastavku kada budem koristio let i = index pri čemu ću uklanjati elemente niza bez da ga cijelog ponovno osvježavam.

Angular će se pobrinuti za to da samo taj jedan element izbaci dok sve drugo ostaje isto. Isti slučaj bi bio i kada bi htio dodati novi element u niz.

U slučaju kada podatke dohvaćamo putem nekog API-ja dogodit će se, u slučaju kada se neki podataka obriše ili doda, da Angular više neće znati što treba biti na kojoj poziciji. U tom slučaju koristim trackBy putem čega Angularu mogu reći koji parametar da koristi kako bi identificirao elemente.

*ngFor – prikaz niza podataka

Ako npr. imam sljedeći niz podatka za pretpostaviti je da ih želim na ekranu prikazati kao popis. U ovom će slučaju to biti jednostavan popis osoba. Podaci su fiksno određeni unutar niza, ali logika je ista čak i da stižu putem nekog API-ja.

Gore navedeni popis podataka želim prikazati na sljedeći način:

To znači da nekako moram postići da se za svaki objekt unutar niza kreira novi <li></li> element.

Upravo tu uskače *ngFor sa vrlo jednostavnom sintaksom *ngFor="let <value> of <collection>" pri čemu <value> označava naziv varijable koji proizvoljno određujem, dok <collection> označava izvor podataka što je u ovom slučaju niz simpleArray.

Konačni rezultat je sljedeći:

**ngFor u Angularu za početnike

Ako želim imati redne brojeve mogu koristiti ol tag. Ovo spominjem samo iz razloga što ću u nastavku pokazati kako je redne brojeve moguće dobiti i pomoću indexa elementa.

*ngFor u Angularu za početnike

*ngFor + element index

index se definira kao varijabla let i = index i uvijek počinje od 0. Mogu ga koristiti kako bi prikazao redne brojeve elemenata.

Na ekranu to izgleda ovako:

*ngFor u Angularu za početnike

index mogu, ali i ne moram prikazati na ekranu. U oba ga slučaja mogu koristiti kako bi pristupio pojednom elementu niza.

U sljedećem ću primjeru pomoću funkcije removeByIndex(i) ukloniti neke elemente iz niza.

Funkciju pozivam klikom na pojedini element.

U praksi to izgleda ovako:

Angular index element

*ngFor + trackBy

trackBy se definira kao ; trackBy: id.

Pomoću funkcije trackElement(i,data.id) dohvaćam unikatni ID svakog elementa niza.

U praksi to izgleda ovako:

*ngFor trackBy

*ngFor – prvi i zadnji element niza

*ngFor direktiva u Angularu nudi još jednu zanimljivu mogućnost, a to je dohvaćanje prvog i zadnjeg elementa niza pomoću ; let first = first; let last = last.

Na taj se način prvi i zadnji element mogu npr. urediti CSS-om.

U praksi to izgleda ovako:

*ngFor u Angularu za početnike

Iako ovo još nisam koristio u nekoj produkcijskoj aplikaciji izgleda vrlo zanimljivo.

*ngFor – parni i neparni elementi niza

Kada već spominjem uređivanje elementata CSS-om, postoji još jedna zanimljiva funkcionalnost korištenjem ; let even = even; let odd = odd.

Na taj se način parni i neparni elementi mogu npr. urediti CSS-om.

U praksi to izgleda ovako:

*ngFor u Angularu za početnike

*ngFor – niz unutar niza

Osim prikaza osnovnog niza mogu prikazati i napredni niz tj. countryList niz unutar nestedArray niza.

U ovom slučaju *ngFor ide unutar <ul>.

U praksi to izgleda ovako:

*ngFor u Angularu za početnike

Zaključak

U ovom blog postu, pod nazivom “*ngFor u Angularu za početnike“, naveo sam osnovne funkcionalnosti *ngFor direktive s kojom svaki developer može napraviti funkcionalno rješenje. Sve dalje ovisi o specifičnim potrebama projekta.

P.S. Struktura projekta prema package.json:

Compodoc – izrada dokumentacije Angular aplikacije

Kada se radi na izradi Angular aplikacija osim poznavanja sintakse važno je imati dobru dokumentaciju kako bi svi uključeni u proces razvoja imali uvid u ono što se i kako radi.

Osim toga, ta se dokumentacija može lijepo iskoristiti prilikom uvođenja novih članova tima koji na jednom mjestu mogu dobiti uvid u sve komponente neke Angular aplikacije.

Compodoc – izrada dokumentacije Angular aplikacije

https://compodoc.app/ služi upravo tome i na jednostavna i brz način pruža automatsku izradu osnovne dokumentacije za Angular aplikacije. Kada kažem osnovne mislim na dio koji se dobije pokretanje jedne naredbe o kojoj će biti riječi u nastavku. Osim toga moguće je dodatno prilagoditi dokumentaciju (npr. izbaciti neke dijelove aplikacije iz dokumentacije) specifičnim potrebama svakog projekta.

Kreiranje aplikacije

Naravno, prije izrade dokumentacije potrebno je imati kreiranu aplikaciju.

Može to biti web aplikacija ili mobilna aplikacija, samo je važno da se u pozadini nalazi Angular.

Za potrebu ovog blog posta iskoristit ću projekt Ionic 3 Start Theme jer se sastoji od puno različitih komponenti što će dobro doći za prikaz dokumentacije.

Ionic 3 Start Theme
Izvor: https://github.com/ionictheme/ionic3-start-theme

Izrada dokumentacije

Unutar mape projekta potrebno je pokrenuti sljedeću naredbu:

U to će se trenutku unutar package.json datoteke pod devDependencies dodati sljedeće:

Osim toga, unutar iste datoteke potrebno je dodati još i sljedeće:

Compodoc help

Sada je sve spremno za generiranje dokumentacije što se radi naredbom:

Compodoc – izrada dokumentacije Angular aplikacije

Nakon izvršenja naredbe pojavit će se mapa documentation.

Compodoc – izrada dokumentacije Angular aplikacije

Dokumentaciju je moguće vidjeti na da načina. Prvi je posjetom na adresu http://127.0.0.1:8080/, a drugi je otvaranjem datoteke documentation/index.html.

Compodoc – izrada dokumentacije Angular aplikacije

Zaključak

Dokumentacija može biti puno konkretnija od ranije prikazanog.

Ostale mogućnosti moguće je pronaći na adresi https://compodoc.app/guides/getting-started.html

Angular KeyValuePipe – prikaz objekta kao niz

U pravilu, kada se žele prikazati neki podaci koristeći *ngFor potrebno je da ti podaci budu u obliku niza (array).



U ovom bi slučaju rješenje izgledalo ovako:

  • Windstorm
  • Bombasto
  • Magneta
  • Tornado

No međutim, ako ti podaci budu u obliku objekta doći će do sljedeće greške (error):

NgFor only supports binding to Iterables such as Arrays

Kako bi se to riješilo Angular 6.1 predstavlja KeyValuePipe.

U tom slučaju sljedeći objekt


Mogu prikazati na ovaj način


Što na kraju izgleda ovako

  • name – Windstorm
  • type – hero
  • rating – 10

Ako se keyvalue pipe pokuša koristiti u nekoj od starijih verzija Angulara doći će do greške što znači da je potrebno nadograditi verziju Angulara na 6.1

The pipe ‘keyvalue’ could not be found

*Naslovna slika preuzeta sa https://orlyapps.de/blog/mobile/einfuhrung-der-neuen-keyvaluepipe-in-angular-61

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