Forem: Angular Material Dev

Summer Sale: 50% Off Angular Material Blocks (Ends April 9)

Dharmen Shah — Fri, 03 Apr 2026 15:05:23 +0000

Just a quick reminder — the Summer Sale is live!

All Angular Material Blocks licenses are 50% off, and the discount ends tonight.

If you're building dashboards, admin panels, internal tools, or SaaS apps with Angular Material, Angular Material Blocks can save a significant amount of UI development time with production-ready blocks, layouts, and templates.

What you get

300+ Angular Material UI blocks
Application shells and layouts
Dashboard templates
Marketing page sections
CLI to install blocks directly into your project
Built for Angular 21 + Angular Material + Tailwind CSS
Lifetime access

After the sale, prices go back to normal.

👉 Get 50% off here: https://ui.angular-material.dev/#pricing

If you only want to get templates, all of them are also on 50% discount, head over to https://ui.angular-material.dev/templates/, find your favourite template & simply get it!

Thanks for your support.

Best,
Dharmen Shah
Creator, Angular Material Blocks

You can now get templates individually 🎉

Dharmen Shah — Wed, 18 Mar 2026 15:39:07 +0000

Hi there,

I’ve got a big update for you 👇

✨ You can now purchase templates individually

Until now, templates in Angular Material Blocks were only available as part of the full bundle.

Starting today, you can buy individual templates separately — so you can pick exactly what you need for your project.

Why this matters

No need to buy the full bundle
Start faster with a specific template
Pay only for what you actually use

Whether you’re building a dashboard, analytics platform, or workflow system, you can now choose the right template and get started instantly.

What you get

All templates are:

Built with Angular 21 + Angular Material
Styled using Tailwind CSS
Production-ready and fully responsive
Designed for real-world applications

👉 Browse available templates
https://ui.angular-material.dev/templates

As always, thanks for building with Angular Material Blocks.

Best,
Dharmen Shah
Creator, Angular Material Blocks

New Angular Dashboard Template: Overview

Dharmen Shah — Sun, 08 Mar 2026 06:36:19 +0000

Hi there,

I’m excited to announce a new template in Angular Material Blocks 🎉

✨ Introducing: Overview

Overview is a modern dashboard template designed for building data-driven applications with rich visualizations and interactive analytics.

It includes multiple ready-to-use dashboard pages such as:

KPI Overview – track support metrics, SLA performance, and call volume trends
Retention Analysis – cohort retention tables and user engagement insights
Workflow Scenario Analysis – simulate operational scenarios and measure impact
Agents Management – advanced tables with filtering, sorting, and performance metrics

Built with a modern Angular stack

Angular 21
Angular Material 21
Tailwind CSS 4
Zoneless architecture
Responsive layout
Light & dark themes
ng2-charts (Chart.js)
Drawers, overlays, and advanced UI patterns

The template is designed for building analytics dashboards, workflow tools, internal systems, and operational platforms with a highly customizable and performant architecture.

🔎 Live preview
http://template-overview.angular-material.dev/

📦 Learn more about the template
https://ui.angular-material.dev/templates#overview

Thanks for building with Angular Material Blocks.

Best,
Dharmen Shah
Creator, Angular Material Blocks

Implement Enter/Exit Animations with Angular CDK Overlay

Dharmen Shah — Fri, 16 Jan 2026 05:44:20 +0000

Angular CDK's Overlay module provides a powerful way to create floating panels that appear over your application's content. These overlays are commonly used for dropdowns, tooltips, modals, and context menus. While overlays work great out of the box, adding smooth enter and exit animations can significantly enhance the user experience.

In this article, we'll explore how to implement sophisticated enter/exit animations with Angular CDK Overlay using signals, dynamic animation classes and understand the true power of new Angular Animations's APIs.

What is Angular CDK Overlay?

The Angular CDK (Component Dev Kit) Overlay is a module that allows you to open floating panels on top of the current page. Unlike traditional CSS positioning, the Overlay module handles:

Positioning: Automatically positions the overlay relative to a trigger element
Repositioning: Dynamically adjusts position when the overlay doesn't fit in the viewport
Backdrop Management: Provides optional backdrop with click-outside handling
Z-Index Management: Manages stacking context for multiple overlays
Scroll Handling: Repositions or closes overlays on scroll

