title: Angular 2 TypeError: Cannot read property 'toUpperCase' of undefined
body: <p>I am developing a medical website , i want show alert in page of medicament.component.HTML when the quantity of medicaments is &lt; 50 .
  I did this :</p>
  
  <pre><code> &lt;span *ngFor="let medicament of medicaments" &gt;
          &lt;span *ngIf="{{medicament.quantity}} &lt; 50"&gt;
               &lt;div class="callout callout-danger lead"&gt;
            &lt;h4&gt;Alert!&lt;/h4&gt;
            &lt;p&gt;Vous devez charger le stock de medicaments {{medicament.nom}}                         
    de type {{medicament.type}}  &lt;/p&gt;
          &lt;/div&gt;
          &lt;/span&gt;&lt;/span&gt;
  </code></pre>
  
  <p>But i don't know why it doesn't work , the error is :</p>
  
  <pre><code>       &gt; Unhandled Promise rejection: Template parse errors:
          TypeError: Cannot read property 'toUpperCase' of undefined ("&lt;span              
         *ngIf="medicaments"&gt;
      &lt;span *ngFor="let medicament of medicaments" &gt;
          &lt;span [ERROR -&gt;]*ngIf="{{medicament.quantity}} &lt; 50"&gt;
               &lt;div class="callout callout-danger lead"&gt;
         "): MedicamentComponent@26:18
       Can't bind to '*ngIf' since it isn't a known property of 'span'.             
       ("&lt;span *ngIf="medicaments"&gt;
      &lt;span *ngFor="let medicament of medicaments" &gt;
          &lt;span [ERROR -&gt;]*ngIf="{{medicament.quantity}} &lt; 50"&gt;
               &lt;div class="callout callout-danger lead"&gt;
        "): MedicamentComponent@26:18
  </code></pre>