Udemy

Platform

English

Language

Web Development

Category

Angular Material Masterclass & FREE E-Book

Practical Guide for Building Angular 12 Applications with Angular Material

4.37 (517 reviews)

Students

3 hours

Content

Jul 2021

Last Update
Regular Price

BLUE HOST
Blue Host
Fast, easy, and secure WordPress hosting in minutes + 1 free domain name
$2.95/month

What you will learn

Code in Github repository with downloadable ZIP files per section

Learn how to use the Angular Material Widget Library

Learn how to setup the Navigation Menu of your Angular Material Application

Learn how to use the most commonly needed Angular Material Form Widgets

Master the Angular Material Data Table, learn server-side Pagination, Sorting and Filtering

Learn how to build Angular Material Custom Dialogs

Learn how to build an Angular Material Custom Theme


Description

This Course In a Nutshell (includes the Typescript Jumpstart Ebook)

Angular by itself is an amazing framework, that together with the Angular CLI makes our life as developers simpler than ever. But imagine what it would mean if adopting this new framework would mean also that we would have to write manually our own form controls as well: such as for example date pickers, dropdowns and other commonly needed widgets.

Developing solid form controls, containers, navigation menus and modal components on top of pure Angular still requires a lot of time and effort, especially if we are looking for a consistently themed component suite with commonly needed advanced features such as for example great ergonomics, design and user experience (including animations).

The good news is that we don't have to do that anymore because together with Angular we now have available an amazing suite of Material Design components, ready to be used! And that is what this course is all about: The Angular Material component suite.

Course Overview

We will start first by scaffolding an Angular Material application for scratch from an empty folder, add it a theme and gesture support. Next, we will start exploring the Angular Material components starting with some navigation menu and icons.

The goal here is to show that its also possible to use Angular Material components also in a more incremental way, by mixing Angular Material Components with a couple of custom-made components and just some HTML/CSS. Later in this section, we will use a more advanced menu system where Angular Material is essentially taking over the whole application layout, with a side menu component.

We are then going to introduce container components such as for example Tab Containers and Material Cards, and we will show a complete example of how to use a data table with a data source, pagination and sorting. We will also show how to use Modals to edit some of data in the data table, for which we will use multiple different types of form components to build an editable form: date pickers, slider, and more.

At the end of the course, we will show we can customize the look and feel of the Angular Material component suite, by building our own custom theme.

What Will You be able to do at the End Of This Course?

You will be able to comfortably build an Angular application using Angular Material and the Angular CLI. You will be able to scaffold an application from an empty folder, and have gestures and animations working out of the box.

You will be able to setup the navigation menu of the application using the Angular Router and different types of Angular Material menus. You will be able to setup the main layout of your application using standard Angular Material container components such as Tab Containers or Cards, and use common components such as: data tables, lists, date pickers, and all sorts of form controls.

You will be able to build your own Modal dialogs, setup a custom theme and much more, and you will be able to focus your development effort on building the application core functionality itself, instead of building the infrastructure-level UI widgets, the UI design and the enhanced user experience that we get immediately out of the box with Angular Material.

Have a look at the course free lessons below, and please enjoy the course!


Screenshots

Angular Material Masterclass & FREE E-Book
Angular Material Masterclass & FREE E-Book
Angular Material Masterclass & FREE E-Book
Angular Material Masterclass & FREE E-Book

Content

Introduction

Angular Material Course Helicopter View

Recommended Software Versions

The Typescript Jumpstart Ebook

Angular Material Course Kickoff - Install Node, NPM, IDE, Lessons Code

Angular Material Hello World

Angular Material Navigation And Containers

Navigation and Containers - Section Introduction

Material Icon Component - Styling Angular Components

Material Dropdown Navigation Menu - Step-by-Step Implementation

Container Components - Tab Containers and Material Cards

The Material SideNav Navigation Menu

Angular Material Data Table

Data Table New Section Introduction -Server Pagination, Sorting and Filtering

Material Data Table Column Definition - matCellDef and matHeaderCellDef

Material Data Table Up and Running - Data Source and Custom Look and Feel

Material Data Table Client-Side Filtering with MatTableDataSource

Angular Material Custom Data Source - Initial Implementation

Angular Material Data Source - Loading Data From The Backend

Custom Data Source - Error Handling and Server Data Demo

Material Data Table Server Side Pagination

