Forem: Dzmitry Hutaryan

How to make Angular Material inputs look like simple fields

Dzmitry Hutaryan — Thu, 13 Nov 2025 23:03:13 +0000

Introduction

Angular material is powerful library with a lot of features. I guess one of the most usable component is input. I'm sure every project uses forms.

Material design looks good but does not always correspond to our wishes. Pretty often we need to adapt UI to our design. It may not so easy, especially if we are talking about complex components.

In this article, I will show you how you can change material form field and make it looks like a simple field 🙂 When you have label above the field.

Init angular material

I won’t go into detail here. Just use the command and follow instructions:

ng add @angular/material

First step

Before we dive into css we need to do some preparation. We will provide some default options to do it once and forget.

{
  provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
  useValue: { appearance: 'outline', floatLabel: 'always' },
},

appearance: 'outline' - to have field with border only
floatLabel: 'always' - to have label always on top

Reduce input height

From my point of view, material field is too big by height. Let's make it a bit smaller. Actually, it's super easy now.

All we need is just set up values for some variables:

.mat-mdc-form-field {
  --mat-form-field-container-height: 2.25rem;
  --mat-form-field-container-vertical-padding: 0.5rem;
}

You can play with these values and find what fits your needs. As we used built-in variables, position for other elements automatically adjust to it.

Move label

Now, our label is still looking as before. Let's move it above input.
Label positioning is tricky but not for us.

First of all we have to change top property to raise the label higher. We will have to use a few classes for that.

.mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
  top: 8px;
}

Then move it to the far left position. Our field is divided into three sections.
So, we need to set up left property as negative width the first section:

.mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
  top: 8px; // depends on font-sized and your need
  left: -12px; // left section width
}

Looks not so good. Our label is cut and part of border is not visible. Let's fix it!

You can reach by change two properties for the same class:

.mat-mdc-notch-piece.mdc-notched-outline__notch {
  border-top: solid;
  clip-path: none;
}

That's it. Now your Material field visually behaves like a regular text input.

Bonus:

Label shifts when you focus input. It happens because border becomes 2px instead of 1px.

There are two options to solve it.

change border on focus to 1px

--mat-form-field-outlined-focus-outline-width: 1px;

change top property for focused input

.mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label {
  top: 7px;
}

Choose your option depending on your needs.

How to set up Angular material dark theme

Dzmitry Hutaryan — Fri, 15 Aug 2025 15:45:49 +0000

It's already some time to have dark theme is a standard for applications. For sure, it's not always necessary.

I'm gonna show you how to apply dark theme for Angular material and how to use it. Enough words and go dive into the code.

We have an Angular app with initiated Angular material. First, let's set the material theme in general.

html {
  @include mat.theme(
    (
      color: mat.$azure-palette,
      typography: Roboto,
    )
  );
}

Now we have only light theme. Can we use the same color palette but for dark mode? Yes, definitely.

html {
  color-scheme: light dark;

  @include mat.theme(
    (
      color: mat.$azure-palette,
      typography: Roboto,
    )
  );
}

If we add color-scheme: light dark; it will mean we set the mode depending on the user’s system preferences. It happens because Angular material uses light-dark function under the hood depends on the value of color-scheme.

I guess you have a question: how user can change the theme by themselves? This is absolutely reasonable question. Before we continue with it I'd like to show you how you can simply override some properties.

html {
  color-scheme: light dark;

  @include mat.theme(
    (
      color: mat.$azure-palette,
      typography: Roboto,
    )
  );

  // if dark mode is activated
  // use the theme inside
  @media (prefers-color-scheme: dark) {
    @include mat.theme(
      (
        color: mat.$azure-palette,
      ),
      $overrides: (background: darkblue)
    );
  }
}

In this example above we just overrode the background for dark theme. You can use even an absolutely different theme. Why not? ;)

So, if you wanna allow user to change theme mode by themselves you have to create some toggle or select. It might contain system, light and dark values.

