title: How to use ngIf condition inside nested loop in angular
body: <p>i want to implement a navigation side menu using angular.navigation menu has 3 level sub menu
  this is my tried code</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul class="nav metismenu" id="side-menu" *ngIf="menulist.length != 0"&gt;
      &lt;li  *ngFor="let menu1 of menulist"&gt;
          &lt;!--level 01--&gt;
          &lt;a *ngIf="menu1.SubMenu.length !== 0" href="#"&gt; 
          &lt;span class="fa {{menu1.CssClass}}"&gt;&lt;/span&gt;
          &lt;span class="nav-label"&gt;{{menu1.DisplayText}}&lt;/span&gt; 
          &lt;span class="fa arrow"&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;a *ngIf="menu1.SubMenu.length === 0" href="{{url}}{{menu1.ActionUrl}}"&gt;
          &lt;span class="fa {{menu1.CssClass}}"&gt;&lt;/span&gt;  
          &lt;span class="nav-label"&gt;{{menu1.DisplayText}}&lt;/span&gt;&lt;/a&gt;
          &lt;ul  *ngIf="menu1.SubMenu.length !== 0"  class="nav nav-second-level collapse" &gt;
              &lt;li  *ngFor="let menu2 of menu1.SubMenu"&gt;
                  &lt;!--level 02--&gt;
                  &lt;a *ngIf="menu2.SubMenu.length !== 0" href="#"&gt;
                      &lt;span class="fa {{menu2.CssClass}}"&gt; &lt;/span&gt;
                      &lt;span class="nav-label"&gt;{{menu2.DisplayText}}&lt;/span&gt; 
                      &lt;span class="fa arrow"&gt;&lt;/span&gt; 
                  &lt;/a&gt;
                  &lt;a *ngIf="menu2.SubMenu.length === 0" href="{{url}}{{menu2.ActionUrl}}"&gt;
                      &lt;span class="fa {{menu2.CssClass}}"&gt;&lt;/span&gt; 
                      &lt;span class="nav-label"&gt;{{menu2.DisplayText}}&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;ul *ngIf="menu2.SubMenu.length !== 0"  class="nav nav-third-level collapse" &gt;
                      &lt;li *ngFor="let menu3 of menu2.SubMenu"&gt;
                          &lt;!--level 03--&gt;
                          &lt;a *ngIf="menu3.SubMenu.length !== 0" href="#"&gt; 
                              &lt;span class="fa {{menu3.CssClass}}"&gt;&lt;/span&gt;
                              &lt;span class="nav-label"&gt;{{menu3.DisplayText}}&lt;/span&gt;
                              &lt;span class="fa arrow"&gt;&lt;/span&gt;
                          &lt;/a&gt;
                          &lt;a *ngIf="menu3.SubMenu.length === 0" href="{{url}}{{menu3.ActionUrl}}"&gt; 
                              &lt;span class="fa {{menu3.CssClass}}"&gt;&lt;/span&gt;
                              &lt;span class="nav-label"&gt;{{menu3.DisplayText}}&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>when i execute the following error is coming</p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'length' of undefined</p>
  </blockquote>
  
  <p>please someone recommend a correct way to finish this.</p>