How to output a List of object and its nested list of object inside Angular-Nativesript ListView?

Question

Good day,

I having problem in angular-nativescript shared code project. the model and components works fine but the output is not as i expected i think the problem is in my view(Homecomponent.tns.html)

I have an angular model contains list of object(products) inside a object(ProductGroup) here is structure

product group:

export class ProductGroup {

    public groupName : string;
    public products : ProductItem[];
}

ProductItem:

export class ProductItem {
    public itemDescription : string;
    public remarks : string;
}

i already pre-populate it inside my component ngOnInit

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {

  public productGroups : ProductGroup[];
 ngOnInit() {
      ///initiate group
      this.productGroups = [];
      ///insert some items for testing
      this.productGroups.push
    (
      {
        groupName : "Cars",
        products : [
          { itemDescription : "Car", remarks : "" },
          { itemDescription : "Car1",remarks : "" },
          { itemDescription : "Car2",remarks : "" }
        ]
       },
       { groupName : "Trucks",products : [
          { itemDescription : "Truck", remarks : "" },
          { itemDescription : "Truck1",remarks : "" },
          { itemDescription : "Truck2", remarks : ""}]
       }       
    );     
     //trying to check if it is properly populated
    console.log(this.productGroups);
   }
}

i already console.log the product groups and it seems populated and should work fine.

but im trying to output all the productItem inside the listview with the header of the group name but the it only output like this

_________________________________________________
Cars
Car
_________________________________________________
Trucks
Truck
_________________________________________________

here is my components.tns.html

<ActionBar>
    <ActionItem title="Test"></ActionItem>
</ActionBar>
<StackLayout>




<GridLayout   columns="*" >
    <ListView [items] = "productGroups">
      <ng-template let-group="item" >
        <StackLayout>
          <Label [text]="group.groupName"></Label>
             <StackLayout>
               <ListView  [items] = "group.products">
                 <ng-template let-products="item">
                     <Label [text]="products.itemDescription"></Label>                             
                  </ng-template>                                                        
               </ListView>   
              </StackLayout>
         </StackLayout>
       </ng-template>                          
    </ListView>
</GridLayout>
</StackLayout>

Im hoping that my question makes sense to you guys. im just expecting output like this

_________________________________________________
Cars
Car
Car1
Car2
_________________________________________________
Trucks
Truck
Truck1
Truck2
_________________________________________________

Hoping to have someone help me regarding this thanks for your help in advance

Answer 1

Try nativescript-accordion plugin. If you like all the items to be expanded by default, create an array with all indexes and apply it to selectedIndexes property.

tns plugin add nativescript-accordion