title: How to adjust the width of an input text in angular
body: <p>How to adjust the width of an input text in angular</p>
  
  <p>I have an input text component from another library, called 'njm-input'.<br>
  In my app, I'd like to use it and adjust its width.
  First, I put it in my flexbox div and the width of the div is 20% of the line.<br>
  Then, I'd like to set the width of 'njm-input' to '100px'.
  What I've done didn't work. <a href="http://plnkr.co/edit/dkrCYh?p=preview" rel="nofollow noreferrer">The online sample is here</a>.</p>
  
  <p>src/app.ts</p>
  
  <pre><code>import {Component, NgModule, VERSION} from '@angular/core'
  import {BrowserModule} from '@angular/platform-browser'
  import {NmjInputComponent} from './component/nmj-input'
  @Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
        &lt;h2&gt;Hello {{name}}&lt;/h2&gt;
        &lt;div class="grid"&gt;
          &lt;div class="grid-cell u-1of10"&gt;
            &lt;label&gt;name:&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="grid-cell u-1of2"&gt;
            &lt;nmj-input&gt;&lt;/nmj-input&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    `,
    styles: [`
      .grid {
        display: flex;
      }
      .grid-cell {
        flex: 1;
      }
      .grid-cell.u-1of10 {
        flex: 0 0 10%;
        text-align: right;
        background-color: red;
      }
      .grid-cell.u-1of2 {
        flex: 0 0 20%;
        border: 1px red solid;
      }
  
      .nmj-input {
        width: 100px;
      }
    `],
  })
  export class App {
    name:string;
    constructor() {
      this.name = `Angular! v${VERSION.full}`
    }
  }
  
  @NgModule({
    imports: [ BrowserModule ],
    declarations: [ App, NmjInputComponent ],
    bootstrap: [ App ]
  })
  export class AppModule {}
  </code></pre>
  
  <p>src/component/nmj-input.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'nmj-input',
    template: `
    &lt;input type="text" class='form-control'&gt;
    `,
    styles: [`
      :host { width: 100%; }
      .form-control { width: 100%; }
    `],
  })
  export class NmjInputComponent {
  }
  </code></pre>