How it may look like:

  public readonly theme = signal<ThemeMode>('system');

  private readonly _renderer = inject(Renderer2);

  constructor() {
    effect(() => this._setTheme(this.theme()));
  }

  private _setTheme(theme: ThemeMode) {
    this._renderer.setProperty(
      document.body.style,
      'color-scheme',
      theme === 'system' ? 'light dark' : theme
    );
  }

This is just a simple example. It's up to you html coding and to add extra functionality like saving user choice and etc.

Pretty simple, isn't it?

Bonus

To make our theme transition more unusual we can use an experimental startViewTransition. Unfortunately, stackblitz doesn't support it. Try it locally and see the amazing view :)

To save your time I will attach the necessary code below:

constructor(@Inject(DOCUMENT) private readonly _document: Document) {
    effect(() => {
      const theme = this.theme();

      if (!this._document.startViewTransition) {
        this._setTheme(theme);
        return;
      }

      this._document.startViewTransition(() => {
        this._setTheme(theme);
      });
    });
  }

::view-transition-old(root) {
  animation-delay: 500ms;
}

::view-transition-new(root) {
  animation: circle-in 500ms;
}

// @keyframes move-side {
//   from {
//     translate: -100% 0;
//   }
//   to {
//     translate: 0 0;
//   }
// }

@keyframes circle-in {
  from {
    clip-path: circle(0% at 50% 0%);
  }
  to {
    clip-path: circle(120% at 50% 0%);
  }
}

That all changes you need! Try both animations to choose the best :)

Inspired by Kevin Powell

How to add loading spinner to Angular material button

Dzmitry Hutaryan — Tue, 22 Jul 2025 13:51:01 +0000

Angular material is a good UI library. For sure, we have a button component there. It works good except one thing - loading state.

Probably you (and me as well) used something like that (pseudocode)

<button>
  @if (loading) {
    <spinner />
  }
  Text
<button/>

It might be okay but let's do out live a bit easier :) We will create a directive that will add spinner to our buttons based on input value.

Init the directive

First, we init our directive and call it ButtonLoading (you can call whatever you want). As selector we will use button[matButton][loading]. So, our directive will be applied for material buttons with loading input (works for Angular 20+, you might change it for your Angular version).

We need two method for create spinner and destroy it. Both methods will be triggered when loading input changes.

import { Directive, effect, input } from '@angular/core';

@Directive({
  selector: 'button[matButton][loading]',
})
export class ButtonLoading {
  loading = input(false);

  constructor() {
    effect(() => {
      if (this.loading()) {
        return this._createSpinner();
      }

      return this._destroySpinner();
    });
  }

  private _createSpinner() {}

  private _destroySpinner() {}
}

Spinner

For spinner we will use already existed component MatProgressSpinner. We also need ViewContainerRef to create component, Renderer2 to create DOM-node inside MatButton and inject MatButton to get nativeElement.

Now our createSpinner method looks in this way. I've left some comments for you.

  get nativeElement(): HTMLElement {
    return this._matButton._elementRef.nativeElement;
  }

  private _createSpinner() {
    // do nothing if spinned exists
    if (this._spinner) return;

    // create spinner
    this._spinner = this._viewContainerRef.createComponent(MatProgressSpinner);
    // set diameter
    this._spinner.instance.diameter = 16;
    // set mode as infinity
    this._spinner.instance.mode = 'indeterminate';
    // create DOM-node
    this._renderer.appendChild(
      this.nativeElement,
      this._spinner.instance._elementRef.nativeElement
    );
  }

Other method destroySpinner will be much easier:

  private _destroySpinner() {
    if (!this._spinner) return;

    this._spinner.destroy();
    this._spinner = null;
  }

Now we can see our spinner. But we see the button text and spinner at the same time. Let's hide text and show spinner by center. We need to add a css class and some styles.

First, we'll add a class to know when we have spinner which was added by our directive.

