Angular Mater 2 Normal Input

Question

Is there a way to achieve a normal inpout biox with angular material 2? such as the image

When ever i refer to the Docs In only see inputs where when click the placeholder text floats up.

You can also try utlising the native HTML `input`. – Edric Jul 03 '18 at 15:12 — Edric, Jul 03 '18 at 15:12

score 2 · Answer 1 · answered Jul 02 '18 at 07:49

You can use floatLabel="never" on your mat form field:

<mat-form-field appearance="legacy" floatLabel="never">
    <mat-label>Search here</mat-label>
    <input matInput>
    <mat-icon matSuffix>search</mat-icon>
</mat-form-field>

You cannot combine it with the appearance="outline" like in your example image as stated in the docs:

Note: only the legacy appearance supports the never option. never was originally added as a way to make the floating label emulate the behavior of a standard input placeholder. However the form field now supports both floating labels and placeholders. Therefore in the non-legacy appearances the never option has been disabled in favor of just using the placeholder.

For a non-floating placeholder with 'outline' style, use `` and leave out the ``. — G. Tranter, Jul 03 '18 at 20:47

score 1 · Accepted Answer · answered Jul 02 '18 at 08:09

1

I use this code in my project it is the same as your input but has an underline in the bottom of the input

I just make some changes in mat-form-field style

<mat-form-field   style="padding:3px;border-radius:60px;border-style:solid; border-color:#c0bfbf91;border-width:1px">
    <input matInput  value="Sushi">
  <mat-icon  matSuffix>search</mat-icon>
      <mat-placeholder style="margin-left:20px">Favorite food</mat-placeholder>
  </mat-form-field>

answered Jul 02 '18 at 08:09

Rabea AlTaradeh

213
1
9

I strongly suggest that you utilise CSS classes instead of inline styles as it's considered a bad practice and may cause code readability problems. – Edric Jul 03 '18 at 15:12
Yup... I added the solution when I am in working ... thanks for suggest – Rabea AlTaradeh Jul 04 '18 at 10:07

Angular Mater 2 Normal Input

2 Answers2