Material Data Table Loading Indicator

Angular Expression has Changed Error - Debugging and Explanation

How to Fix ExpressionChangedAfterItHasBeenCheckedError

Material Data Table Server-Side Sorting

Material Data Table Server-Side Filtering

Material Dialog + Form Components

New Section Kickoff - Material Dialog and Form Components

Angular Material Dialog - Passing Input Data

Receiving Input Data Inside the Material Dialog

Material Dialog Body Implementation

Angular Material Select Box

Angular Material DatePicker with MomentJs Integration

Dialog Section Conclusion - Sending Dialog Output Data

Angular Material Custom Theme + Angular CLI Sass Support

Angular Material Custom Theme - Building Our Own Theme Using Sass

Angular Material Custom Theme - Dark Themes

Angular Material Custom Theme - Defining a custom Palette

Course Conclusion

Other Courses

Bonus Lecture

Angular Material Course Conclusion and Key Takeaways


Reviews

F
Fatah16 September 2020

Covered a good portion of the Angular Material. Wish you elaborated more on custom themes. Thanks Vasco.

T
Teemu24 August 2020

Some errors in the material. Things are clearly explained! In some parts the video and github contain different SW code.

A
Anaximandro17 August 2020

Above my expectations. Usually I only attend to native speaker courses because there is a lot of trash-english speaker into udemy - this is not the case. Vasco is not an native english speaker however his english is paused and soft. The course is well presented and polished. He keeps on track into the subject and has a good planning. It's not an advanced course and it does requires pre knowledge of angular. I do recomend this course for anyone whom needs to see some practical examples of angular material in action without furter ado.

S
Sergio28 July 2020

Ottima, ma richiede un aggiornamento dei video (anche solo aggiungendo delle note scritte con le novità)

M
Mohit9 February 2020

I had a thorough knowledge about how to implement components of angular material in the angular application.Thank you.

T
Ted27 December 2019

Reasonably good delivery. Vasco's English accent is heavy, but mostly understandable. A few words take getting used to (for example, he pronounces 'category' as 'cuh - TEE - go ree' instead of 'CAT - uh -gor -ee'). This is mostly learn by doing; explanations are thin, but I don't know that Angular Material needs much theory / upfront explanation.

L
Lovjith19 December 2019

Extremely handy course. Saved me a lot of time R&D and most of my requirements are met in this course

R
Roy5 December 2019

While the course was a bit useful, it feels very incomplete, and I'm glad I have some prior experience with Angular Material. There is very little explanation about how things work or different ways you can do things, and I also found the instructor spending a lot of time talking about what we were going to do before doing it, usually spending too much time both at the end of a lesson and at the beginning of the next lesson repeating the exact same things. The coding itself however was very fast and there was a lot of jumping between files, so this was very hard to follow, while at the same time I found myself skipping a lot of "in this lesson we are going to add this and this and this". This also seems like it's either severely outdated or just very incomplete, there are tons of Angular Material components that aren't even mentioned, table, form and dialog is pretty much all it covers, (plus a short bit about custom themes). I have taken newer courses by the same instructor, and they are on a whole different level, so it seems he has improved a lot in the time since this one was created.

H
Heike19 August 2019

The course teaches the concepts of material so that it is possible to use this component library in own projects.

D
Duane12 July 2019

Vasco produces very good courses. Very detailed with complete functional applications. I'd recommend any of his courses.

J
Jacari17 May 2019

I'm a developer by trade, so I might be a little picky. However, right off the bat the lack of uniformity in code presentation, especially in a lecture, is a turn off. However, the instructor is at least thorough in his opening explanations.

R
Rodrigo19 April 2019

This is a good course on how to use Angular Material. It shows a few components and its use cases. The data table section surprised me, covers server side filtering, searching and paging. I think however, this course should have spent some time showing the documentation where we could see all components, show all the examples provided, etc.

M
Mullapudi7 April 2019

good explanation for angular material , but not all the components like accordion, any wizard and angular animations etc..

F
Fred3 March 2019

It is a good course as starter. I really like a next material course with more in depth of the development of themes and usage of other material components and how to tweak these.

R
Rafael11 February 2019

I take several courses from angular university, vasco always explain very good, in this case i miss an intro of what's is material design who the colors works


1442960

Udemy ID

11/22/2017

Course created date

11/20/2019

Course Indexed date
Bot
Course Submitted by