material.angular.io | Docs site for Angular Components | Frontend Utils library

I'm using Angular 10, on click the following function is executed to preform direction change:

I created an Angular project using the CLI. I'm using SCSS, and I included Angular Material with a custom theme iirc. I added a couple dummy components, and the app still built fine. Then I needed to style my components using Angular Material. In order to do so, I added @use '~@angular/material' as mat; to the first line of my style.scss file. Once I did this, the app will no longer build. It always throws the following error:

I followed the Angular Tour of Heroes tutorial: https://angular.io/tutorial and I wanted to try adding a button that triggers a dialog on the dashboard (https://material.angular.io/components/dialog/overview). However, when I press the Test Dialog button, an empty/blank dialog pops up and it's a long, skinny box that shows up on the left side of my screen taking up full height. I don't know why it isn't displaying the html from DialogtestComponent. Here is my code related to the dialog:

dialogtest.component.html

Are angular material and material-ui and Materializecss related to material design?

If you learn one does it make it easy to learn and apply the rest?

I'm trying to implement server-side filtering by date in a table. I've got a matDatePicker that allows me to choose a certain date. As soon as i click it, an http call is made and the data from it is put in the table.

The http call should look like this:

https://bgpie.net/api/rrc/00/sequence?limit=20&minStartDate=2021-05-19T22:00:00.000Z&page=1

but it looks like this:

https://bgpie.net/api/rrc/00/sequence?page=1&limit=10&minStartDate=Thu%20May%2020%202021%2000:00:00%20GMT+0200%20(Central%20European%20Summer%20Time)

Whenever I use the matDatePicker the component's property startDate!: Date is updated, in this case it gets updated to Thu May 20 2021 00:00:00 GMT+0200 (Central European Summer Time). This value translates to the one above when i put it in as an HttpParameter like this:

I'm working in an Angular (v11) project that's using Material (v11).
I'm working on a page where users can select 1 of several options. These options are going to appear as mat-cards with lines of info. I want it to look (in simple terms) like this:

I'm using a radio-button-group to do this (https://material.angular.io/components/radio/overview).

I have a styling issue. I want The radio button circle to be aligned with the top of the card, like the picture above shows.
However, by default, the circle is floating in the middle on the entire container, so it looks like this:

Now, I could add a class to the radio button circle with a negative margin-top so it will be pushed upward to be aligned with the top of the mat-card. But my problem with that is the height of the mar-cards can be different.

Check out this stackblitz demo, it shows the option with the negative margin-top, but one of the mat-cards is bigger, so it's circle isn't aligned to the top.

Is there a better way to get the radio circle aligned to the top of the card?
Or just a better way to get the design I'm wanting in general?

According to the MatAutocomplete documentation, there is a classList input to style the panel.

@Input('class') classList: string | string[]

Takes classes set on the host mat-autocomplete element and applies them to the panel inside the overlay container to allow for easy styling.

When I do I expected that I would see the test-class added to the mat-autocomplete-panel? But this does not work.

Can someone please explain how this input is to be used?

Stackblitz

I added Angular Material to my project using Angular-CLI. I selected the Purple/Green pre-built theme. According to the preview of the theme, the background color should be dark. But my background color still white. Why doesn't my background color change to dark? Any solution?

I was following the guide at https://material.angular.io/guide/getting-started. I do manage to display material design elements, but my mat-icon do not get styling.

This is what i'am getting

This is what it should look like

component html: