Angular Material Tutorial - 3 - Material Module
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
📦 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
💡Imports Array
💡CLI
💡Module
💡Exports Array
💡Angular Material
💡ng serve
💡Material Components
💡Typography
💡Module Structure
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
in the last video we saw how to add a
material button component to our
application there were three simple
steps
first step is to import it second step
is to add it to the imports array and
third step is to use it in the HTML
although this is perfectly fine there is
a better recommended approach and that
approach is to create a separate module
that deals with importing and exporting
material components so in the terminal
let us use the CLI to generate a new
module ng G for generate m4 module
followed by name of the module which we
will call as material
once the command completes you should
have a folder called material inside the
app folder and within the material
folder you should have material dot
module dot TS in this module we are only
concerned with importing and exporting
material components so remove common
module
as well as the declarations array
instead add an exports array
now let's move the imports from app
module to material module so from AB dot
module dot es remove the import
statement and add it in material module
make sure to remove it from the imports
array as well next in material module
create a constant
material components and then include the
Matt button module next add this
constant to the imports array and the
exports array
finally include the material module in
the app module in the imports array
material module which is going to auto
import the material module from material
dot module dot TS now let's restart the
server ctrl C and then ng serve - OH
and you can see that the raised button
still has the same material styling so
what we have done is extracted material
into its own module so from the next
video to use any component all we have
to do is import it and add it to the
material components array this approach
isolates material code and also keeps
the app module nice and clean alright in
the next video let's take a look at
typography in angular material thank you
guys for watching feel free to subscribe
I'll see you guys in the next one
5.0 / 5 (0 votes)
