Angular Material Tutorial - 2 - Getting Started
Summary
TLDRThis video tutorial demonstrates the process of integrating Angular Material into an Angular application. It emphasizes the importance of consulting the documentation for up-to-date information and understanding the directives required for different components. The video guides viewers through the installation process using Angular CLI schematics, starting with creating a new project and adding Angular Material through the 'ng add' command. It also briefly covers the changes made to the project files and ends with a simple example of using the Material button component in an application.
Takeaways
- ๐ Emphasis on consulting the Angular Material documentation for staying updated and understanding the directives required for different components.
- ๐ Importance of having the documentation open while following the tutorials due to the vast number of components and their respective directives.
- ๐ฏ Two main reasons for using the documentation: staying updated with future releases and knowing component names for coding purposes.
- ๐ ๏ธ Demonstration of adding Angular Material to an Angular application using the CLI and schematics, specifically for Angular version 7.
- ๐ Explanation of the process involved in setting up Angular Material, including the steps for projects below version 6 and the use of CLI schematics for version 6 and above.
- ๐ป Showcasing the creation of a new project and the subsequent addition of Angular Material using the command 'ng add @angular/material'.
- ๐จ Selection of the Indigo-Pink theme and enabling of HammerJS for gesture recognition during the setup process.
- ๐ Discussion of the changes made to the project files such as angular.json, package.json, and index.html after running the setup command.
- ๐ Explanation of how to use the Material button component in an Angular application, including the steps for importing, adding to the module, and utilizing it in the HTML.
- ๐ Demonstration of switching between 'mat-button' and 'mat-raised-button' directives and observing the visual differences.
- ๐ Final outcome of having Angular Material successfully integrated and a working 'Hello World' button styled with Angular Material.
Q & A
What is the main topic of the video?
-The main topic of the video is how to add Angular Material to an Angular application.
Why is it important to refer to the documentation when working with Angular Material?
-It is important to refer to the documentation to stay updated with changes in future releases of Angular Material and to know the directives that need to be used for different components.
What are the two main reasons for using the documentation when working with Angular Material?
-The two main reasons are to stay updated with future releases and to know the component names and directives that are required for different components.
What command is used to check the version of Angular CLI?
-The command 'ng --version' is used to check the version of Angular CLI.
What is the minimum Angular version required to use CLI schematics for Angular Material?
-The minimum Angular version required to use CLI schematics for Angular Material is version 6.
How do you create a new Angular project?
-You can create a new Angular project using the command 'ng new project-name'.
What command is used to add Angular Material to an Angular project?
-The command 'ng add @angular/material' is used to add Angular Material to an Angular project.
What are the changes made to the angular.json file when adding Angular Material?
-The only change made to the angular.json file is the inclusion of a CSS file in the Styles array, which corresponds to the chosen theme (indigo-pink in the video).
What new dependencies are added to the package.json file when setting up Angular Material?
-Angular CDK and Angular Material are added to the list of dependencies in the package.json file.
How do you use the MatButtonModule in an Angular component?
-To use the MatButtonModule, you need to import it in the app.module.ts file and add it to the imports array.
How can you test if Angular Material is working correctly in your application?
-You can test if Angular Material is working correctly by using a Material component like MatButtonModule in your HTML and checking if it renders the styled button in the browser.
Outlines
๐ Introduction to Adding Angular Material
This paragraph introduces the process of adding Angular Material to an Angular application. It emphasizes the importance of consulting the documentation for staying updated with future releases and understanding the directives required for different components. The speaker explains that they will demonstrate the addition of Angular Material using the documentation and the Angular CLI, specifically for Angular version 7. The steps include navigating to the guides section of the documentation, setting up Angular Material through the CLI schematics, and ensuring that the Angular CLI is updated. A new project is created, and the 'ng add @angular/material' command is used to integrate the material library, with options for theme and gesture recognition. The paragraph concludes with an overview of the changes made to the project files, such as the inclusion of a CSS file, the addition of Angular CDK and Angular Material to dependencies, and updates to the package lock file and index.html.
๐ง Using Angular Material in the Application
This paragraph demonstrates how to use Angular Material in the application by integrating it with the project. It begins with importing the MatButtonModule from Angular's material library and adding it to the app module's imports array. The paragraph then shows how to use the MatButtonModule in the HTML by replacing the existing HTML with a button tag that includes the mat-button directive. The application is run to display a styled button with the text 'Hello World'. The paragraph further explains how to change the directive to mat-raised-button to see the difference in styling. The speaker highlights the necessity of referring to the documentation to understand the directives for various components. The video concludes with a brief mention of setting up the material module in the next video and encourages viewers to subscribe for future content.
Mindmap
Keywords
๐กAngular Material
๐กAngular Application
๐กDocumentation
๐กCLI (Command Line Interface)
๐กDirectives
๐กMaterial Design
๐กSchematics
๐กPackage.json
๐กModule
๐กComponent
๐กCommand
Highlights
Adding Angular Material to an Angular application is the focus of the video.
The importance of consulting documentation for staying updated with Angular Material and understanding the directives for different components.
For projects below Angular version 6, there are six different steps to set up Angular Material.
The demonstration uses Angular version 7 and leverages CLI schematics for adding Angular Material.
Creating a new Angular project named 'material-demo'.
The 'ng add @angular/material' command streamlines the process of setting up Angular Material.
The command adds a CSS file for the Indigo-Pink theme to angular.json.
Angular CDK and Angular Material are added to the dependencies in package.json.
Updates to the package-lock.json file and additional references in index.html are made by the command.
The style.css file includes 'hammerjs' for gesture recognition and a CSS reset for the body tag.
The app.module.ts file is updated to import the browser animations module.
A simple test of Angular Material's functionality is performed using the 'MatButton' component.
The 'MatRaisedButton' directive is used to demonstrate a subtle visual difference in the button styling.
The necessity of referring to the documentation to understand which directive to use for a particular component.
The video serves as an introduction to integrating Angular Material and encourages watching subsequent videos for more detailed guidance.
Transcripts
in this video let's see how we can add
angular material to an angular
application now before I show you how to
do that I want to tell you that for this
course we will be closely looking at the
documentation and that is for two
reasons first one is to stay updated
with the changes there will be future
releases of angular material and it is
safe to rely on the documentation as it
is constantly updated the second reason
is to know the directives that have to
be used for the different components
when we start writing code we need to
import certain components and it is next
to impossible to know the component
names without referring to the
documentation so make sure you have a
tab open for the dogs while you are
following the videos alright with that
let's see how to add angular material to
an angular application from the navbar I
am going to navigate to the guides
section of the documentation here you
can see the getting started heading as
well as the schematics heading both
these sections contain information on
how to install angular material
depending on the version of your angular
application the getting started section
contains about six different steps which
you have to go through to set up
material in your angular application and
this is only if your project is below
version six for this series we will be
working with angular version seven so I
will demo how to add material with CLI
schematics which is valid for angular
version 6 and above now in the terminal
when I run the command ng - - version
you can see that I have angular CLI
version seven if you are at a lower
version please make sure to update it
before creating a new project alright
now what I have done is created a brand
new project using the command
engi new material - demo material - demo
is the name of the project we will be
working with and of course I have opened
the project folder in vias code next to
setup angular material
make sure you navigate into the project
folder and run the command ng add at
angular slash material when we run the
command it is going to ask us an option
for the team I'm going to stick with
indigo pink next it checks with us for
hammer J's for gesture recognition I
will simply go with yes for now next
browser animations again yes
and that is pretty much all you have to
do you are ready to start using angular
material in your application now this
was possible because angular material is
packaged with CLI schematics what that
means is that the angular team provided
us with a single command that will
handle setting up material in your
application let's take a look at the
differences to see what changes were
made by running the command first up
angular dot JSON the only difference is
the inclusion of a CSS file in the
Styles array and this is the indigo pink
theme which we opted for the next file
is package dot JSON here you can see
that angular cdk and angular material
have been added to the list of
dependencies next we also have updates
to the package lock dot JSON file and
then we have index dot HTML here two
references have been added one to
material icons and the other to Roboto
font
in mindo TS there is the inclusion of
ham urges in style.css there is some CSS
reset that has been added to the body
tag
finally in AB dot module OTS we are
importing the browser animations module
and adding it to the imports array now
if you're doing this manually make sure
to add it after the browser's module so
the command basically adds project
dependencies includes them in the module
and sets up the style and theme for your
angular application to test if it is
actually working let's use materials
button component there are three simple
steps first step imported in app dot
module dot TS import math button module
from angular slash material second step
added to the imports array
third step use it in the HTML so in AB
component dot HTML wipe out the existing
HTML and add a button tag with the text
hello world but also with the directive
mat - button now let's run the
application in the terminal run the
command ng serve - OH
in the browser you can see that we have
a button that says hello world which is
styled with an inner material let me
change the directive to matte raised
button go back to the browser and you
can see the subtle difference the button
is now raised so the material library is
working perfectly fine you're probably
thinking how would I know to use matte
button or matte raised button right well
it's pretty simple I refer to the
documentation I can mention it is kind
of a necessity for this particular
course there is just no way that we can
know what directive has to be used for
which component this was a simple
getting started video and that is the
reason I used a simple button component
without referring to the documentation
in the upcoming videos we will be
referring the documentation more often
all right there you go
angular material working in your angular
application what we had to do was run
the command in G and at angular slash
material in the CLI project in the next
video let's set up the material module
thank you guys for watching no fear
subscribe I'll see you guys in the next
video
5.0 / 5 (0 votes)