css - angular2 get json data from api and display -

i trying implement page have json data api , display them on page using angular2 only. fun part is-

1. the page has links based on criteria result list should populated onclick.
2. among populated results first 2 elements should implementing 1 style next 2 style , rest should implement style.

i tried achieving doing following not able iterate through ngfor elements(tried @viewchildren did not work either) . not sure if implementation correct new angular2.

html:

    <li [class.active]="selectedfilter=='entertainment'"      (click)="changeviewfilter('entertainment')">     <a>               <div><img src="large.svg"/></div>           </a>         </li>         <li [class.active]="selectedfilter=='more'"     (click)="changeviewfilter('other')">           <a>               <div><img src="more-large.svg"/></div>           </a>         </li>  <ul id= "listid" class="styledclass">     <div *ngfor="let item of items; let i= index;">       <li *ngif=" selectedfilter === ''">(this condition display items when display items clicked)         <div class="opitem">           <img src="{{ offer.url == '' ? 'image source here' }}">           <div class="item-info">             <p><strong>{{ item.title }}</strong></p>             <p>               {{ item.info }}             </p>           </div>         </div>       </li>     </div>     <li *ngif="item.category === selectedfilter">(this condition display items match category)         <div class="opitem">           <img src="{{ offer.url == '' ? 'image source here' }}">           <div class="item-info">             <p><strong>{{ item.title }}</strong></p>             <p>               {{ item.info }}             </p>           </div>         </div>       </li>     </div> 

since not have idea of how fetch data api- temporarily created sample data , created filter in ts below: import { component, oninit } '@angular/core';

@component({   selector: 'items-list',   templateurl: './items-list.component.html',   styleurls: ['./items-list.component.scss'] }) export class itemslistcomponent implements oninit {    public selectedfilter = ''; offers = [     {       "itemid": 300,       "title": "sometitle11,       "info": "this information 1.",       "category": "fashion",     },     {       "itemid": 200,       "title": "sometitle12,       "info": "this information 2.",       "category": "fashion",     }];  changeviewfilter(currentfilter) {     this.selectedfilter = currentfilter;   } 

my question: tried iterating through generated elements css doesn't apply list items desired(that first 4 have 1 class next 4 style class , rest have class"). best way of approach json data, store them arrays , display items on click of filter menu , apply styles elements differently.