{"id":10214,"date":"2019-06-24T00:00:56","date_gmt":"2019-06-23T22:00:56","guid":{"rendered":"https:\/\/www.tomislavstankovic.com\/blog\/?p=10214"},"modified":"2019-08-29T14:47:33","modified_gmt":"2019-08-29T12:47:33","slug":"ngfor-angular","status":"publish","type":"post","link":"https:\/\/www.tomislavstankovic.com\/blog\/ngfor-angular\/","title":{"rendered":"*ngFor u Angularu 101"},"content":{"rendered":"

Cilj blog posta “*ngFor u Angularu za po\u010detnike<\/strong><\/em>” je napraviti uvod u ngFor Angular<\/em> direktivu jer ona je osnova koju svaki, Angular<\/a><\/em>, developer treba i mora znati. <\/p>\n

*ngFor<\/em> direktiva se primarno koristi za prikaz niza podataka<\/strong> (array<\/a><\/em>) i po\u010detnicima mo\u017ee predstavljati poseban izazov. Tako\u0111er, mo\u017ee se koristiti i za prikaz objekata<\/a> uz pomo\u0107 KeyValuePipe<\/a><\/em>.<\/p>\n

Prije nego krenem s izradom primjera trebam kreirati Angular<\/em> projekt<\/a>, a to \u010dinim naredbom:<\/p>\n

$ ng new AngularNgFor\r\n$ cd AngularNgFor\r\n$ ng serve<\/pre>\n
Projekt je vidljiv na adresi http:\/\/localhost:4200\/<\/p>\n
Uvod<\/h2>\n
*ngFor<\/strong><\/em> direktiva<\/strong> u Angularu<\/em>, osim \u0161to slu\u017ei za prikaz niza podataka, je optimizirana<\/strong> da minimalno utje\u010de na DOM (Document Object Model)<\/a><\/em>.<\/p>\n
To \u0107e se najbolje vidjeti u nastavku kada budem koristio let i = index<\/span> pri \u010demu \u0107u uklanjati elemente niza bez da ga cijelog ponovno osvje\u017eavam. <\/p>\n
Angular<\/em> \u0107e se pobrinuti za to da samo taj jedan element izbaci dok sve drugo ostaje isto. Isti slu\u010daj bi bio i kada bi htio dodati novi element u niz. <\/p>\n
U slu\u010daju kada podatke dohva\u0107amo putem nekog API<\/em>-ja dogodit \u0107e se, u slu\u010daju kada se neki podataka obri\u0161e ili doda, da Angular<\/em> vi\u0161e ne\u0107e znati \u0161to treba biti na kojoj poziciji. U tom slu\u010daju koristim trackBy<\/span> putem \u010dega Angularu<\/em> mogu re\u0107i koji parametar da koristi kako bi identificirao elemente.<\/p>\n
*ngFor – prikaz niza podataka<\/h2>\n
Ako npr. imam sljede\u0107i niz podatka za pretpostaviti je da ih \u017eelim na ekranu prikazati kao popis. U ovom \u0107e slu\u010daju to biti jednostavan popis osoba. Podaci su fiksno odre\u0111eni unutar niza, ali logika je ista \u010dak i da sti\u017eu putem nekog API<\/em>-ja<\/a>.<\/p>\n
simpleArray = [\r\n    {\r\n      id: 4,\r\n      name: 'Tomislav',\r\n      country: 'Croatia'\r\n    },\r\n    {\r\n      id: 5,\r\n      name: 'Jomislav',\r\n      country: 'Croatia'\r\n    },\r\n    {\r\n      id: 6,\r\n      name: 'Valsimot',\r\n      country: 'Croatia'\r\n    },\r\n  ]<\/pre>\n
Gore navedeni popis podataka \u017eelim prikazati na sljede\u0107i na\u010din:<\/p>\n
<ul>\r\n  <li>Tomislav, Croatia<\/li>\r\n  <li>Jomislav, Croatia<\/li>\r\n  <li>Valsimot, Croatia<\/li>\r\n<\/ul><\/pre>\n
To zna\u010di da nekako moram posti\u0107i da se za svaki objekt unutar niza kreira novi <li><\/li><\/span> element.<\/p>\n
Upravo tu uska\u010de *ngFor<\/em> sa vrlo jednostavnom sintaksom *ngFor=”let <value> of <collection>”<\/span> pri \u010demu <value><\/span> ozna\u010dava naziv varijable koji proizvoljno odre\u0111ujem, dok <collection><\/span> ozna\u010dava izvor podataka \u0161to je u ovom slu\u010daju niz  simpleArray<\/span>.<\/p>\n
<ul>\r\n  <li *ngFor=\"let data of simpleArray\">{{data.name}}, {{data.country}}<\/li>\r\n<\/ul><\/pre>\n
Kona\u010dni rezultat je sljede\u0107i:<\/p>\n
\"**ngFor<\/a><\/p>\n
Ako \u017eelim imati redne brojeve mogu koristiti ol<\/a><\/em> tag. Ovo spominjem samo iz razloga \u0161to \u0107u u nastavku pokazati kako je redne brojeve mogu\u0107e dobiti i pomo\u0107u indexa<\/em> elementa.<\/p>\n
\"*ngFor<\/a><\/p>\n
*ngFor + element index<\/em><\/h2>\n
index<\/em> se definira kao varijabla let i = index<\/span> i uvijek po\u010dinje od 0. Mogu ga koristiti kako bi prikazao redne brojeve elemenata. <\/p>\n
<ul>\r\n  <li *ngFor=\"let data of simpleArray; let i = index\">{{i+1}} - {{data.name}}, {{data.country}}<\/li>\r\n<\/ul><\/pre>\n
Na ekranu to izgleda ovako:<\/p>\n
\"*ngFor<\/a><\/p>\n
index<\/em> mogu, ali i ne moram prikazati na ekranu. U oba ga slu\u010daja mogu koristiti kako bi pristupio pojednom elementu niza. <\/p>\n
U sljede\u0107em \u0107u primjeru pomo\u0107u funkcije removeByIndex(i)<\/span> ukloniti neke elemente iz niza.<\/p>\n
removeByIndex(i){\r\n   console.log(i);\r\n   this.simpleArray.splice(i,1);\r\n   console.log(this.simpleArray);\r\n}<\/pre>\n
Funkciju pozivam klikom na pojedini element. <\/p>\n
<ul>\r\n  <li *ngFor=\"let data of simpleArray; let i = index\" (click)=\"removeByIndex(i)\">{{i}} - {{data.name}}, {{data.country}}<\/li>\r\n<\/ul><\/pre>\n
U praksi to izgleda ovako:<\/p>\n
\"Angular<\/a><\/p>\n
*ngFor + trackBy<\/em><\/h2>\n
trackBy<\/em> se definira kao ; trackBy: id<\/span>.<\/p>\n
<ul>\r\n  <li *ngFor=\"let data of simpleArray; let i = index; trackBy: id\" (click)=\"trackElement(i,data.id)\">{{data.name}}, {{data.country}}<\/li>\r\n<\/ul><\/pre>\n
Pomo\u0107u funkcije trackElement(i,data.id)<\/span> dohva\u0107am unikatni ID<\/em> svakog elementa niza.<\/p>\n
trackElement(i: number, element: any) {\r\n    console.log(\"index:\" + \" \" + i + \", \" + \"trackBy ID:\" + \" \" + element);\r\n}<\/pre>\n
U praksi to izgleda ovako:<\/p>\n
\"*ngFor<\/a><\/p>\n
*ngFor – prvi i zadnji element niza<\/h2>\n
*ngFor<\/em> direktiva u Angularu<\/em> nudi jo\u0161 jednu zanimljivu mogu\u0107nost, a to je dohva\u0107anje prvog i zadnjeg elementa niza pomo\u0107u ; let first = first; let last = last<\/span>.<\/p>\n
<ul>\r\n  <li *ngFor=\"let data of simpleArray; let first = first; let last = last\" [ngClass]=\"{ firstClass: first, lastClass: last }\">{{data.name}}, {{data.country}}<\/li>\r\n<\/ul><\/pre>\n
Na taj se na\u010din prvi i zadnji element mogu npr. urediti CSS<\/em>-om.<\/p>\n
.firstClass {\r\n    color: red;\r\n}\r\n.lastClass {\r\n    color: blue;\r\n}<\/pre>\n
U praksi to izgleda ovako:<\/p>\n
\"*ngFor<\/a><\/p>\n
Iako ovo jo\u0161 nisam koristio u nekoj produkcijskoj aplikaciji izgleda vrlo zanimljivo.<\/p>\n
*ngFor – parni i neparni elementi niza<\/h2>\n
Kada ve\u0107 spominjem ure\u0111ivanje elementata CSS<\/em>-om, postoji jo\u0161 jedna zanimljiva funkcionalnost kori\u0161tenjem ; let even = even; let odd = odd<\/span>.<\/p>\n
<ul>\r\n <li *ngFor=\"let data of simpleArray; let even = even; let odd = odd\" [ngClass]=\"{ evenClass: even, oddClass: odd }\">{{data.name}}, {{data.country}}<\/li>\r\n<\/ul><\/pre>\n
Na taj se na\u010din parni i neparni elementi mogu npr. urediti CSS<\/em>-om.<\/p>\n
.evenClass {\r\n    color: red;\r\n}\r\n.oddClass {\r\n    color: blue;\r\n}<\/pre>\n
U praksi to izgleda ovako:<\/p>\n
\"*ngFor<\/a><\/p>\n
*ngFor – niz unutar niza<\/h2>\n
Osim prikaza osnovnog niza mogu prikazati i napredni niz tj. countryList<\/span> niz unutar nestedArray<\/span> niza.<\/p>\n
nestedArray: any[] = [\r\n    {\r\n      id: 4,\r\n      name: 'Tomislav',\r\n      countryList: [\r\n        {\r\n          shortCode: 'HR',\r\n          fullName: 'Croatia'\r\n        },\r\n        {\r\n          shortCode: 'UK',\r\n          fullName: 'United Kingdom'\r\n        }\r\n      ]\r\n    },\r\n    {\r\n      id: 5,\r\n      name: 'Jomislav',\r\n      countryList: [\r\n        {\r\n          shortCode: 'HR',\r\n          fullName: 'Croatia'\r\n        },\r\n        {\r\n          shortCode: 'UK',\r\n          fullName: 'United Kingdom'\r\n        }\r\n      ]\r\n    },\r\n    {\r\n      id: 6,\r\n      name: 'Valsimot',\r\n      countryList: [\r\n        {\r\n          shortCode: 'HR',\r\n          fullName: 'Croatia'\r\n        },\r\n        {\r\n          shortCode: 'UK',\r\n          fullName: 'United Kingdom'\r\n        }\r\n      ]\r\n    },\r\n]<\/pre>\n
U ovom slu\u010daju *ngFor<\/span> ide unutar <ul><\/span>.<\/p>\n
<ul *ngFor=\"let data of nestedArray\">\r\n   <li>{{data.name}}<\/li>\r\n      <ul>\r\n        <li *ngFor=\"let country of data.countryList\">\r\n            {{country.fullName}}\r\n        <\/li>\r\n      <\/ul>\r\n<\/ul><\/pre>\n
U praksi to izgleda ovako:<\/p>\n
\"*ngFor<\/a><\/p>\n
Zaklju\u010dak<\/h2>\n
U ovom blog postu, pod nazivom “*ngFor u Angularu za po\u010detnike<\/strong><\/em>“, naveo sam osnovne funkcionalnosti *ngFor<\/em> direktive s kojom svaki developer mo\u017ee napraviti funkcionalno rje\u0161enje. Sve dalje ovisi o specifi\u010dnim potrebama projekta.<\/p>\n
P.S. Struktura projekta prema package.json<\/em><\/strong>:<\/p>\n
{\r\n  \"name\": \"angular-ng-for\",\r\n  \"version\": \"0.0.0\",\r\n  \"scripts\": {\r\n    \"ng\": \"ng\",\r\n    \"start\": \"ng serve\",\r\n    \"build\": \"ng build\",\r\n    \"test\": \"ng test\",\r\n    \"lint\": \"ng lint\",\r\n    \"e2e\": \"ng e2e\"\r\n  },\r\n  \"private\": true,\r\n  \"dependencies\": {\r\n    \"@angular\/animations\": \"~7.2.0\",\r\n    \"@angular\/common\": \"~7.2.0\",\r\n    \"@angular\/compiler\": \"~7.2.0\",\r\n    \"@angular\/core\": \"~7.2.0\",\r\n    \"@angular\/forms\": \"~7.2.0\",\r\n    \"@angular\/platform-browser\": \"~7.2.0\",\r\n    \"@angular\/platform-browser-dynamic\": \"~7.2.0\",\r\n    \"@angular\/router\": \"~7.2.0\",\r\n    \"core-js\": \"^2.5.4\",\r\n    \"rxjs\": \"~6.3.3\",\r\n    \"tslib\": \"^1.9.0\",\r\n    \"zone.js\": \"~0.8.26\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"@angular-devkit\/build-angular\": \"~0.13.0\",\r\n    \"@angular\/cli\": \"~7.3.9\",\r\n    \"@angular\/compiler-cli\": \"~7.2.0\",\r\n    \"@angular\/language-service\": \"~7.2.0\",\r\n    \"@types\/node\": \"~8.9.4\",\r\n    \"@types\/jasmine\": \"~2.8.8\",\r\n    \"@types\/jasminewd2\": \"~2.0.3\",\r\n    \"codelyzer\": \"~4.5.0\",\r\n    \"jasmine-core\": \"~2.99.1\",\r\n    \"jasmine-spec-reporter\": \"~4.2.1\",\r\n    \"karma\": \"~4.0.0\",\r\n    \"karma-chrome-launcher\": \"~2.2.0\",\r\n    \"karma-coverage-istanbul-reporter\": \"~2.0.1\",\r\n    \"karma-jasmine\": \"~1.1.2\",\r\n    \"karma-jasmine-html-reporter\": \"^0.2.2\",\r\n    \"protractor\": \"~5.4.0\",\r\n    \"ts-node\": \"~7.0.0\",\r\n    \"tslint\": \"~5.11.0\",\r\n    \"typescript\": \"~3.2.2\"\r\n  }\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
Cilj ovog blog posta je napraviti uvod u ngFor Angular<\/em> direktivu jer ona je ipak osnova koju svaki, Angular<\/em>, developer treba i mora znati. ngFor<\/em> direktiva se primarno koristi za prikaz niza podataka<\/strong> (array<\/a><\/em>).<\/p>\n","protected":false},"author":1,"featured_media":10285,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[566,351],"tags":[471,600,597],"class_list":["post-10214","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","category-razvoj","tag-angular","tag-angular-framework","tag-ngfor"],"yoast_head":"\n*ngFor u Angularu 101 - Tomislav Stankovi\u0107<\/title>\n<meta name=\"description\" content=\"Cilj blog posta "*ngFor u Angularu za po\u010detnike" je napraviti uvod u *ngFor Angular direktivu koju svaki developer treba i mora znati.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tomislavstankovic.com\/blog\/ngfor-angular\/\" \/>\n<meta property=\"og:locale\" content=\"hr_HR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"*ngFor u Angularu 101 - Tomislav Stankovi\u0107\" \/>\n<meta property=\"og:description\" content=\"Cilj blog posta "*ngFor u Angularu za po\u010detnike" je napraviti uvod u *ngFor Angular direktivu koju svaki developer treba i mora znati.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/ngfor-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Tomislav Stankovi\u0107\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-23T22:00:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-08-29T12:47:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/05\/angular-ngfor-min.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"510\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Tomislav Stankovi\u0107\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Napisao\/la\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tomislav Stankovi\u0107\" \/>\n\t<meta name=\"twitter:label2\" content=\"Procijenjeno vrijeme \u010ditanja\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minuta\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ngfor-angular\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ngfor-angular\\\/\"},\"author\":{\"name\":\"Tomislav Stankovi\u0107\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"headline\":\"*ngFor u Angularu 101\",\"datePublished\":\"2019-06-23T22:00:56+00:00\",\"dateModified\":\"2019-08-29T12:47:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ngfor-angular\\\/\"},\"wordCount\":687,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ngfor-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/angular-ngfor-min.jpg\",\"keywords\":[\"Angular\",\"Angular Framework\",\"ngFor\"],\"articleSection\":[\"Frontend\",\"Razvoj\"],\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ngfor-angular\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ngfor-angular\\\/\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ngfor-angular\\\/\",\"name\":\"*ngFor u Angularu 101 - Tomislav Stankovi\u0107\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ngfor-angular\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ngfor-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/angular-ngfor-min.jpg\",\"datePublished\":\"2019-06-23T22:00:56+00:00\",\"dateModified\":\"2019-08-29T12:47:33+00:00\",\"description\":\"Cilj blog posta \\\"*ngFor u Angularu za po\u010detnike\\\" je napraviti uvod u *ngFor Angular direktivu koju svaki developer treba i mora znati.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ngfor-angular\\\/#breadcrumb\"},\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ngfor-angular\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ngfor-angular\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/angular-ngfor-min.jpg\",\"contentUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/angular-ngfor-min.jpg\",\"width\":825,\"height\":510,\"caption\":\"ngFor u Angularu\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ngfor-angular\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Po\u010detna stranica\",\"item\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"*ngFor u Angularu 101\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\",\"name\":\"Tomislav Stankovi\u0107\",\"description\":\"Sam svoj bloger\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"hr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\",\"name\":\"Tomislav Stankovi\u0107\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"contentUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"width\":248,\"height\":165,\"caption\":\"Tomislav Stankovi\u0107\"},\"logo\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\"},\"description\":\"Bloger \u0161irokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.\",\"sameAs\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/tomislavstankovic\\\/\"],\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/author\\\/tomislavstankovic\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"*ngFor u Angularu 101 - Tomislav Stankovi\u0107","description":"Cilj blog posta \"*ngFor u Angularu za po\u010detnike\" je napraviti uvod u *ngFor Angular direktivu koju svaki developer treba i mora znati.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.tomislavstankovic.com\/blog\/ngfor-angular\/","og_locale":"hr_HR","og_type":"article","og_title":"*ngFor u Angularu 101 - Tomislav Stankovi\u0107","og_description":"Cilj blog posta \"*ngFor u Angularu za po\u010detnike\" je napraviti uvod u *ngFor Angular direktivu koju svaki developer treba i mora znati.","og_url":"https:\/\/www.tomislavstankovic.com\/blog\/ngfor-angular\/","og_site_name":"Tomislav Stankovi\u0107","article_published_time":"2019-06-23T22:00:56+00:00","article_modified_time":"2019-08-29T12:47:33+00:00","og_image":[{"width":825,"height":510,"url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/05\/angular-ngfor-min.jpg","type":"image\/jpeg"}],"author":"Tomislav Stankovi\u0107","twitter_card":"summary_large_image","twitter_misc":{"Napisao\/la":"Tomislav Stankovi\u0107","Procijenjeno vrijeme \u010ditanja":"5 minuta"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ngfor-angular\/#article","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ngfor-angular\/"},"author":{"name":"Tomislav Stankovi\u0107","@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"headline":"*ngFor u Angularu 101","datePublished":"2019-06-23T22:00:56+00:00","dateModified":"2019-08-29T12:47:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ngfor-angular\/"},"wordCount":687,"commentCount":0,"publisher":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"image":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ngfor-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/05\/angular-ngfor-min.jpg","keywords":["Angular","Angular Framework","ngFor"],"articleSection":["Frontend","Razvoj"],"inLanguage":"hr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.tomislavstankovic.com\/blog\/ngfor-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ngfor-angular\/","url":"https:\/\/www.tomislavstankovic.com\/blog\/ngfor-angular\/","name":"*ngFor u Angularu 101 - Tomislav Stankovi\u0107","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ngfor-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ngfor-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/05\/angular-ngfor-min.jpg","datePublished":"2019-06-23T22:00:56+00:00","dateModified":"2019-08-29T12:47:33+00:00","description":"Cilj blog posta \"*ngFor u Angularu za po\u010detnike\" je napraviti uvod u *ngFor Angular direktivu koju svaki developer treba i mora znati.","breadcrumb":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ngfor-angular\/#breadcrumb"},"inLanguage":"hr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tomislavstankovic.com\/blog\/ngfor-angular\/"]}]},{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ngfor-angular\/#primaryimage","url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/05\/angular-ngfor-min.jpg","contentUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/05\/angular-ngfor-min.jpg","width":825,"height":510,"caption":"ngFor u Angularu"},{"@type":"BreadcrumbList","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ngfor-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Po\u010detna stranica","item":"https:\/\/www.tomislavstankovic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"*ngFor u Angularu 101"}]},{"@type":"WebSite","@id":"https:\/\/www.tomislavstankovic.com\/blog\/#website","url":"https:\/\/www.tomislavstankovic.com\/blog\/","name":"Tomislav Stankovi\u0107","description":"Sam svoj bloger","publisher":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tomislavstankovic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"hr"},{"@type":["Person","Organization"],"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d","name":"Tomislav Stankovi\u0107","image":{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","contentUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","width":248,"height":165,"caption":"Tomislav Stankovi\u0107"},"logo":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg"},"description":"Bloger \u0161irokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.","sameAs":["https:\/\/www.tomislavstankovic.com\/blog\/","https:\/\/www.linkedin.com\/in\/tomislavstankovic\/"],"url":"https:\/\/www.tomislavstankovic.com\/blog\/author\/tomislavstankovic\/"}]}},"_links":{"self":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/10214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/comments?post=10214"}],"version-history":[{"count":92,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/10214\/revisions"}],"predecessor-version":[{"id":10446,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/10214\/revisions\/10446"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media\/10285"}],"wp:attachment":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media?parent=10214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/categories?post=10214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/tags?post=10214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}