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.