title: declare and use variable in a template Angular 4: is it possible to simplify this example?
body: <p>I've significantly cut my code.
  Here is the significant part. Angular4. Template.</p>
  
  <p><strong>Original code:</strong></p>
  
  <pre><code>&lt;div *ngIf="getData(places).length &gt; 0"&gt;
    &lt;select&gt;
       &lt;option *ngFor="let place of getData(places)" [ngValue]="place.placeId"&gt;{{place.description}}
      &lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you may see <code>getData</code> function used twice. The first time it's used just to decide whether to display the whole block at all as it could be empty. This is a must.</p>
  
  <p>I've tried to simplify it with no errors. The shortest way with the same functionality I've got is the
  <strong>Improved code</strong> below:</p>
  
  <pre><code>&lt;div *ngIf="getData(places); let myList"&gt;
    &lt;div *ngIf="myList.length &gt; 0"&gt;
      &lt;select&gt;
        &lt;option *ngFor="let place of myList" [ngValue]="place.placeId"&gt;{{place.description}}
        &lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The bad thing is the Improved code has an additional wrapper - an additional div.</p>
  
  <p>Is it possible to avoid this additional div? I don't know if I can combine that two *ngIfs if the second ngIf uses the variable declared in the first one.</p>