effect(() => {
  if (this.loading()) {
    this._renderer.addClass(this.nativeElement, 'mdc-button-loading');

    return this._createSpinner();
  }

  this._renderer.removeClass(this.nativeElement, 'mdc-button-loading');

  return this._destroySpinner();
});

Then we'll just hide label and make spinner an absolutely positioned.

.mdc-button-loading {
  .mdc-button__label {
    visibility: hidden;
  }

  .mat-mdc-progress-spinner {
    position: absolute;
  }
}

Improvements

It's a good option to make button disabled when loading is active. Let's do it!

Add an input disabled (the same as material button has). Important to use transform option.

disabled = input(false, { transform: booleanAttribute });

Then add this state to effect. When we active loading we always disable button but when we deactivate it we use disabled value from the outside.

effect(() => {
  if (this.loading()) {
    this._renderer.addClass(this.nativeElement, 'mdc-button-loading');
    this._matButton.disabled = true;

    return this._createSpinner();
  }

  this._renderer.removeClass(this.nativeElement, 'mdc-button-loading');
  this._matButton.disabled = this.disabled();

  return this._destroySpinner();
});

That's it. You can modify it as you wish for your needs. You will find the complete result below.

Half year late post

Dzmitry Hutaryan — Thu, 05 Jun 2025 19:26:07 +0000

Yes, the title is right. This article should have been posted a half year ago. Why? It's a legendary issue on github for Angular material.

The new timepicker component was introduced in Angular 19. So many people were waiting it and finally got it. There are still timepickers from the community and from me as well :)

By this article I'd like to say thank you to @crisbeto and angular material team for the new timepicker for sure and especially for mention my timepicker library as an alternative. I'm really appreciate and proud of it. It means my efforts have been noticed and have not been in vain.

If you still don't understand what I'm talking about, check this out. ;) I tried to make timepicker as much close as possible to material spec. Maybe it's not ideal but nevertheless.

Feel free to use it, create an issue or give a star.

Format numbers easily and nicely

Dzmitry Hutaryan — Wed, 07 Feb 2024 09:42:38 +0000

Intro

We all use such data as numbers. Sometimes it's necessary to format numbers depending on language. Especially it's related to currencies. What if I'll tell you can use native javascript feature for that? Welcome Intl.NumberFormat- ES6 feature. Let me show you a few examples.

Basic

It's easy to use. All you need is your locale name:

new Intl.NumberFormat('en').format(5000.13) // 5,000.13
new Intl.NumberFormat('ru').format(5000.13) // 5 000,13

More over, we can use short form and it will be automatically rounded. Let's add some additional options for that:

new Intl.NumberFormat('en', {
  notation: 'compact',
}).format(5000.13) // 5K

new Intl.NumberFormat('hi', {
  notation: 'compact',
}).format(5000.13) // 5 हज़ार

new Intl.NumberFormat('ru', {
  notation: 'compact',
}).format(5000.13) // 5 тыс.

new Intl.NumberFormat('en', {
  notation: 'compact',
}).format(10500.13) // 11K

Currency

Intl allows to add a currency sign as well. No need to handle it by ourselves:

new Intl.NumberFormat('en', {
  style: 'currency',
  currency: 'USD',
}).format(5000) // $5,000.00

new Intl.NumberFormat('he', {
  style: 'currency',
  currency: 'ILS',
}).format(5000) // 5,000.00₪

By the way, currency sign position depends on locale:

new Intl.NumberFormat('ru', {
  style: 'currency',
  currency: 'USD',
}).format(5000) // 5 000,00 $

Range

From time to time we need to show a range of numbers. Intl has formatRange method for that:

const intl = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 1,
});

console.log(intl.formatRange(3, 5)); // $3.0 – $5.0
console.log(intl.formatRange(2.9, 3.1)); // $2.9 – $3.1

formatRange has interesting behaviour. It will add the "approximately equals" symbol if startRange and endRange round to the same values.

const intl = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0, // no numbers after dot, only integer
});

