title: Failure to Compile HTMLCollectionOf<Element>
body: <p>I'm writing an eCommerce app, so I have a popup for user when clicks add to cart which allows user to select the variety and quantity of the product user want to add. The popup includes a select form and a number input. I then have to access what was input into these to show the appropriate information in the cart. </p>
  
  <p>I tried to access the information using: </p>
  
  <pre><code>let input = (&lt;HTMLInputElement&gt;document.getElementsByClassName('number_input'));
  </code></pre>
  
  <p>But that gives this error:</p>
  
  <blockquote>
    <p>ERROR in src/app/layout/products/products.component.ts(93,18): error TS2352: Type 'HTMLCollectionOf' cannot be converted to type 'HTMLInputElement'.
      Property 'accept' is missing in type 'HTMLCollectionOf'.
    src/app/layout/products/products.component.ts(111,14): error TS2352: Type 'HTMLCollectionOf' cannot be converted to type 'HTMLInputElement'.</p>
  </blockquote>
  
  <p>Failed to compile</p>
  
  <p>Visual Studio recommended that I include <code>unknown</code> in addition to <code>HTMLInputElement</code> to access the information, so I tried:</p>
  
  <pre><code>let input = (&lt;HTMLInputElement&gt;&lt;unknown&gt;document.getElementsByClassName('number_input'));
  </code></pre>
  
  <p>But that gives this error: </p>
  
  <blockquote>
    <p>ERROR in src/app/layout/products/products.component.ts(91,37): error TS2304: Cannot find name 'unknown'.
    src/app/layout/products/products.component.ts(109,33): error TS2304: Cannot find name 'unknown'.</p>
  </blockquote>
  
  <p>This is the code for my inputs. It utilizes a modal from bootstrap</p>
  
  <pre><code>&lt;div class="modal fade" id="variedades_y_cantidades" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true"&gt;
    &lt;div class="modal-dialog modal-dialog-centered" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h5 class="modal-title" id="bebida_descripcion"&gt;AGREGAR {{ bebida.descripcion }}&lt;/h5&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col"&gt;&lt;div class="form-group"&gt;
                &lt;label for="variadedes"&gt;Variaded:&lt;/label&gt;
                  &lt;select class="form-control" id="variadedes"&gt;
                      &lt;option *ngFor="let detalle of detalle_bebida"&gt;{{detalle.variedad}}&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;&lt;/div&gt;
            &lt;div class="row"&gt;&lt;div class="col"&gt;Cantidad: &lt;input type="number" name="cantidad" min="1" style="width: 70px;" class="number_input" value="1"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;CERRAR&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary" (click)="onModalAgregarClick($event)" data-dismiss="modal"&gt;AGREGAR&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to be able to access the data without any errors so I can compile the app to run.</p>