Angular Material Tutorial - 2 - Getting Started

Codevolution
21 Feb 201907:24

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

00:00

๐Ÿ“š 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.

05:02

๐Ÿ”ง 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 Material is a UI components library designed to be used with the Angular framework. It provides a wide range of pre-built, well-designed components that follow Material Design guidelines. In the video, the main theme revolves around integrating Angular Material into an Angular application to leverage these UI components for building a visually appealing and functional user interface.

๐Ÿ’กAngular Application

An Angular application refers to a web application built using the Angular framework, which is a TypeScript-based open-source platform designed for building single-page applications. The video focuses on enhancing an Angular application by incorporating Angular Material to improve its user interface and user experience.

๐Ÿ’กDocumentation

Documentation in the context of the video refers to the official guides and resources provided by the Angular team and the Angular Material team. These documents are essential for staying updated with the latest features, learning about the directives for different components, and understanding how to properly use the library in an Angular application.

๐Ÿ’กCLI (Command Line Interface)

CLI, or Command Line Interface, is a means of interacting with computer software programs where the user issues commands to the program in plain English or other languages. In the video, Angular CLI is used to create a new project and to add Angular Material to the project through a series of terminal commands.

๐Ÿ’กDirectives

Directives in Angular are annotations that mark elements and properties with special meaning, allowing the Angular framework to transform and manipulate the DOM (Document Object Model). They are crucial for using Angular Material components, as they define the behavior and appearance of elements in the application's UI.

๐Ÿ’กMaterial Design

Material Design is a design language developed by Google that combines the classic principles of good design with the innovation of technology and science. It is characterized by the use of grid-based layouts, responsive design, and the use of familiar, everyday surfaces and edges. In the context of the video, Angular Material implements Material Design principles, providing a consistent, cohesive look and feel across the UI components.

๐Ÿ’กSchematics

Schematics in Angular are files that define a set of instructions to perform a specific task, such as generating components, services, or other entities in a project. They are used to automate and streamline the process of adding features or libraries, like Angular Material, to an Angular project.

๐Ÿ’กPackage.json

Package.json is a file used in JavaScript projects to define the project's dependencies, scripts, and other configurations. It serves as a manifest for the project, providing essential information for package managers like npm or yarn to install and manage the required packages.

๐Ÿ’กModule

In the context of Angular, a module is a class that serves as a blueprint for creating an instance of an Angular application. It is the primary building block of an Angular app, containing components, directives, and other modules in its imports array. Modules are used to organize and structure the application's code, making it more maintainable and scalable.

๐Ÿ’กComponent

A component in Angular is a class with a template that defines a part of the application's user interface. Components are the building blocks of the app, and they can contain HTML, CSS, and TypeScript code. They are used to create reusable UI elements that can be embedded in other parts of the application.

๐Ÿ’กCommand

In the context of the video, a command refers to a specific instruction entered into the terminal or command line interface to perform an action, such as installing a library, creating a project, or adding features. Commands are essential for automating tasks and streamlining the development process.

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

00:00

in this video let's see how we can add

00:03

angular material to an angular

00:05

application now before I show you how to

00:08

do that I want to tell you that for this

00:11

course we will be closely looking at the

00:14

documentation and that is for two

00:17

reasons first one is to stay updated

00:20

with the changes there will be future

00:23

releases of angular material and it is

00:25

safe to rely on the documentation as it

00:28

is constantly updated the second reason

00:31

is to know the directives that have to

00:34

be used for the different components

00:36

when we start writing code we need to

00:39

import certain components and it is next

00:42

to impossible to know the component

00:44

names without referring to the

00:46

documentation so make sure you have a

00:49

tab open for the dogs while you are

00:52

following the videos alright with that

00:55

let's see how to add angular material to

00:57

an angular application from the navbar I

01:01

am going to navigate to the guides

01:03

section of the documentation here you

01:07

can see the getting started heading as

01:09

well as the schematics heading both

01:12

these sections contain information on

01:15

how to install angular material

01:17

depending on the version of your angular

01:19

application the getting started section

01:23

contains about six different steps which

01:26

you have to go through to set up

01:28

material in your angular application and

01:30

this is only if your project is below

