Angular Material provides a set of reusable, well-tested and accessible UI components based on Google’s Material Design specification. This course will teach you how to build aesthetic, responsive websites using the angular material library. First, you'll learn the core concepts of material design. Next, you'll touch on developing your environment and setting up the components and services in your library. Finally, you will know how to build forms that validate user input. By the end of this course, you will have an understanding of the basics required to get up and running with development and building great looking responsive websites leveraging Material Design.
Ajden has worked on everything from embedded devices to large-scale enterprise systems during his 10+ years in commercial software development. Since 2007, Ajden has focused on Microsoft technologies and, more recently, on web technologies. Ajden is also a speaker at conferences and has a passion for teaching.
Course Overview Hi everyone, my name is Ajden Towfeek, and welcome to my course, Angular Material. I'm an independent software consultant at Towfeek Solutions, I teach and speak to whoever will listen; I also code, blog, and record screencasts on the latest web technology. Make sure to follow me on YouTube and Twitter for weekly updates. Angular Material provides a set of reusable, well tested, and accessible UI components based on Material Design. For developers using Angular, Angular Material is their reference implementation of Google's Material Design specification. Some of the major topics that we will cover include, core concepts of Material Design, setting up the development environment, using the components and services in the library, data tables with filtering, sorting, and pagination. By the end of this course you'll know how to build great-looking, responsive websites using the Angular Material library and be familiar with the core concepts of Material Design. Before beginning this course you should be familiar with Angular. If you have not done so already, be sure to check out some of the many Angular titles in the library. I hope you'll join me on this journey to learn Angular Material, with the Angular Material course at Pluralsight.
Introduction Hi, my name is Ajden Towfeek, and welcome to my Angular Material course. If you've seen any of my previous courses here on Pluralsight, you already know that my courses are code-oriented and straight to the point, no death by PowerPoint, no way. This course will teach you everything from setting up a streamlined development environment to building a production-ready, great-looking, responsive website leveraging Angular Material. Angular Material is both a UI component framework and a reference implementation of Google's Material Design specification. With the Angular Material team's own words, the goal is to build a set of high-quality UI components built with Angular and TypeScript, following the Material Design spec. These components will serve as an example of how to write Angular code following best practices. And this is sweet music to my ears. I personally can't think of anybody else more fit for the task of implementing best practices than the people behind Angular itself. Now, let's take a look at the beautiful application that we'll build throughout this course.
Material Design Hi, my name is Ajden Towfeek, and this is Angular Material. In this module we will learn about the core concept of Material Design. We are only on the second module and I've already used the word beauty a handful of times. So, why is beauty important? Because beauty improves you user experience. In the book Emotional Design by paragon of modern cognitive science and user experience, Don Norman states the following, attractive things work better. Don points to research done in Japan and Israel where people not only perceive beautiful interfaces to work better, but they also achieved better results in terms of time to close completion and amount of errors. But, and there's always a but, designing beautiful applications is hard. Making beautiful things is not easy, and that's why it's awesome to take advantage of existing visual languages like Material Design. Material Design is a complete design language that helps you to build beautiful applications. It was developed by Google with two goals in mind. First of all, to synthesize classic principles of good design, with the innovation and possibility of technology and science. And secondly, to provide a unified experience across platforms, device sizes, and ways of interacting.
Layout Component Hi, my name is Ajden Towfeek, and this is Angular Material. In this module we will create the layout for our contact manager app. We will use Angular's flex layout module that provides sugar to enable developers to more easily create modern responsive layouts, on top of CSS-free flexbox. By the end of this module we will have built the following layout for our application. Using layout components such as Toolbar and Sidenav we'll also associate breakpoints with mediaQuery definitions to adapt our layout, both for desktop and mobile devices. Awesome, so let's get on with it.
Displaying Real Data Hi, my name is Ajden Towfeek, and this is Angular Material. In this module we will load up our application with some real data and display its contents. By the end of this module you will have built the following app and you will have set up routing so we can load whichever contact we want by selecting them in the sidenav. And, it will look good on a mobile device as well. Now, let's see how we got this far in almost no time at all.
Using Data Tables Hi, my name is Ajden Towfeek and this is Angular Material. In this module we'll display data using the mat table component. By the end of this module you'll have the following data table implemented in the notes tab or our contact manager application, with features such as pagination, filtering, and also sorting.
Dialogs and Popups Hi, my name is Ajden Towfeek, and this is Angular Material. In this module we'll cover Dialogs and Popups. By the end of this module our application will look as follows, and we'll be able to enter new user data by pressing the Menu item in our toolbar and choose New Contact, which will show us a model dialog with an entry form for creating a new user. And we'll be able to select an avatar, and if we leave the Name field we'll get validation that a name is required. So, let's enter a name and we'll use the date picker to be able to choose a date, but let's just enter my birthdate, and some simple Bio, and Save our user. And we can see that we get navigated to our new user, and the snackbar popped up from the bottom. Now let's implement this.