title: ngClass - Dynamically add class name based on @input
body: <p>I would like to dynamically add a class based on an input parameter but only if the input is an 'approved' string.</p>
  
  <p>I have a component with an input and class array from which I want to check the input against: </p>
  
  <pre><code>@Input() modalSize?: string;
  sizeClassList = ['xs', 'small', 'medium', 'large', 'xl'];
  </code></pre>
  
  <p>I have tried the following method within the component:</p>
  
  <pre><code>sizingMethod() {
    const isValid = this.sizeClassList.indexOf(this.modalSize) &gt;= 0;
    if (isValid) {
      return 'modal__dialog--' + this.modalSize;
    }
  }
  </code></pre>
  
  <p>Within the template:</p>
  
  <pre><code>&lt;div class="modal__dialog" [ngClass]="sizingMethod()"&gt; ... &lt;/div&gt;
  </code></pre>
  
  <p>Essentially I would like to add an additional sizing class based on an input where the user only has to input the size.</p>
  
  <p>If the user inputs [modalSize]="small", the class added will be 'modal__dialog--small' and if the user inputs [modalSize]="derp", no class will be added.</p>
  
  <p>What is a good way to go about this?</p>
  
  <p>*edit: Title edited to be more clear</p>