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 · Answer 1 · 2021-06-16T16:11:02.330

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 {
  }

}

Thanks. I tried your solution, but get same output like above? It is not going into deeper categories. — SaschaK, Jun 16 '21 at 12:01
Can you post the updated code? Note that I am not referencing a plain `div` on my nesting, but the same component — Some random IT boy, Jun 16 '21 at 12:03
No it didn't, you are right Angular doesn't recognize the own component from it's own template. You have found a bug on the Angular framework. Congratulations — Some random IT boy, Jun 16 '21 at 16:04
Onto the fixing: break it into two compontents: Category and CategoryList and then it'll start working. Let me update my answer — Some random IT boy, Jun 16 '21 at 16:05
@AlirezaAhmadi the pipe approach you suggest is to obtain the given `hierarchichal` structure of data which @SaschaK already has. It just needs to nest the components and make the framework understand — Some random IT boy, Jun 16 '21 at 16:21

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

1 Answers1

AppComponent

CategoryListComponent

CategoryComponent