Learn Angular Material – Full Tutorial

Hey everyone, make sure to check out my channel for more content on Angular and React for complete beginners!

Thank you so much

Which would you recommend today Angular or React as a primary front-end framework?

Thank you so much for this video! I need to checkout your other videos!

Hello Eng Can You Help Me -> AggregateException: One or more errors occurred. (One or more errors occurred. (The npm script 'start' exited without indicating that the Angular CLI was listening for requests. The error output was: This version of CLI is only compatible with Angular versions ^13.0.0,

but Angular version 8.2.12 was found instead.

Update the tutorial with angular 13 and create a blog blog with both front end and Bach end admin panels 👍

I'm so happy i watched this video!!! Great work!!!

great material, thanks a lot!

Thanks for the tutorial

Looks like this tutorial needs serious update

Excellent tutorial!!!! Thanks a lot for the beginner-friendly course. Most of the Angular Material tutorials I've been watching have been a bit confusing for me, but after watching this, I've clearly understood how to add the most commonly used Angular Material components to my Angular project. For anyone out there who's just starting out in Angular Material, this is the time-saving eye-opener you need.

Thank you so much ! Really really good tutorial to get a good overview over Material, and feel confortable to start using it !! Really helpful !

coming from React MUI angular material was weird and I needed a video to understand, I appreciate it!

The tutorial is very good but it's full of ads every single chapter, very annoying.

mat-sidenav when you weant to open it fron an external component you have to click twice to open it, how we can fix it?

I cannot get the sort of the table to work just by copying every step when using Angular 12. However it does work if you use ngAfterViewInit() instead of ngOnInit().
The material docs shows that is the correct way with newer versions.

this is a very good tutorial. one thing to watch out for however is even two years later, with the latest versions of angular and materials, some adjustments need to be made so the page compiles, but I have got it to work every time I faced a road block so don't despair.

In a nav bar i haa problem: parameter ' state ' implicity has an 'any' type

Thank you… I need to change button or mat input color how can i change

Great video, but it's not a good idea to create separate module for material.

Learn Angular Material awesome!

0:13:00 Typography:

1. display

2. headings

3. body and caption

Components:

1. 17:19 Buttons and indicators (6 variants and 3 color choices):

1.1. Rectangular buttons: regular, raised, flat, stroked

1.2. Shaped: icon , fab, mini fab

1.3. Color directive: primary, accent, warn

1.4. disableRipple directive

1.5. mat-button-toggle #togleButton, checked {{toggleButton.checked}}

1.6. mat-button-toggle-group

1.7. 29:27 mat-icon

1.8. 32:01 matBadge="3" attribute, matBadgePosition, matBadgeSize, matBadgeColor="accent", matBadgeOverlap. Overlapping is nor recommended for text. [matBadgeHidden]="count === 0"

1.9. mat-progress-spinner, mat-spinner, mat-progress-bar. justify-content: space-between

2. 44:19 Navigation

2.1. mat-toolbar, mat-side-nav-container, mat-side-nav opened mode, mat-side-nav-content

2.2. 57:45 mat-menu, @mat-menu-item, [matMenuTriggerFor]="appMenu", sub menu, @xPosition, @yPosition, @matMenuContent, @matMenuTriggerData

3. Layout

3.1. 1:10:00 mat-list, mat-list-item, @dense, mat-nav-list, @mat-list-item, @matIcon, @matListIcon, mat-divider

3.2. 1:14:49 mat-grid-list, @cols, @rowHeight, @gutterSize, mat-grid-tile, @rowspan, @colspan

3.3. 1:19:56 mat-expansion-panel, mat-panel-expansion-header, mat-panel-title, mat-panel-description, mat-action-row, mat-accordion @multi, @hideToggle

3.4. 1:25:11 mat-card, mat-card-title, mat-cart-content, mat-cart-actions @align

3.5. 1:28:10 mat-tab-group, mat-tab @label {{tabRef.selectedIndex}} (selectedTabChange)

3.6. mat-horizontal-stepper @linear, mat-step @label @completed @optional, @matStepperPrevious, @matStepperNext, mat-vertical-stepper

4. Form controls mat-form-field @floatLabel @hideRequiredMarker @appearance, mat-label:

4.1. 1:37:20 @matInput, @required, mat-hint @align

4.2. 1:44:00 mat-select @multiple, mat-label, mat-option, [(value)]="selectedValue", mat-optgroup @label

4.3. 1:50:16 form mat-form-field > input [matAutocomplete]="auto" [dispalyWith]="displayFn" [formControl]="myControl", mat-autocomplete #auto

4.4. 2:00:40 mat-checkbox @labelPosition, mat-radio-group, mat-radio-button

4.5. 2:05:18 mat-form-field > input @matInput [matDatepicker]="myDatePicker" [min], [max] [matDatepickerFilter]="fn", mat-datepicker-toggle [for]="myDatePicker" @matSuffix, mat-datepicker #myDatePicker @startView

4.6. 2:11:50 @matTooltip, @matTooltipPosition, @matTooltipShowDelay="600", @matTooltipHideDelay

4.7. 2:15:07 import {MatSnackBar}; this.snackBar.open(); this.snackbar.afterDismissed().subscribe(); this.snackbar.onAction().subscribe()

5. 2:24:10 h2 Modals and popups. @mat-dialog-title, mat-dialog-content, mat-dialog-actions, button @mat-dialog-close; dialogRef.afterClosed().subscribe()

6. 2:23:40 Data tables.

6.1. mat-table [dataSource]="dataSource"> ng-container @matColumnDef> mat-header-cell @*matHeaderCellDef, mat-cell @*matCellDef="let element", mat-header-row @*matHeaderRowDef="displayedColumns", mat-row @*matRowDef="let row; columns: displayedColumns;"

6.2. 2:42:31 Exploring data table 2:47:36 filtering MatTableDataSource 2:51:45 sorting mat-table @matSort, mat-header-cell @mat-sort-header; MatSort

6.3. 2:55:12 Data Table Pagination. mat-paginator [pageSizeOptions]="5,10,20" @showFirstLastButtons; div @class="mat-elevation-z8"

6.4. 2:58:20 Virtual Scrolling. import {ScrollingModule}; cdk-virtual-scroll-port @itemSize="100"> @*cdkVirtualFor

Angular material is sick. Headache. No wonder so many of them avoid it as if plague or leprosy.

I'm first time learner of Angular Material, is this tutorial okay for me , because currently there is angular material 12.0.4

this man out here saving my job

Will there be an updated video for Angular Material 12?

which key used for triple equal in same plane ?????? (39:07)

Great Simple on the point Explanation. Loved it. Subscibed!!

Thanks!

Thank you, Mr. Sashi Tharoor Sir. This tutorial was very helpful for me.

Most search grids in the app will reset the search results upon selecting the 'Reset' button. This usually also resets the column order and sorting if they had been changed. However, on the Member Search (My List) pages, the column and sorting are not reset.

Steps to Reproduce :-

Open the Member Search (My List) Managed tab
Select 'Female' from the Gender search option
Move the Gender column to the far left and sort by this column
Select the 'Search' button and notice the search results given
Select the 'Reset' button
Expected Result: The Search Results are cleared and the column location/sorting are reset

Actual Result: The Search Results are cleared but the column location/sorting are NOT reset.

Please can you help me out

save much time for me to understand Material UI, thanks!

❤️ 👌 🙏 🚀 Nice tutorial, Thank you!!!

I need second like button!

You make it look so easy!

La DSI de JCS vous fait un bisou !

you did avodat kodesh explaining everything in the docs well done sub++++++