console.log(intl.formatRange(1.9, 3.1)); // $2 – $3
console.log(intl.formatRange(2.9, 3.1)); // ~$3

Now, you know a bit more.

Make layout with bidirectional text has never been so easy 🙌

Dzmitry Hutaryan — Sun, 28 Jan 2024 23:18:44 +0000

Intro

Sometimes we have to support multi language app. Some of them might have a different direction, form left to right. But how to keep our margins/padding the same? I know there are some tools for that, but actually there is a native solution.

Today we are going to talk about logical css properties:

margin-block-start
margin-block-end
margin-inline-start
margin-inline-end

padding-block-start
padding-block-end
padding-inline-start
padding-inline-end

inset-block-start
inset-block-end
inset-inline-start
inset-inline-end

border-block-start
border-block-end
border-inline-start
border-inline-end

These properties are similar to usual properties but with special sense.

Example 1

Let's say we have a container with padding: 20px 60px 80px 10px; (top right bottom left). Then we add direction: rtl; to change language direction. We will see that our right padding is 60px but we need 10px as before left padding was.

That's why we need logical properties.

padding-inline: 10px 60px;
padding-block: 20px 80px;

If we use logical properties out paddings will be changed with text direction as well. In this case right padding 60px will become 10px and vice versa. It works the same for writing-mode: vertical-rl;

You can play with margins on the codepen at the end of article.

Example 2

I guess it's clear for margins and paddings. But these properties work for borders as well.

Let's see the difference for left to right direction.

  border-inline-start: 10px solid #FFD54F; // left
  border-inline-end: 10px solid #4DD0E1; // right

Example 3

Only one type of property has left. As you might already guess inset-block/inset-inline allow us to apply logical properties for elements with absolute positioning.

When we have element with position: absolute; and use usual properties we won't see any changes. But if we use inset-block/inset-inline and change text direction we will se how position of element will be changed as well.

Try it yourself 😉

Bonus

Now, you know how to show element by center using one row of css.

  margin-inline: auto;

How to mix colors in css?

Dzmitry Hutaryan — Mon, 08 Jan 2024 12:09:25 +0000

There is a way to mix colors in pure css.
The color-mix() functional notation takes two color values and returns the result of mixing them in a given colorspace by a given amount. Now, it has a good enough browsers support and we can use it.

This function takes color interpolation method as the first parameter and colors as other parameters.

div {
  background-color: color-mix(in srgb, yellow, red);
}

As a result we will see a mixed color for yellow and red.
Moreover, we can manage how much color should be used to mix a new one.

div {
  background-color: color-mix(in srgb, yellow, red 75%);
}

In this case we will take 25% of yellow color and 75% of red color and mix them.

Don't think this feature will be used so much but it might be helpful sometimes.

How to use errorStateMatcher in Angular material

Dzmitry Hutaryan — Wed, 03 Jan 2024 22:24:19 +0000

We use form all the time and set up validation rules for it. Angular provides a good built-in solution for that. But today I'd like to talk about angular material form fields more.

There is nothing special when we use typically validation with mat-form-field. We just put error message inside mat-error component and set up which messages should be displayed for which errors.

ℹ️ Error messages are shown when the control is invalid and the user has interacted with (touched) the element or the parent form has been submitted.

Let's take a look a bit more complex example. I reckon that comparison two passwords fields will be a good example because we should compare value for both fields.
Let say we need to show error that passwords don't match under confirmPassword field only.

ℹ️ It's not difficult to show error under the field. But we need to say our field about this error to make it to be red. Otherwise, the field will know nothing about the error.

