Angular 卡 arrays 带 *ngfor

Question

I am on a self learning road right now teaching myself angular.

For my project that i am working on, i am using some card elements, i created an interface for the array with another array in it.

The ts:

categories: categorieCards[] = [
    {
      title: 'animals',
      image: '../../assets/Images/animals/main.jpg',
      children: [
        {
          title: 'Pig',
          image: '#',
          children: []

so as you can see i createt categories[] which has another children[] in it to create more objects. But right now i am only abel to display the first categories but not the children.

---

the html:

<div class="card-wrapper" fxLayout="row wrap" fxLayoutGap="1rem" fxFlexOffset=" 10px"
fxFlex="100">
  <div class="cardslayout mat-elevation-z4" *ngFor="let category of categories" fxFlex="calc(50% - 16px)">
    <img [src]="category.image">
    <span>
      {{category.title}}
    </span>
  </div>
</div>

So here my question: how can i make the card element clickable, so the children array will be displayed as the parent cards.

Answer 1

You may have different options to implement this feature: 1- first option is create a component for your category and inside it create a variable and make it true or false when user clicks on header and show the chid results with *ngFor

<div class="card-wrapper" fxLayout="row wrap" fxLayoutGap="1rem">
 <div class="cardslayout mat-elevation-z4" *ngFor="let category of 
  categories" fxFlex="calc(50% - 16px)">
  <your-category-compoennt [category]="category"> <your-category-component>
 </div>
</div>

then in your your-category-component.html :

<div (click)="showClidren = true">
 <img [src]="category.image">
 <span>
  {{category.title}}
 </span>
</div>
<div *ngIf="showClidren" >
  <span *ngFor="let child of 
  category"> </span>
</div>

then in your your-category-component.ts :

export class YourCategoryComponent {
 @Input()category
 showClidren = true
 ...
}

2- next option is to add a show showChildern: boolen to your model or interface and by clicking in the title make it true and show children with ngfor in the same component and ngIf

3- use Ui libraries like mat-expansion-panel angular mterial