Material angular: grupo de entrada y botones md en la misma línea

Solución:

Prueba el siguiente código:

<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>

vea una muestra en el siguiente enlace http://codepen.io/cmwang-cottageclothing/pen/BjpdVQ?editors=1000

Me gustaría dar una respuesta contemporánea a esta popular pregunta.

1. Utilizar [matSuffix] en el botón

Angular Material te devolvió a ese y proporcionó la directiva matSuffix para colocar un elemento al final del campo del formulario.

Por lo tanto, su solución se vería así:

  <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>

Vea el código completo del ejemplo en https://stackblitz.com/edit/angular-mvndsv.

2.Haga mat-form-field para llenar el ancho

Para cumplir con el ancho del elemento padre, modifique el estilo de mat-form-field:

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

3. Utilice las propiedades ‘flex’ de CSS, no @angular/flex-layout directivas

Para proyectos grandes, recomendaría usar propiedades CSS flexibles y evitar usar flex directivas del paquete @ angular / flex-layout.

Si bien a primera vista, puede parecer útil poner una directiva flexible, en lugar de escribir estilos CSS, será contraproducente en proyectos más grandes una vez que el proyecto comience a crecer y construya sus clases y mixins de CSS y comience a extenderlos en los componentes:

1. Las directivas ‘flex’ traerían ambigüedad sobre dónde se aplican las propiedades de estilo.
2. Los problemas de depuración requieren comprender las propiedades flexibles de CSS reales, tal como las ve / las manipula en las herramientas de desarrollo del navegador. Entonces, usando las directivas ‘flex’:
   • requeriría que los desarrolladores comprendan cómo las propiedades de la directiva se convierten al CSS;
   • y una vez que tienen CSS funcionando, tienen que convertirlo manualmente en directivas, lo que introduce otro punto de falla.

---

---

Utiliza Nuestro Buscador