title: How to build dynamic *ngFor Loop in angular if array exist?
body: <p>I have a <code>json</code> 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 <code>*ngFor</code> loop and inside another <code>*ngFor</code>. 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?</p>
  <pre class="lang-json prettyprint-override"><code>{
      &quot;data&quot;: [
          {
              &quot;id&quot;: 1,
              &quot;name&quot;: &quot;main category&quot;,
              &quot;subcategory&quot;: [
                  {
                      &quot;id&quot;: 2,
                      &quot;name&quot;: &quot;sub category&quot;,
                      &quot;subcategorie&quot;: [
                          {
                              &quot;id&quot;: 3,
                              &quot;name&quot;: &quot;sub sub category&quot;,
                              &quot;subcategorie&quot;: [
                                  {
                                      &quot;id&quot;: 4,
                                      &quot;name&quot;: &quot;sub sub sub category&quot;,
                                      &quot;subcategorie&quot;: []
                                  }
                              ]
                          },
                          {
                              &quot;id&quot;: 5,
                              &quot;name&quot;: &quot;sub sub category&quot;,
                              &quot;subcategorie&quot;: []
                          }
                      ]
                  }
              ]
          }
      ]
  }
  </code></pre>
  <p>Final solution (if anybody has same need):</p>
  <pre class="lang-html prettyprint-override"><code>        &lt;div *ngFor=&quot;let category of categories&quot;&gt;
              &lt;h1&gt;{{ category.name }}&lt;/h1&gt;        
              &lt;app-show-categories [categories]=&quot;category.subcategory&quot;&gt;&lt;/app-show-categories&gt;
          &lt;/div&gt;
  </code></pre>
  <p>Also use nested inside nested:</p>
  <pre><code>      &lt;div *ngFor=&quot;let subcategory of categories&quot;&gt;
            {{ subcategory.name }}
            &lt;app-show-categories [categories]=&quot;item.subcategory&quot;&gt;&lt;/app-show-categories&gt;
        &lt;/div&gt;
  </code></pre>
  <p>Nested ShowCategoriesComponent:</p>
  <pre><code>export class ShowCategoriesComponent {
  
      @Input() categories: Categories[];
  
      constructor() { }
  
      ngOnInit(): void {
          console.warn(this.categories);
      }
  }
  </code></pre>