First of all we need to create a form with two fields. I will put all code into one file. You can see all at once.

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import {
  FormControl,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
  ],
  template: `
    <form [formGroup]="form">
      <mat-form-field appearance="outline">
        <mat-label>Password</mat-label>
        <input formControlName="password" matInput/>
        @if (hasError('password', 'required')) {
          <mat-error>Field is required</mat-error>
        }
      </mat-form-field>

      <mat-form-field appearance="outline">
        <mat-label>Confirm password</mat-label>
        <input formControlName="confirmPassword" matInput/>
        @if (hasError('confirmPassword', 'required')) {
          <mat-error>Field is required</mat-error>
        }
      </mat-form-field>

      <button color="primary" mat-flat-button>Save</button>
    </form>
  `,
})
export class App {
  readonly form = new FormGroup({
    password: new FormControl<string | null>(null, Validators.required),
    confirmPassword: new FormControl<string | null>(null, Validators.required),
  });

  hasError(controlName: string, error: string): boolean {
    return this.form.get(controlName).hasError(error);
  }
}

bootstrapApplication(App, {
  providers: [provideAnimations()],
});

We have set up our form. Now, we need to create and add validator to form.
This validator will compare values for two controls what's names we'll pass and return ValidatorFn.

function matchValidator(
  controlName: string,
  compareWith: string
): ValidatorFn | null {
  return (form: FormGroup) => {
    const value = form.get(controlName).value;
    return value && value === form.get(compareWith).value
      ? null
      : { match: true }; // error type
  };
}

Then we need to add our validator to the form.

readonly form = new FormGroup(
    {
      password: new FormControl<string | null>(null, Validators.required),
      confirmPassword: new FormControl<string | null>(
        null,
        Validators.required
      ),
    },
    { validators: [matchValidator('password', 'confirmPassword')] }
  );

Let's check it out to be sure. We should see { match: true } object for error property inside the form.

Everything works as expected. What's the next? We can show error messages under the field. But how can we get the field become red? How to tell our input about error state? That's why errorStateMatcher exist.

ℹ️ An ErrorStateMatcher must implement a single method isErrorState which takes the FormControl for this matNativeControl as well as the parent form and returns a boolean indicating whether errors should be shown. (true indicating that they should be shown, and false indicating that they should not.)

@Injectable({ providedIn: 'root' })
export class CrossFieldErrorMatcher implements ErrorStateMatcher {
  public isErrorState(
    control: FormControl | null,
    form: FormGroupDirective | NgForm | null
  ): boolean {
    return form.errors?.match && (control.touched || control.dirty);
  }
}

<mat-form-field appearance="outline">
  <mat-label>Confirm password</mat-label>
  <input formControlName="confirmPassword" matInput [errorStateMatcher]="matcher"/>
  @if (hasError('confirmPassword', 'required')) {
    <mat-error>Field is required</mat-error>
  }
  @if (form.hasError('match')) {
    <mat-error>Password don't match</mat-error>
  }
</mat-form-field>

I used @Injectable decorator here to inject state matcher to the component. That's it.

Final result:

Is there a way to use `errorStateMatcher` globally?

Yes, there is. For example, you want to change default behavior and show error only if form has been submitted. Let's create errorStateMatcher for that.

export class SubmittedStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control?.invalid && isSubmitted);
  }
}

Then we need to provide to your app module it instead of default ErrorStateMatcher.

providers: [
  {
    provide: ErrorStateMatcher,
    useClass: SubmittedStateMatcher,
  },
]

Hope, this article will help you with your validation 🙂

A new material timepicker component

Dzmitry Hutaryan — Thu, 28 Dec 2023 22:02:46 +0000

I'd like to introduce a material timepicker component. If you use angular material you might know this popular issue. People are desperate for a time selection but not date only. I was one of them.

Unfortunately, a lot of existent libraries were out of date, had not the best UI or their functionality didn't suit for my project, had some bugs. I could choose from literally 2 libraries and none of them satisfied me completely.

Let's go

Before we start let me tell you a few words. The timepicker is based on material design. You hardly recognise you're using a 3rd party library.

Install the library:



npm install --save @dhutaryan/ngx-mat-timepicker



yarn add @dhutaryan/ngx-mat-timepicker

Unfortunately, all good names were busy 🫣

Import MatTimepickerModule and MatNativeDateTimeModule to your module.



