Skip to main content

Angular Material Integration with Analog

This tutorial will guide you through the process of integrating the Angular Material component library into your Analog application.

Step 1: Installing the Angular Material library​

To begin, you need to install the @angular/cdk and @angular/material packages. Depending on your preferred package manager, run one of the following commands:

npm install @angular/cdk @angular/material

Step 2: Configuring the Angular Material library​

  1. Rename the src/styles.css file to src/styles.scss.
  2. If you're using zone.js, configure the scss preprocessorOptions to use the legacy api.
  3. Set the inlineStylesExtension property to 'scss' in the vite.config.ts file:
export default defineConfig(({ mode }) => {
  return {
    css: {
      preprocessorOptions: {
        scss: {
          api: 'legacy',
        },
      },
    },
    plugins: [
      analog({
        inlineStylesExtension: 'scss',
      }),
    ],
  };
});
  1. Update the index.html file to reference the SCSS file:
<head>
  <!-- other headers -->
  <link rel="stylesheet" href="/src/styles.scss" />
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link
    href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
    rel="stylesheet"
  />
  <link
    href="https://fonts.googleapis.com/icon?family=Material+Icons"
    rel="stylesheet"
  />
</head>
<body class="mat-typography">
  <!-- content -->
</body>
  1. Update the styles.scss file to import the Angular Material styles and define your custom theme:
@use '@angular/material' as mat;

html {
  color-scheme: light dark;
  @include mat.theme(
    (
      color: mat.$violet-palette,
      typography: Roboto,
      density: 0,
    )
  );
}

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;
}

html {
  height: 100%;
}

Optional Step: Configuring Animations​

If you want to activate or deactivate animations where needed, follow the correspondent steps:

  1. Open the app.config.ts file and add provideAnimations() as a provider
providers: [
  // other providers
  provideAnimations(),
],
  1. Open the app.config.server.ts file and add provideNoopAnimations() as a provider
providers: [
  // other providers
  provideNoopAnimations(),
],

Optional Step: Configuring Tailwind CSS​

If you use Tailwind CSS, add the Vite plugin to make it work correctly with Angular Material:

  1. Install the Tailwind Vite plugin:
npm install -D tailwindcss @tailwindcss/vite postcss @tailwindcss/postcss
  1. Add the plugin to your vite.config.ts:
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [
    tailwindcss(),
    // ...other plugins
  ],
});
  1. Add the Tailwind import to your styles entry point:
@import 'tailwindcss';

Note: Analog's current Tailwind v4 setup uses @tailwindcss/vite and also commonly includes a postcss.config.mjs with @tailwindcss/postcss so the build path and related integrations use the same Tailwind pipeline.

The scaffolded Tailwind v4 flow also expects a plain CSS entry file such as src/styles.css. If your app currently uses Sass or Less for the global entry point, keep your existing setup or migrate that entry file to CSS before adopting the default Tailwind v4 flow.

With these steps, you have configured animations to be enabled on the client and disabled on the server in your Analog application.

That's it! You have successfully installed and configured the Angular Material library for your Analog application. You can now start utilizing the Angular Material components and styles in your project.

For more information on theming with Angular Material, refer to the Angular Material Theming Guide.