Angular Material Tutorial - 3 - Material Module

Codevolution
21 Feb 201903:05

Summary

TLDRThe video tutorial guides viewers on enhancing their application with a Material button component. It introduces a more efficient method of managing Material components by creating a dedicated module for importing and exporting them. The process involves using the CLI to generate a new module, adjusting the imports and exports, and restructuring the application to maintain clean code. The end result is a streamlined approach that simplifies the addition of new components and ensures the app's styling remains consistent.

Takeaways

  • ๐Ÿ“Œ The video outlines the process of adding a Material button component to an application.
  • ๐Ÿ”„ Initially, the button is added through three steps: import, add to imports array, and use in HTML.
  • ๐Ÿ“ฆ A recommended practice is to create a separate module for managing Material components' import and export.
  • ๐Ÿ‘จโ€๐Ÿ’ป Use the CLI command 'ng G m4 module material' to generate a new module named 'material'.
  • ๐Ÿ—‚๏ธ The generated 'material' folder contains 'material.module.ts' which is used for importing and exporting Material components.
  • ๐Ÿ”ง Remove the CommonModule and the declarations array from the material module and replace it with an exports array.
  • ๐Ÿ”„ Move the import statements from the AppModule to the MaterialModule.
  • ๐Ÿ“Œ Create a constant 'materialComponents' in the MaterialModule and include the MatButtonModule.
  • ๐Ÿ”„ Add the 'materialComponents' constant to both the imports and exports arrays in the MaterialModule.
  • ๐Ÿ”— Include the MaterialModule in the AppModule's imports array to auto-import Material components.
  • ๐Ÿ”„ Restart the server with 'ng serve' to see the changes and ensure the Material styling is applied correctly.
  • ๐Ÿš€ This approach isolates Material-related code and maintains a clean AppModule structure for future component additions.

Q & A

  • What is the main topic of the video?

    -The main topic of the video is about adding a material button component to an application and organizing material components in a separate module.

  • What are the three simple steps mentioned in the video to add a material button?

    -The three simple steps are: 1) Import the material button component, 2) Add it to the imports array, and 3) Use it in the HTML.

  • Why is there a recommended approach for handling material components?

    -The recommended approach is to create a separate module for importing and exporting material components to keep the app module clean and isolate the material code.

  • How is the new module created in the video?

    -The new module is created using the CLI command 'ng G m4 module material', which generates a folder called 'material' with a 'material.module.ts' file inside.

  • What changes are made to the 'material.module.ts' file?

    -In the 'material.module.ts' file, the common module and the declarations array are removed, and an exports array is added. The import statements from the app module are moved to the material module.

  • What is the purpose of the 'material components' constant in the material module?

    -The 'material components' constant is used to include the material button module and is added to both the imports and exports arrays of the material module.

  • How does the app module benefit from including the material module?

    -By including the material module in the app module's imports array, it auto-imports the material module, allowing for easier management and use of material components without cluttering the app module.

  • What is the command used to restart the server in the video?

    -The command used to restart the server is 'ng serve' after stopping the previous server with 'ctrl C'.

  • What is the advantage of organizing material components in a separate module?

    -Organizing material components in a separate module helps to keep the main application code clean, organized, and easier to maintain by isolating the material-specific code.

  • What is the next topic to be covered in the series?

    -The next topic to be covered in the series is typography in Angular Material.

  • How can viewers engage with the content?

    -Viewers are encouraged to subscribe to the channel for more content and to watch the next video in the series.

Outlines

00:00

๐Ÿ“ฆ Organizing Material Components with a Dedicated Module

This paragraph outlines the process of organizing Material UI components within a dedicated module for cleaner application code. It begins by revisiting the previous method of adding a Material button component, which involves importing the component, adding it to the imports array, and using it in the HTML. The paragraph then introduces a recommended approach of creating a separate module to handle the import and export of Material components. This is achieved using the CLI command 'ng g m4 module material' to generate a new module named 'material'. The module structure is then adjusted by removing the common module and declarations array, and instead, an exports array is added. The imports from the main app module are moved to the material module, and a constant 'material components' is created to include the Material button module. This constant is then added to both the imports and exports arrays. Finally, the material module is included in the app module's imports array, which allows for automatic import from 'material.module.ts'. The server is restarted using 'ng serve', and the paragraph concludes with the result that the Material styling remains intact, demonstrating the success of the module extraction. This approach is praised for isolating Material code and maintaining a clean app module structure.

Mindmap

Keywords

๐Ÿ’กMaterial Button

In the context of the video, 'Material Button' refers to a user interface component from the Angular Material library, which is a collection of high-quality UI components built with Angular and TypeScript. The video describes the process of adding a Material Button to an application by importing the necessary module and using it within the HTML. This illustrates how Angular Material can enhance the functionality and appearance of web applications with minimal effort.

๐Ÿ’กImports Array

The 'Imports Array' in Angular is part of the NgModule metadata where modules required by the application components are listed. In the video, the narrator explains the process of transferring the Material Button module from the main application module's imports array to a newly created material-specific module's imports array. This helps in modularizing the application and separating concerns, which simplifies management of dependencies.

๐Ÿ’กCLI