01:33

version six for this series we will be

01:37

working with angular version seven so I

01:40

will demo how to add material with CLI

01:44

schematics which is valid for angular

01:46

version 6 and above now in the terminal

01:51

when I run the command ng - - version

01:55

you can see that I have angular CLI

01:58

version seven if you are at a lower

02:01

version please make sure to update it

02:04

before creating a new project alright

02:08

now what I have done is created a brand

02:11

new project using the command

02:13

engi new material - demo material - demo

02:18

is the name of the project we will be

02:20

working with and of course I have opened

02:23

the project folder in vias code next to

02:28

setup angular material

02:29

make sure you navigate into the project

02:32

folder and run the command ng add at

02:36

angular slash material when we run the

02:41

command it is going to ask us an option

02:43

for the team I'm going to stick with

02:46

indigo pink next it checks with us for

02:50

hammer J's for gesture recognition I

02:52

will simply go with yes for now next

02:56

browser animations again yes

03:01

and that is pretty much all you have to

03:03

do you are ready to start using angular

03:06

material in your application now this

03:10

was possible because angular material is

03:13

packaged with CLI schematics what that

03:17

means is that the angular team provided

03:19

us with a single command that will

03:22

handle setting up material in your

03:24

application let's take a look at the

03:27

differences to see what changes were

03:29

made by running the command first up

03:33

angular dot JSON the only difference is

03:37

the inclusion of a CSS file in the

03:40

Styles array and this is the indigo pink

03:44

theme which we opted for the next file

03:47

is package dot JSON here you can see

03:51

that angular cdk and angular material

03:54

have been added to the list of

03:56

dependencies next we also have updates

04:00

to the package lock dot JSON file and

04:04

then we have index dot HTML here two

04:09

references have been added one to

04:11

material icons and the other to Roboto

04:15

font

04:16

in mindo TS there is the inclusion of

04:19

ham urges in style.css there is some CSS

04:25

reset that has been added to the body

04:27

tag

04:28

finally in AB dot module OTS we are

04:32

importing the browser animations module

04:35

and adding it to the imports array now

04:38

if you're doing this manually make sure

04:40

to add it after the browser's module so

04:44

the command basically adds project

04:46

dependencies includes them in the module

04:49

and sets up the style and theme for your

04:52

angular application to test if it is

04:55

actually working let's use materials

04:58

button component there are three simple

05:02

steps first step imported in app dot

05:05

module dot TS import math button module

05:12

from angular slash material second step

05:19

added to the imports array

05:22

third step use it in the HTML so in AB

05:26

component dot HTML wipe out the existing

05:30

HTML and add a button tag with the text

05:37

hello world but also with the directive

05:41

mat - button now let's run the

05:46

application in the terminal run the

05:48

command ng serve - OH

05:56

in the browser you can see that we have

05:59

a button that says hello world which is

06:01

styled with an inner material let me

06:05

change the directive to matte raised

06:08

button go back to the browser and you

06:14

can see the subtle difference the button

06:17

is now raised so the material library is

06:21

working perfectly fine you're probably

06:24

thinking how would I know to use matte

06:27

button or matte raised button right well

06:32

it's pretty simple I refer to the

06:33

documentation I can mention it is kind

06:36

of a necessity for this particular

06:39

course there is just no way that we can

06:42

know what directive has to be used for

06:45

which component this was a simple

06:48

getting started video and that is the

06:50

reason I used a simple button component

06:52

without referring to the documentation

06:55

in the upcoming videos we will be

06:58

referring the documentation more often

07:01

all right there you go

07:03

angular material working in your angular

07:05

application what we had to do was run

07:09

the command in G and at angular slash

07:12

material in the CLI project in the next

07:16

video let's set up the material module

07:18

thank you guys for watching no fear

07:21

subscribe I'll see you guys in the next

07:22

video

Rate This
โ˜…
โ˜…
โ˜…
โ˜…
โ˜…

5.0 / 5 (0 votes)

Related Tags
AngularMaterialAngularCLIFrontendDevelopmentWebDevelopmentIndigoPinkThemeMaterialDesignGuideTutorialCodeExplanationInteractiveLearningTechEducation