Prerequisites

Before we begin, ensure you have Angular CDK installed:

ng add @angular/cdk

And the basic styles for the overlay are imported correctly in your application:

@import '@angular/cdk/overlay-prebuilt.css';

Creating the Overlay Wrapper Component

Let's build a reusable overlay wrapper component that handles animations automatically based on the overlay's position.

Component Structure

First, let's create the component with signals for reactive state management:

import {
  CdkConnectedOverlay,
  CdkOverlayOrigin,
  STANDARD_DROPDOWN_BELOW_POSITIONS,
  ConnectedOverlayPositionChange,
  ConnectedPosition,
} from '@angular/cdk/overlay';
import {
  Component,
  ChangeDetectionStrategy,
  input,
  computed,
  signal,
} from '@angular/core';

@Component({
  selector: 'app-overlay-wrapper',
  templateUrl: './overlay-wrapper.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CdkConnectedOverlay],
})
export class OverlayWrapperComponent {
  // Input signals for component configuration
  readonly trigger = input.required<CdkOverlayOrigin>();
  readonly positions = input<ConnectedPosition[]>([]);
  readonly panelClass = input<string>('');

  // State signals
  readonly isOpen = signal(false);
  readonly animationDirection = signal<'up' | 'down'>('down');

  // Computed animation classes based on direction
  readonly enterAnimationClass = computed(() => {
    const direction = this.animationDirection();
    return direction === 'up' ? 'animate-fade-in-up' : 'animate-fade-in-down';
  });

  readonly leaveAnimationClass = computed(() => {
    const direction = this.animationDirection();
    return direction === 'up' ? 'animate-fade-out-down' : 'animate-fade-out-up';
  });

  // Computed overlay positions with offset
  readonly overlayPositions = computed(() =>
    STANDARD_DROPDOWN_BELOW_POSITIONS.concat(this.positions()).map(item => ({
      ...item,
      offsetY: item.overlayY === 'bottom' ? -8 : 8,
    }))
  );

  toggleOverlay(): void {
    this.isOpen.update(value => !value);
  }

  close(): void {
    this.isOpen.set(false);
  }

  onPositionChange(event: ConnectedOverlayPositionChange): void {
    this.animationDirection.set(
      event.connectionPair.overlayY === 'bottom' ? 'up' : 'down'
    );
  }
}

Key Features Explained

Signals for Reactive State: We use Angular signals for state management, making the component reactive and efficient.
Dynamic Animation Classes: The component automatically determines whether the overlay opens upward or downward and applies appropriate animation classes.
Position Tracking: The onPositionChange method tracks the overlay's position, allowing us to adjust animations accordingly.
Flexible Configuration: Input signals allow customization of trigger element, positions, and panel classes.

Instead of STANDARD_DROPDOWN_BELOW_POSITIONS, you can also use STANDARD_DROPDOWN_ADJACENT_POSITIONS to position the overlay adjacent to the trigger element. To learn more about how positioning works, see the official Angular CDK Overlay documentation.

Template Implementation

Now let's create the template that uses the CDK Connected Overlay:

