Angular-material: input-group and md-buttons on same line

Would like to provide a contemporary answer to this popular question.

1. Use [matSuffix] on the button

Angular Material got you back on that one and provide matSuffix directive to place an element at the end of the form field.

Hence, your solution would look like:

  <mat-form-field>
    <mat-placeholder>Search reports</mat-placeholder>
      <input matInput type="search">
      <button mat-button matSuffix mat-stroked-button aria-label="search">
        <mat-icon>search</mat-icon>
    </button>
  </mat-form-field>

See the full code of the example at https://stackblitz.com/edit/angular-mvndsv.

2. Make mat-form-field to fill the width

To fulfil the width of the parent element, alter the style of mat-form-field:

mat-form-field.mat-form-field {
  width: 100%;
}

3. Use CSS 'flex' properties, not @angular/flex-layout directives

For big project, I'd recommend to use flex CSS properties and avoid using flex directives from @angular/flex-layout package.

While at the first glance, it may look handy to put a flex directive, rather than writing CSS styles, it will backfire on a bigger projects once the project start growing and you build your CSS classes and mixins and start extending them in the components:

1. 'flex' directives would bring ambiguity on where the style properties get applied from.
2. Debugging issues requires understanding the actual CSS flex properties, as you see/manipulate them in the browser's developer tools. So using the 'flex' directives:
   • would require devs to understand how the directive's properties get converted to the CSS;
   • and once they've got working CSS they have to manually convert it to directives, which introduces another point of failure.

Try the following code:

<form layout layout-align="center" layout-padding>
    <div layout="row" flex>
        <md-input-container flex class="md-icon-float md-block md-title">
            <label>Your font number</label>
            <!-- below is the material icons -->
            <md-icon class="material-icons">phone</md-icon>
            <input type="text">
        </md-input-container>
        <div>
            <md-button class="md-raised">
            <!-- below is the material icons -->
                <md-icon class="material-icons">search</md-icon>
            </md-button>
        </div>
    </div>  
</form>

see a sample in the following link http://codepen.io/cmwang-cottageclothing/pen/BjpdVQ?editors=1000