CLI stands for Command Line Interface. In the video, the Angular CLI is used to generate new components, modules, and other Angular-specific elements with command-line commands. For instance, 'ng G m material' is a command to generate a new module named 'material'. The CLI automates many development tasks, thereby increasing efficiency and maintaining a standard structure.

๐Ÿ’กModule

In Angular, a module is a mechanism to group components, services, directives, and pipes that are related, in such a way that can be combined with other modules to create an application. The video discusses creating a 'material' module dedicated to Angular Material components, illustrating the modular architecture of Angular that helps in organizing and scaling applications effectively.

๐Ÿ’กExports Array

The 'Exports Array' is a part of Angular's NgModule where modules or components that need to be accessible to other parts of the application are listed. By moving Angular Material components into the exports array of the material module, as shown in the video, these components can be used in other parts of the application that import the material module.

๐Ÿ’กAngular Material

Angular Material is a UI component library for Angular developers. It provides a set of reusable, well-tested, and accessible UI components based on Material Design. The video focuses on how to organize Angular Material components into a separate module to keep the application clean and maintainable.

๐Ÿ’กng serve

The command 'ng serve' is used within the Angular CLI to compile an Angular app and serve it locally, typically for development purposes. The video mentions restarting the server with 'ng serve -o' to see the changes take effect, demonstrating a common practice in Angular development for testing updates in real-time.

๐Ÿ’กMaterial Components

Material Components refer to the various UI elements provided by Angular Material such as buttons, cards, sliders, etc. In the video, a constant called 'materialComponents' is created to include specific components like 'MatButtonModule', which are then imported and exported in the material module. This demonstrates an organized approach to managing dependencies.

๐Ÿ’กTypography

Although only briefly mentioned at the end of the video, typography in Angular Material refers to the use of typographic styles and scales to ensure readability and aesthetic appeal across the app. The video hints at covering this topic in the next session, highlighting its importance in UI design.

๐Ÿ’กModule Structure

The video discusses the structure of an Angular module which typically includes declarations, imports, exports, and providers. By modifying this structure, such as removing the declarations array in the material module, the video demonstrates how Angular's modular architecture can be tailored to specific needs like focusing solely on importing and exporting components.

Highlights

The video discusses the process of adding a material button component to an application.

There are three simple steps to add a material button: import, add to the imports array, and use it in the HTML.

A recommended approach is to create a separate module for importing and exporting material components.

The CLI command 'ng G m4 module' is used to generate a new module named 'material'.

After the command, a 'material' folder is created inside the 'app' folder, containing 'material.module.ts'.

In the 'material' module, focus on importing and exporting material components, removing the 'common module' and 'declarations array'.

Add an 'exports' array to the 'material' module.

Move the imports from 'app.module' to the 'material' module and update the arrays accordingly.

Create a constant 'material components' in the 'material' module and include the 'MatButtonModule'.

Add the 'material components' constant to both the 'imports' and 'exports' arrays.

Include the 'material' module in the 'app.module' to auto-import the module from 'material.module.ts'.

Restart the server with 'ctrl C' and 'ng serve' to see the material styling applied to the raised button.

This approach isolates material code and keeps the 'app' module clean.

The next video will cover typography in Angular Material.

The video encourages viewers to subscribe for more content.

Transcripts

00:00

in the last video we saw how to add a

00:03

material button component to our

00:05

application there were three simple

00:08

steps

00:09

first step is to import it second step

00:13

is to add it to the imports array and

00:16

third step is to use it in the HTML

00:20

although this is perfectly fine there is

00:23

a better recommended approach and that

00:27

approach is to create a separate module

00:29

that deals with importing and exporting

00:32

material components so in the terminal

00:36

let us use the CLI to generate a new

00:39

module ng G for generate m4 module

00:44

followed by name of the module which we

00:47

will call as material

00:51

once the command completes you should

00:54

have a folder called material inside the

00:56

app folder and within the material

00:58

folder you should have material dot

01:01

module dot TS in this module we are only

01:05

concerned with importing and exporting

01:08

material components so remove common

01:12

module

01:15

as well as the declarations array

01:18

instead add an exports array

01:25

now let's move the imports from app

01:28

module to material module so from AB dot

01:32

module dot es remove the import

01:35

statement and add it in material module

01:39

make sure to remove it from the imports

01:42

array as well next in material module

01:45

create a constant

01:49

material components and then include the

01:52

Matt button module next add this

01:56

constant to the imports array and the

01:59

exports array

02:01

finally include the material module in

02:04

the app module in the imports array

02:07

material module which is going to auto

02:11

import the material module from material

02:13

dot module dot TS now let's restart the

02:18

server ctrl C and then ng serve - OH

02:27

and you can see that the raised button

02:30

still has the same material styling so

02:34

what we have done is extracted material

02:37

into its own module so from the next

02:40

video to use any component all we have

02:43

to do is import it and add it to the

02:45

material components array this approach

02:49

isolates material code and also keeps

02:52

the app module nice and clean alright in

02:55

the next video let's take a look at

02:57

typography in angular material thank you

03:01

guys for watching feel free to subscribe

03:02

I'll see you guys in the next one

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

5.0 / 5 (0 votes)

Related Tags
Angular MaterialCode OrganizationModule CreationComponent ManagementClean CodeWeb DevelopmentFrontend EngineeringAngular CLIMaterial Design