<ng-template
  cdkConnectedOverlay
  [cdkConnectedOverlayOrigin]="trigger()"
  [cdkConnectedOverlayOpen]="isOpen()"
  [cdkConnectedOverlayPositions]="overlayPositions()"
  [cdkConnectedOverlayHasBackdrop]="true"
  [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
  [cdkConnectedOverlayPanelClass]="panelClass()"
  (backdropClick)="close()"
  (positionChange)="onPositionChange($event)">
  <div
    [animate.enter]="enterAnimationClass()"
    [animate.leave]="leaveAnimationClass()">
    <ng-content />
  </div>
</ng-template>

Template Features

cdkConnectedOverlay: The main directive that creates the overlay
cdkConnectedOverlayOrigin: References the trigger element
cdkConnectedOverlayOpen: Controls overlay visibility
cdkConnectedOverlayPositions: Array of preferred positions
cdkConnectedOverlayHasBackdrop: Enables backdrop for click-outside detection
[cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'": Sets the backdrop class to transparent. Note that cdk-overlay-transparent-backdrop is a class that is provided by the Angular CDK library..
Content Projection: <ng-content /> allows flexible content insertion

The real power of new Angular Animations APIs

animate.enter and animate.leave are Angular's built-in animation APIs that apply CSS animation classes to elements during enter and exit transitions. These APIs are designed to apply animation classes only when elements are being added to or removed from the DOM.

The key benefit is that Angular automatically manages the element's lifecycle during animations. When using animate.leave, Angular waits for the animation to complete before removing the element from the DOM. In our case, this means the overlay content remains visible throughout the exit animation, and the framework handles the timing automatically—we don't need to write any extra code to delay the destruction or manually remove elements. This is all managed by Angular's animation system.

For more details, see the official Angular animations guide.

CSS Animation Classes

Now, let's implement the CSS animation classes. These animations provide smooth fade and slide effects:

/* Base animation configuration */
.animate-fade-in-up,
.animate-fade-in-down,
.animate-fade-out-up,
.animate-fade-out-down {
  animation-duration: 200ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: both;
}

/* Fade in from bottom (sliding up) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation-name: fadeInUp;
}

/* Fade in from top (sliding down) */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-down {
  animation-name: fadeInDown;
}

/* Fade out to bottom (sliding down) */
@keyframes fadeOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

.animate-fade-out-down {
  animation-name: fadeOutDown;
}

/* Fade out to top (sliding up) */
@keyframes fadeOutUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.animate-fade-out-up {
  animation-name: fadeOutUp;
}

Animation Details

Duration: 200ms provides a snappy but smooth animation
Timing Function: cubic-bezier(0.4, 0, 0.2, 1) creates a natural ease-out effect
Transform Distance: 10px vertical movement is subtle yet noticeable
Opacity Transition: Fades from 0 to 1 (enter) or 1 to 0 (exit)

Using the Overlay Wrapper

Here's how to use the overlay wrapper component in your application:

import { Component, viewChild } from '@angular/core';
import { CdkOverlayOrigin } from '@angular/cdk/overlay';
import { OverlayWrapperComponent } from './overlay-wrapper.component';

@Component({
  selector: 'app-dropdown-example',
  template: `
    <button
      #trigger="cdkOverlayOrigin"
      cdkOverlayOrigin
      (click)="overlay.toggleOverlay()">
      Open Menu
    </button>

    <app-overlay-wrapper
      [trigger]="trigger"
      #overlay>
      <div class="menu-content">
        <button (click)="overlay.close()">Option 1</button>
        <button (click)="overlay.close()">Option 2</button>
        <button (click)="overlay.close()">Option 3</button>
      </div>
    </app-overlay-wrapper>
  `,
  imports: [CdkOverlayOrigin, OverlayWrapperComponent],
})
export class DropdownExampleComponent {
  overlay = viewChild.required(OverlayWrapperComponent);
}

Additional Styling

Add some basic styling for your overlay content:

.dropdown-panel {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 200px;
}

.menu-content {
  padding: 8px 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.menu-content button {
  display: block;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  transition: background-color 150ms;
}

.menu-content button:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

Looking for more?

Head out to Flyout Menus by Angular Material Blocks for a more advanced implementation of flyout menus with Angular CDK Overlay.

Conclusion

Implementing enter/exit animations with Angular CDK Overlay enhances the user experience by providing visual feedback and smooth transitions. By combining Angular's signals with CDK's positioning system, we've created a reusable component that:

Automatically adjusts animations based on overlay position
Provides a clean, reactive API using signals
Supports flexible configuration through input signals
Maintains performance with OnPush change detection

The approach demonstrated here can be adapted for various use cases including dropdowns, tooltips, context menus, and custom floating panels. The key is to keep animations subtle, performant, and purposeful.

Happy coding! 🚀

Live Playground

New Flyout Menu Blocks Built with Angular CDK Overlay

Dharmen Shah — Fri, 16 Jan 2026 05:40:52 +0000

We’ve just added a brand new set of blocks to Angular Material Blocks 🎉

✨ Introducing: Flyout Menus

These new Flyout Menu blocks are built using Angular CDK Overlay APIs, combined with Angular Material and Tailwind CSS—designed for modern, interactive UI patterns.

They’re perfect for:

Marketing and product navigation
Feature and pricing flyouts
Rich menus with layered interactions

All blocks are production-ready, accessible, and easy to integrate into real Angular apps.

👉 Explore the new flyout menus here:
https://ui.angular-material.dev/blocks/marketing/elements/flyout-menus

New Release 🚀 Insights Template for Angular 20 & Tailwind 4

Dharmen Shah — Tue, 16 Dec 2025 06:07:45 +0000

Hi there 👋,

I am excited to announce the launch of our newest premium template:

✨ Insights — A Data-Driven Template for Angular

Insights is built for one purpose: to help you feed, filter, and analyze data with clarity — while giving you a production-ready UI that feels clean, modern, and customizable.

Whether you're building dashboards, analytics tools, admin systems, or CRUD apps, Insights gives you the structure, components, and patterns you need to move fast.

What's inside Insights?

✔️ Dynamic Filtering + URL Query Parameters
Users can refine data visualizations with shareable deep-links.

✔️ Rich Charting
Powered by ng2-charts (Chart.js) with reusable chart compositions.

✔️ Dark & Light Themes
Beautiful defaults with full customization support.

✔️ Full Application Flows

Sign-in & onboarding
Reports dashboard
Transactions
Settings & user management
Tables with input drawers
Interactive filterbar

Everything is connected and ready to plug into real backend APIs.

Tech Stack

Angular 20
Angular Material 20
Tailwind CSS 4
Zoneless
Chart.js (ng2-charts)
Completely responsive
Accessible & semantic

Why developers love it

Because Insights removes UI boilerplate—so you can focus on your product logic.

It’s flexible enough for startups and powerful enough for enterprise dashboards.

👉 Explore the Insights Template

Live preview -> https://template-insights.angular-material.dev/

More details -> https://ui.angular-material.dev/templates#insights

Happy building!
Dharmen Shah

🚀 New SaaS Website Template Added: "Database" Is Now Live

Dharmen Shah — Tue, 25 Nov 2025 06:17:20 +0000

We’re excited to announce a brand-new addition to Angular Material Blocks — introducing Database, a complete website template designed for SaaS products, developer tools, and modern cloud platforms.

Database is built with the latest Angular ecosystem:

Angular 20
Angular Material 20
Tailwind CSS 4
Zoneless architecture
Light & Dark theme support
Markdown docs using marked.js
Shiki-powered code highlighting

SaaS website template showcasing DataBase product with responsive desktop and mobile interfaces highlighting web application features

🌟 What’s inside?

A beautifully designed landing page

Landing page for a modern database service with usage statistics and pricing information

Pricing page

Database pricing page showing three subscription tiers with different features and pricing for Starter, Teams, and Business plans.

About page

A markdown-driven changelog system

Changelog is written using Markdown with custom angular components and redered using markedjs!

Shiki powered code highlighting

Shiki is the goto highlighter for codes! And it was perfect fit for this template.

Whether you’re launching a new SaaS, building a DevTool, or creating documentation for your product, Database gives you a professional, production-ready foundation to ship faster.

👉 Live Preview: https://template-database.angular-material.dev/
👉 Get the Template: https://ui.angular-material.dev/templates#database
👉 All Blocks & Templates: https://ui.angular-material.dev/

If you have any feedback or need help integrating the template into your Angular project, we’re always happy to help!

Happy coding!

New Release: The Complete Dashboard Template for Modern Angular Applications

Dharmen Shah — Wed, 22 Oct 2025 11:46:54 +0000

Today, we're launching our most ambitious and powerful product yet: The Dashboard Template.

See more details at: https://ui.angular-material.dev/templates#dashboard

This isn't just a new set of blocks. It's a complete, production-ready application starter, built on the most modern Angular stack available. We designed it to be the perfect foundation for your customer-facing analytics, helping you drive revenue and ship your product in a fraction of the time.

A Complete SaaS Dashboard, Out-of-the-Box

This template includes every core feature you need for a modern data application:

📊 Analytics Overview: A full dashboard with KPI cards, usage meters, ng2-charts with custom tooltips, and more.
📄 Advanced Data Tables: A "Details" page with robust, multi-select filters and a clean layout.
⚙️ Complete Settings Pages: Pre-built, functional forms for General, Billing & Usage, and User Management (with roles).
🎨 Full Theming: Beautiful light/dark modes and full customization capabilities to match your corporate identity.

Powered by a Cutting-Edge Tech Stack

We built this on a future-proof foundation, so you can start with the best:

Angular 20 with Angular Material
Zoneless Architecture (for peak performance and simplicity)
Tailwind CSS 4
New Angular Animations API
Chartjs with custom tooltips

Stop rebuilding the same boilerplate. Get the ultimate starter template for your next big idea and focus on what makes your application unique.

View more details about dashboard

Happy coding!

Weekly Recap: Our Charts Collection is Now Complete!

Dharmen Shah — Mon, 06 Oct 2025 07:04:13 +0000

What a week for data visualization! We've been on a roll, and in case you missed anything, we've now officially completed our entire Charts category with five incredible new collections.

You now have a complete, end-to-end toolkit for building beautiful, insightful, and professional dashboards in your Angular applications.

Here’s a quick recap of everything that launched this week:

Chart Compositions

The grand finale! These aren't just charts; they are complete, real-world dashboard layouts that combine charts, stats, tables, and filters into one powerful block.

Explore Compositions

Line Charts

The cornerstone of any dashboard. Track trends over time with our versatile collection, perfect for visualizing website traffic, portfolio performance, and revenue.

Explore Line Charts

Spark Area Charts

Add at-a-glance trends to your high-density dashboards. These compact, minimalist charts are perfect for stock tickers, KPI summaries, and portfolio lists.

Explore Spark Area Charts

Bar Lists

The cleanest way to visualize ranked data. Instantly see your top screens, visitor locations, or order statuses in a scannable, easy-to-read format.

Explore Bar Lists

Chart Tooltips

It’s the small details that matter. This collection provides a variety of tooltip styles to make your charts more interactive and informative for your users.

Explore Chart Tooltips

Thank you for following along as we built out this category. We're incredibly proud of how it turned out and can't wait to see the amazing dashboards and applications you'll create.

Happy coding!

Now Live: A Brand New Collection of Area Chart Blocks!

Dharmen Shah — Tue, 23 Sep 2025 04:20:08 +0000

We're excited to announce that the new Area Chart blocks collection is now officially live and available for you to use!

This is one of our most beautiful and functional collections yet, designed to make data visualization in your Angular applications both easy and powerful. We've created a wide variety of chart styles, perfect for any dashboard you can imagine:

Analytics & Performance Metrics
Financial & Revenue Dashboards
Real-time Monitoring
And many more!

Powered by the popular and robust ng2-charts library, each block is interactive, fully responsive, and comes in both light and dark themes right out of the box.

Stop building charts from scratch. Drop one of these blocks into your project and bring your data to life today.

Explore All Area Chart Blocks

We can't wait to see the incredible dashboards you'll build.

Happy coding!

AI Rules files for Angular Material

Dharmen Shah — Sat, 06 Sep 2025 12:17:18 +0000

Several editors, such as Cursor, have rules files useful for providing critical context to LLMs.

Angular Material Blocks now provides rules files to help you write code faster and more efficiently 🎉.

These rules files will help you with some common tasks of Angular Material 20, such as:

Theme configuration
Component and directive usage
Using and modifying tokens
Using theme styles
Using imports

Get rules files

All the rules files are also available on Angular-Material-Dev/angular-material-ai-rules GitHub repository, but you can use the CLI to add them to your project or simply copy and paste the content into your editor.

Visit https://ui.angular-material.dev/docs/rules-files#get-rules-files to know more!

Share Your Thoughts

Have suggestions for improving our rules files or ideas for new features? We'd love to hear from you! Create an issue in our Angular-Material-Dev/angular-material-ai-rules GitHub repository to share your feedback and help make these tools even better.

New Blocks Alert: A Huge Collection of Tables!

Dharmen Shah — Sat, 23 Aug 2025 10:26:50 +0000

Ending the week with one of our biggest drops of blocks yet!

We're thrilled to announce a brand new, comprehensive collection of Table blocks for Angular Material Blocks. We know that data tables are the backbone of almost every application, and this collection is designed to be your new go-to.

This is more than just a single component; it's a versatile library of styles and features, including:

Tables with rich content like user avatars and status badges.
Interactive elements like checkboxes for bulk actions.
Full support for both light and dark themes.

Whether you're building a user list, a transaction log, or a project dashboard, there's a design here for you.

Explore the New Tables Collection

If you have any questions, please feel leave comment.

Happy coding!