How to build dynamic *ngFor Loop in angular if array exist?

Question

I have a json file with categories and a lot of sub categories. Inside sub categories there are more sub categories and so on. How can I easy write a loop in my template to show categories? I tried *ngFor loop and inside another *ngFor. All works fine. But in this way I have to do it again and again. Also I can't know before how many sub categories exist. Is there a easy way to go deeper if a subcategorie exist?

{
    "data": [
        {
            "id": 1,
            "name": "main category",
            "subcategory": [
                {
                    "id": 2,
                    "name": "sub category",
                    "subcategorie": [
                        {
                            "id": 3,
                            "name": "sub sub category",
                            "subcategorie": [
                                {
                                    "id": 4,
                                    "name": "sub sub sub category",
                                    "subcategorie": []
                                }
                            ]
                        },
                        {
                            "id": 5,
                            "name": "sub sub category",
                            "subcategorie": []
                        }
                    ]
                }
            ]
        }
    ]
}

Final solution (if anybody has same need):

        <div *ngFor="let category of categories">
            <h1>{{ category.name }}</h1>        
            <app-show-categories [categories]="category.subcategory"></app-show-categories>
        </div>

Also use nested inside nested:

      <div *ngFor="let subcategory of categories">
          {{ subcategory.name }}
          <app-show-categories [categories]="item.subcategory"></app-show-categories>
      </div>

Nested ShowCategoriesComponent:

export class ShowCategoriesComponent {

    @Input() categories: Categories[];

    constructor() { }

    ngOnInit(): void {
        console.warn(this.categories);
    }
}

Some random IT boy · Accepted Answer · 2021-06-16 16:11:02Z

0

You can achieve so by nesting components into eachother:

Category - Containing a the category markup + a list of subcategories
CategoryList - it's gonna loop through a given array of categories

Here's the result with your sample data:

AppComponent

Template

<app-category-list [categories]="categories"></app-category-list>

Nothing interesting, just transforming the JSON into Javascript.

Also take note that you have lots of typos on your sample data which I have fixed in my example

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'testapp';

  categories: Category[];

  constructor() {
      this.categories = JSON.parse(`[
        {
            "id": 1,
            "name": "main category",
            "subcategories": [
                {
                    "id": 2,
                    "name": "sub category",
                    "subcategories": [
                        {
                            "id": 3,
                            "name": "sub sub category",
                            "subcategories": [
                                {
                                    "id": 4,
                                    "name": "sub sub sub category",
                                    "subcategories": []
                                }
                            ]
                        },
                        {
                            "id": 5,
                            "name": "sub sub category",
                            "subcategories": []
                        }
                    ]
                }
            ]
        }
    ]`)

    console.log('CATEGORIES', this.categories)
  }
}

CategoryListComponent

<div *ngFor="let category of categories">
    <app-category [category]="category"></app-category>
</div>

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

  @Input() categories: Category[];

  constructor() { }

  ngOnInit(): void {
  }

}

CategoryComponent

<h1>{{category.name}}</h1>
<app-category-list [categories]="category.subcategories"></app-category-list>

@Component({
  selector: 'app-category',
  templateUrl: './category.component.html',
  styleUrls: ['./category.component.css']
})
export class CategoryComponent implements OnInit {
  @Input() category: Category;
  constructor() { }

  ngOnInit(): void {
  }

}

edited Jun 16, 2021 at 16:11

answered Jun 16, 2021 at 11:13

Some random IT boy

8,5653 gold badges29 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

SaschaK Over a year ago

Thanks. I tried your solution, but get same output like above? It is not going into deeper categories.

Some random IT boy Over a year ago

Can you post the updated code? Note that I am not referencing a plain div on my nesting, but the same component

SaschaK Over a year ago

Please have a look. I have updated question.

Alireza Ahmadi Over a year ago

@you have tree structure I think you need pipe

Some random IT boy Over a year ago

So my answer is what fixed the problem?

|

Collectives™ on Stack Overflow

How to build dynamic *ngFor Loop in angular if array exist?

1 Answer 1

AppComponent

CategoryListComponent

CategoryComponent

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

AppComponent

CategoryListComponent

CategoryComponent

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related