4

I want to implement the Notched Outline Material theme with Angular Material. Material Design offers general install instructions (https://material.io/develop/web/components/input-controls/notched-outline) but gives little information on using it with Angular itself (https://material.io/develop/web/docs/framework-integration). Has anyone successfully implemented MDC Web, such as Notched Outline, into a framework? What was your process?

terahertz
  • 2,915
  • 1
  • 21
  • 33
ebakunin
  • 3,621
  • 7
  • 30
  • 49

1 Answers1

3

Angular Material Form field supports the Material Notched Outline theme. Set appearance to outline.

<mat-form-field appearance="outline">
  <mat-label>Outline form field</mat-label>
  <input matInput placeholder="Placeholder">
  <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
  <mat-hint>Hint</mat-hint>
</mat-form-field>

Material Notched Outline

See Stackblitz demo.

Christopher Peisert
  • 21,862
  • 3
  • 86
  • 117
  • The Outline (the one you posted image of) seems to be broken on Safari. It might need some manual styling to get it right. – Dino Aug 11 '19 at 21:16
  • @Dino Are you seeing this issue? https://github.com/angular/components/issues/11577 – Christopher Peisert Aug 11 '19 at 21:18
  • @Dino Yes, it looks like you're seeing the same issue. At the bottom of the issue case someone else indicated that the bug still exists with Safari. I recommend adding a comment to the case and/or up-voting the note about the issue being unresolved. – Christopher Peisert Aug 11 '19 at 21:24
  • @ChristopherPeisert is it possible to pass a token so that all MatFormFields default to "outline"? – ebakunin Aug 12 '19 at 13:34
  • @ebakunin Yes, you can configure default `MatFormField` options. See https://stackoverflow.com/a/54399778/1164465 – Christopher Peisert Aug 12 '19 at 15:23