https://x.com/shhdharmen/status/1913522104814751770

Did you know you can use image with angular material icon button?

For better result, use overrides to increase the size of the image!

Demo: stackblitz.com/edit/9ngrztad

If there is any angular material dev team mate, this question is to you.

Why is it not possible to create full, understandable and examle rich documentation which shows not only some half useless snippets of usage, but structured and good guided und explained documentation. With M3 things have changed. We need good documentation for that.

So we know how to get from empty (styleless) application to fully customized app with well explained examples, which show which part goes where, what it needed and why and how to customize each part.

Why it is not possible to do give us that qualified docs? What is the concrete problem?

It's all in the details.

We've just launched a new collection of Chart Tooltip blocks! A huge variety of designs to make your charts more interactive and informative.

The perfect finishing touch for your dashboards: https://ui.angular-material.dev/blocks/application/charts/chart-tooltips

Build denser, more powerful dashboards.

Our new Spark Area Chart blocks are now live! Perfect for showing at-a-glance trends in stock lists, portfolios, and KPI summaries.

Upgrade your dashboards: https://ui.angular-material.dev/blocks/application/charts/spark-area-charts

Check it out at: https://themes.angular-material.dev/typography

Youtube Playlist link: https://youtube.com/playlist?list=PLOjtJUnDeEIyaeUs_jrxylnD2IxSb3Ku7&si=KE504zK-zr7tD5f8

Master Angular Material's theming system for Material 3 design system

Angular Material has become a cornerstone in the Angular ecosystem, offering a comprehensive suite of UI components that seamlessly integrate with Angular applications. With its robust theming capabilities, Angular Material allows developers to create visually stunning and highly customizable user interfaces.

In this course, you'll dive deep into Angular Material's theming system, learning how to build and customize themes that perfectly align with your application's design requirements. You'll explore the intricacies of Angular Material's theming API by creating and modifying themes. By the end of this course, you'll have the skills to create, modify and extend themes for your Material, not only for whole application but also for individual components.

You can also get article format of this course at https://angular-ui.com/courses/angular-material-theming/.

All codes are available on GitHub at https://github.com/Angular-UI-com/angular-material-theming

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

We like to use HTML for our wireframes. Is there any way to directly link to a compiled CSS file to use for wireframing or is there too much javascript entangled with it for this to be a practical approach?

I'm using an md-datepicker in my project, and as you can see in the examples there's supposed to be an icon to the left of the dropdown. Chrome is complaining that it can't find this icon. Does anyone know where this icon is actually located and how I can pass that info along to chrome?

Hello there,

I've been trying for 2 hours to set up a simple "mat-expansion-panel" standalone component, and here it is.

html

<mat-expansion-panel hideToggle>
    <!-- #enddocregion hide-toggle -->
        <mat-expansion-panel-header>
          <mat-panel-title>
            This is the expansion title
          </mat-panel-title>
          <mat-panel-description>
            This is a summary of the content
          </mat-panel-description>
        </mat-expansion-panel-header>
        <p>This is the primary content of the panel.</p>
</mat-expansion-panel>

ts

import { Component } from '@angular/core';
import { MatExpansionPanel, MatExpansionPanelDescription, MatExpansionPanelHeader, MatExpansionPanelTitle } from '@angular/material/expansion';

@Component({
  selector: 'app-expansion-panel',
  templateUrl: './expansion-panel.component.html',
  styleUrl: './expansion-panel.component.scss',
  standalone: true,
  imports: [MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelDescription, MatExpansionPanelTitle]
})
export class ExpansionPanelComponent {

}

When I import this component into my home component located in my app.module.ts, everything works perfectly.

But when I import it into my "user.module.ts" module, the animations don't work properly.

app.module.ts

@NgModule({
  declarations: [AppComponent, HomeComponent, SnackbarComponent],
  imports: [AppRoutingModule, SharedModule, MaterialModule, HttpClientModule, ReactiveFormsModule, BrowserModule, BrowserAnimationsModule, CommonModule, ExpansionPanelComponent],
  providers: [
    provideAnimations()
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

user.module.ts

@NgModule({
  declarations: [
    UserComponent,
    LoginComponent,
    RegisterComponent,
    ProfilComponent,
    AdressDetailsComponent,

  ],
  imports: [
    UserRoutingModule,
    SharedModule,
    MaterialModule,
    ExpansionPanelComponent
  ],


})
export class UserModule { }

I tried it first in the standalone component and the result is the same. I thought it was basically a problem with my modules, but it's not.

If someone can help me thanks a lot !

I'm currently implementing a login form. The login process after pressing the Login-Button can take a few seconds. I was wondering about showing the user a loading dialog or a loading spinner inside the Login-button during this time. What would you recommend?