Angular Material - Type 'string' is not assignable to type 'MatSnackBarHorizontalPosition'

Question

I have created a function that shows the message using material snackbar.

showMessage(message: string, position = { horizontal: "right", vertical: "bottom" }): void {
    const _htmlMessage ="some message";
    this.snackBar.openFromComponent(SnackbarComponent, {
        data: {
            html: _htmlMessage
        },
        duration: 2000,
        horizontalPosition: position.horizontal,
        verticalPosition: position.vertical
    });
}

but this shows:

Type 'string' is not assignable to type 'MatSnackBarHorizontalPosition'.ts(2322)

snack-bar-config.d.ts(42, 5): The expected type comes from property 'horizontalPosition' which is declared here on type 'MatSnackBarConfig'

but if I directly assign the value like this:

duration: 2000,
horizontalPosition: "right",
verticalPosition: "bottom"

this works. How can I solve this?

Answer 1

Solution 1 : Define the type for position.

import {
  MatSnackBarHorizontalPosition,
  MatSnackBarVerticalPosition
} from '@angular/material/snack-bar';

showMessage(
    message: string,
    position: {
      horizontal: MatSnackBarHorizontalPosition;
      vertical: MatSnackBarVerticalPosition;
    } = { horizontal: 'right', vertical: 'bottom' }
  ): void {
    const _htmlMessage = 'some message';
    this._snackBar.openFromComponent(SnackbarComponent, {
      data: {
        html: _htmlMessage
      },
      duration: 2000,
      horizontalPosition: position.horizontal,
      verticalPosition: position.vertical
    });
}

Sample Solution 1 on StackBlitz

---

Solution 2: Cast both horizontal and vertical as respective types.

import {
  MatSnackBarHorizontalPosition,
  MatSnackBarVerticalPosition
} from '@angular/material/snack-bar';

showMessage(
    message: string,
    position = { horizontal: 'right', vertical: 'bottom' }
  ): void {
    const _htmlMessage = 'some message';
    this._snackBar.openFromComponent(SnackBarOverviewExample, {
      data: {
        html: _htmlMessage
      },
      duration: 2000,
      horizontalPosition: position.horizontal as MatSnackBarHorizontalPosition,
      verticalPosition: position.vertical as MatSnackBarVerticalPosition
    });
  }
}

Sample Solution 2 on StackBlitz

---

References

MatSnackBarHorizontalPosition & MatSnackBarVerticalPosition (Type aliases)