title: ngIf Display Another DOM Element in Angular 2
body: <p>Not sure if this is possible, but I am building a dynamic HTML table of products.  I am evaluating each product's "updatedDate" and determining if that date is less than the current date minus 7 days - <strong>todayMinusSeven</strong> days is a variable I am declaring in my TypeScript component file initializing it to the current date minus seven days:</p>
  
  <pre><code>this.todayMinusSeven = new Date();
  this.todayMinusSeven.setDate(this.todayMinusSeven.getDate() - 7);
  </code></pre>
  
  <p>I am trying to figure out how to display my div element of id "notice" from the *ngIf condition in the HTML table.  Essentially, if any product's updatedDate is less than the current date minus seven days, then display the "notice" div.  Here is my HTML:</p>
  
  <pre><code>&lt;div id="notice" class="err-notice"&gt;
      &lt;img src="../error.svg" /&gt;
      There are products that have not been updated in the past seven days...please notify the support department for further information
  &lt;/div&gt;
  &lt;table&gt;
      &lt;thead&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;ID&lt;/th&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Updated On&lt;/th&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr *ngFor="let product of products?.results"&gt;
              &lt;td&gt;
                  &lt;ng-container *ngIf="product.updatedOn &lt; todayMinusSeven"; else nonotice;"&gt;
                      &lt;img src="../error.svg" /&gt;
                  &lt;/ng-container&gt;
                  &lt;ng-template #nonotice&gt;
                      &lt;img *ngIf="selected" src="../product-open.svg" /&gt;
                      &lt;img *ngIf="!selected" src="../product.svg" /&gt;
                  &lt;/ng-template&gt;
              &lt;/td&gt;
              &lt;td&gt;{{product.id}}&lt;/td&gt;
              &lt;td&gt;{{product.name}}&lt;/td&gt;
              &lt;td&gt;{{product.updatedOn}}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Whether or I need to do this in the HTML or the component TypeScript file I am not sure, I am getting the list of products from an HTTP service class and subscribing it to an array of Product objects, so I would prefer not to have to traverse the array for this condition since it is already being traversed in the HTML markup.  Is this possible to do in HTML with Angular 2/4?</p>
  
  <p>Thanks!</p>