title: Dynamic Angular Forms: How to Set Input Width Dynamically for Each Control
body: <p>I don't know if this is possible but i have built a dynamic form component which works quite well and i can control a number of items through a configuration file.</p>
  
  <p>One item i have not been able to control is the width of the input field, I have tried a dozen ways but none seem to work. i.e setting width in the component when creating the form control etc</p>
  
  <p>Does anyone know if what i am trying to do is actually possible and can point me in the right direction.</p>
  
  <p><strong>Template Code</strong></p>
  
  <pre><code>&lt;div fxLayout="row"&gt;
      &lt;div [formGroup]="formGroup" fxLayoutAlign="start" fxLayoutGap="10px"&gt;
          &lt;div *ngFor="let form_elem of formTemplate"&gt;
              &lt;div *ngIf="form_elem.visible === 'true'"&gt;
                  &lt;mat-form-field&gt;
                      &lt;mat-label&gt;{{ form_elem.label }}&lt;/mat-label&gt;
                      &lt;input
                          matInput
                          type="text"
                          formControlName="{{ form_elem.name }}"
                          class="{{ form_elem.width }} "
                      /&gt;
                  &lt;/mat-form-field&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Typescript Code</strong></p>
  
  <pre><code>import {
      ChangeDetectionStrategy,
      Component,
      EventEmitter,
      Input,
      Output
  } from "@angular/core";
  import { FormGroup, FormControl } from "@angular/forms";
  
  @Component({
      selector: "fw-form-array-item",
      templateUrl: "./form-array-item.component.html",
      styleUrls: ["./form-array-item.component.scss"],
      changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class FormArrayItemComponent {
      @Output() remove = new EventEmitter&lt;FormGroup&gt;();
      @Input() formGroup: FormGroup;
      @Input() formTemplate: any;
  
      constructor() {}
  
      ngOnInit() {
          let group = {};
          this.formTemplate.forEach(input_template =&gt; {
              group[input_template.label] = new FormControl('');
          });
      }
  }
  </code></pre>
  
  <p><strong>Form Template Config File</strong></p>
  
  <pre><code>export class OrdersProductsFormTemplate {
      config = [
          {
              type: "textBox",
              label: "id",
              name: "id",
              width: "50%",
              justify: "left",
              visible: 'true',
              disabled: true
          },
          {
              type: "textBox",
              label: "Name",
              name: "name",
              width: "100%",
              justify: "left",
              visible: 'true',
              disabled: false
          },
          {
              type: "textBox",
              label: "Currency",
              name: "currency",
              width: "100%",
              justify: "left",
              visible: 'true',
              disabled: false
          },
          {
              type: "textBox",
              label: "Retail",
              name: "retailPrice",
              width: "100%",
              justify: "left",
              visible: 'true',
              disabled: false
          },
          {
              type: "textBox",
              label: "Supplier Price",
              name: "supplierPrice",
              width: "100%",
              justify: "left",
              visible: 'true',
              disabled: false
          }
      ];
  }
  </code></pre>