import { MatNativeDateTimeModule, MatTimepickerModule } from "@dhutaryan/ngx-mat-timepicker";

@NgModule({
  imports: [
    // ...
    MatTimepickerModule,
    MatNativeDateTimeModule,
    // ...
  ],
})
export class MyModule {}

Default adapter uses native JS date. You can create your own adapter and use whatever you want.

Add necessary styles:



@use "@angular/material" as mat;
@use "@dhutaryan/ngx-mat-timepicker" as mat-timepicker;

$my-theme: mat.define-light-theme(...);

// timepicker uses these component
@include mat.form-field-theme($my-theme);
@include mat.input-theme($my-theme);
@include mat.button-theme($my-theme);
@include mat.fab-theme($my-theme);
@include mat.icon-button-theme($my-theme);
@include mat.divider-theme($my-theme);

// timepicker theme
@include mat-timepicker.timepicker-theme($my-theme);

We've just set up our timepicker. It's time to use it:



<mat-form-field>
  <input type="text" matInput [matTimepicker]="timepicker" />
  <mat-timepicker-toggle matSuffix [for]="timepicker"></mat-timepicker-toggle>
  <mat-timepicker #timepicker></mat-timepicker>
</mat-form-field>

You can use another presentation mode if you like it more:

Looks like it's a part of angular material, isn't it?

You can find more usage examples on the documentation page.

Briefly about some features:

12h/24h format
dial/input mode
popup/dialog view
min/max time
different color palletes
custom action buttons
minutes interval
touchUi mode

What's the next?

There are some things to implement. Some of them are related to the adapter. It would be nice to have ready to use adapter with moment and luxon. Make components as standalone and so on.

I'm opened to any question and don't hesitate to create issues. Would be appreciated.

dhutaryan / ngx-mat-timepicker

Material timepicker based on material design

ngx-mat-timepicker

The timepicker module using Angular material.

Versions

mat-timepicker	Angular
18.x.x	>=18.0.0
17.x.x	^17.0.0
16.x.x	^16.0.0
15.x.x	^15.0.0
14.x.x	^14.0.0
13.x.x	>=13.0.0 && <15.0.0
12.x.x	>=12.0.0 && <15.0.0

Documentation

Check out the documentation.

Installation

You have to install the Angular Material and set it up. Learn more about the setup.

Install the library:

$ npm install --save @dhutaryan/ngx-mat-timepicker

$ yarn add @dhutaryan/ngx-mat-timepicker

Getting started

Import MatTimepickerModule to your project.

import { MatTimepickerModule } from "@dhutaryan/ngx-mat-timepicker";

@NgModule({
  imports: [
    // ...
    MatTimepickerModule,
    // ...
  ],
})
export class MyModule {}

Adapter

Add a timepicker adapter.

import { MatTimepickerModule, provideNativeDateTimeAdapter } from "@dhutaryan/ngx-mat-timepicker";

@NgModule({
  imports: [
    // ...
    MatTimepickerModule,
    // ...
  ],
  providers: [provideNativeDateTimeAdapter()]
})
export class MyModule {}

or create your own

import {

…

View on GitHub

Forem: Dzmitry Hutaryan

How to make Angular Material inputs look like simple fields

Introduction

Init angular material

First step

Reduce input height

Move label

Bonus:

How to set up Angular material dark theme

Bonus

How to add loading spinner to Angular material button

Init the directive

Spinner

Improvements

Half year late post

Format numbers easily and nicely

Intro

Basic

Currency

Range

Make layout with bidirectional text has never been so easy 🙌

Intro

Example 1

Example 2

Example 3

Bonus

How to mix colors in css?

How to use errorStateMatcher in Angular material

Is there a way to use errorStateMatcher globally?

A new material timepicker component

Let's go

What's the next?

dhutaryan / ngx-mat-timepicker

Material timepicker based on material design

ngx-mat-timepicker

Versions

Documentation

Installation

Getting started

Adapter

Is there a way to use `errorStateMatcher` globally?