title: Unordered list inside (nested in) another unordered list with <li> in Angular
body: <p>Here are the lists:</p>
  
  <pre><code>List1 = [{name:A}, {name:B}, {name:C}, {name:D}, {name:F}]
  List2 = [{name:e}, {name:g}, {name:t}]
  </code></pre>
  
  <p>And here is the HTML:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li *ngFor="let list of list1"&gt;{{list1.name}}        
          &lt;ul *ngIf="list.name === 'C'"&gt;
              &lt;li *ngFor="let list_2 of list2" &gt;{{ list_2.name }}
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want this result:</p>
  
  <pre><code>A
  B
  C
     *e
     *g
     *t
  D
  F
  </code></pre>
  
  <p>But there are mistake(s) that I can't find. Please give me a hand finding them, or show me a new implementation. </p>
  
  <p>Thanks.</p>