Hi everyone! Welcome to Angular Aesthetics! I’m jazzed to start this new series
all about the beauty of Angular. My name is Emma Twersky and I’m a Developer
Relations Engineer at Google on the Angular team. Today we’re starting with something I add
to every app I ng new: Angular Material. Angular Material is the implementation of
Material Design, Google’s design system, for Angular. A design system is
a collection of visual design patterns and components that can
be used to create user experiences. At Google, we use these components in our more
than 2,600 Angular applications to create a consistent, cohesive look and feel. Externally,
the same components provide a flexible way to utilize the power of a design system like
Material within your own Angular applications. Sooo, why use a component
library like Angular Material? Out of the box, it provides high quality,
versatile and frictionless components to quickly get your app up, running and functional.
It also includes built in consideration for things like accessibility and usability, which
aren’t just nice to have, their requirements. Here’s a few use cases: If you’re an individual developer creating a quick
MVP demo. Adding Angular Material to your app builds upon the design resources of hundreds
of Google designers, developers and experts to ensure your app is polished and
allows you to showcase your ideas quickly in a high quality demo, without
having to dig into the HTML and SCSS. If we think a little larger, you might be a
freelance team building a site for a local brand. Here, we can use the versatility of Material
Theming on our Angular Material components to cohesively customize the look and feel to that
brand, without having to start from scratch. At the largest scale, a Fortune 500 company
building multiple applications across a larger brand, can use the Material component library
ensures a consistent vocabulary between cross functional teams and it'll help create a
consistent look and feel across applications. Now that we understand what we’re
working with, let's get set up. In this series, we’ll build an Angular version
of a video application, kinda like YouTube. In this first part, we’ll learn how to add Angular Material and get started adding
and using the components provided. Ok, to get started, let’s
open up our project in VSCode! You can find the GitHub repository for
this project in the video description. First things first, let’s serve our
application to see what we’re working with. We have some form of a video player application,
but the styling is all over the place and I can’t figure out what I’m looking at… so let’s add
Angular Material and see if we can clean this up. In my terminal I’m going to run a single
command: ng add @angular/material. One command and that’s absolutely it!
This command automatically adds Angular Material, the Component Developer
Kit, and Angular Animations. Now we’re going to make
three command line choices: First we choose a theme.
There are four prebuilt choices, the light themes, deeppurple-amber and
indigo-pink and the dark themes, pink-bluegrey and purple-green, and a custom theme.
These themes impact the primary and accent colors of our application. And you can think more
broadly about themes conveying customizations, brand identity and emotion in your apps
through color, type, shape and motion. For now I’m going to roll with indigo-pink, and we can always customize
that theme later down the line. Next, for global Angular Material
typography styles, I'm going to select yes. This declares global typography styles, and will
be helpful when we look at customizing our theme. Finally, for including browser
animations, I’m selecting the default Yes. This imports the BrowserAnimationsModule and
enables the out of the box animation system in Angular Material. Now that our schematic has
run, let’s see what’s changed: The project dependencies were
automatically added to the package.json. We’ve added the Material Design icon font
and Roboto, the default Material font, to our index.html.
And we have also added a few global CSS style resets. Now that we’re all set up, let's get
started using those Material components! We’re going to start by replacing a clickable
<div> with a Material button. Beyond visual improvements, this will help screen readers
identify the button and add ARIA role support, ensuring a more accessible and
intuitive experience for users. There are three steps to remember
each time you get started. First, we import the component’s
module into our AppModule. This gives our app access to use that component. Next, we're going to add the
component to the template. Here we’re replacing our <div>
with that Material button. Finally let’s check our work in our
served application to see the changes. And there we go! We now have a beautiful
Material Button in our application, but we’re not done there! How did I know to use a mat-button
directive or that I could change the color of the button?
To understand our options, let's head to the documentation to
see all that Angular Material can do. Right now I’m on material.angular.io and
I’m looking through the various components! Let’s go to Button to see what else we can do. I see here that I have a ton of options for button
appearance. I like the look of this flat-button, so I’m going to go back and change
my code to see what that looks like. Ok, I like the direction this is headed! I’m going to go ahead and head off screen and
replace the rest of my messy HTML with Angular Material components - I'll be right back, pause
the video and do the same if you’re coding along! Ta-da! We’re back! Here’s my UI now
that I’ve implemented some additional Material components into this application.
I know that it looks like a lot, but I've only actually added just a few components, and you can
view all of this code in the GitHub repository. Let's take a look at some of the
components that I've chosen to add. I’ve replaced all the links and tags
with buttons and Material icons, and my videos are now a scrollable list
of Cards. I also have a Navigation bar with an Input for search and a few other
goodies like these chips that allow you to sort. If you’re coding along, I’d love to see what
you did! Did you choose a different theme? Maybe you chose some other components to go ahead and
implement along the way? Share your projects on Twitter with the hashtag #AngularAesthetics
so we can see what you’ve built! In this video, we learned how to get up,
running and functional with Angular Material, and the benefits it brings us
out of the box as a high quality, versatile and consistent component library. Together we transformed an inaccessible,
unusable application by adding the library, importing modules, and using our components in our
templates, plus how to search the documentation so that we could find more options
and capabilities along the way. And while doing all of that,
we kinda built a cool app! Thanks for watching along as I explore
the beauty of Angular - let us know what else you’d like to see on this
channel in the comments below, and go ahead and like and
subscribe while you’re down there! I’ll see you next time!
