Angular Material Tutorial - 11 - Sidenav
Summary
TLDRThis video tutorial introduces the implementation of side navigation in Angular Material. It outlines the process of importing necessary modules, setting up the sitemap container, and utilizing components like mat-sidenav-container, mat-sidenav, and mat-sidenav-content. The video demonstrates various methods to show and hide the sidenav, including using the opened attribute, two-way binding, and invoking open/close methods. It also explains how to apply different modes to the sidenav, such as 'over', 'push', and 'side'. Additionally, it covers event handling for opened and closed events to perform actions based on sidenav state changes.
Takeaways
- ๐ Import the necessary Angular Material modules for sidenav, navigation, and other components.
- ๐ผ๏ธ Use the MatSidenavContainer as a wrapper for the main content and sidenav to ensure proper layout and behavior.
- ๐ช The MatSidenav component represents the sidenav content and is hidden by default.
- ๐ Add padding, height, and styling to the MatSidenavContainer and MatSidenavContent for better visual presentation.
- ๐จ Apply a background color and set a width for the sidenav to enhance its appearance.
- ๐ Use two-way data binding to control the visibility of the sidenav with a property and a toggle button.
- ๐ Implement the (click) event on a button to toggle the sidenav's open state.
- ๐ Utilize the mode attribute on the MatSidenav component to set different sidenav modes: over, push, or side.
- ๐ Apply the open(), close(), and toggle() methods on the sidenav to control its visibility programmatically.
- ๐ฃ Listen to the opened and closed events of the sidenav to perform actions when the sidenav state changes.
- ๐ Use template reference variables to invoke methods on components directly from the template.
Q & A
What is the first step in using Angular Material's side navigation?
-The first step is to import the necessary modules, specifically 'mat side' and 'nav module', from the Angular Material library.
How do you add side navigation to your application?
-You add side navigation by using three components: 'mat-sidenav-container', 'mat-sidenav', and 'mat-sidenav-content'. The 'mat-sidenav-container' acts as a container for both the side navigation and the main content.
Why is the side navigation not visible by default?
-The side navigation is hidden by default, and you need to use methods such as adding the 'opened' attribute or binding it to a property to make it visible.
How can you apply basic styling to the side navigation?
-You can apply basic styling by adding CSS rules to 'mat-sidenav-container', 'mat-sidenav', and 'mat-sidenav-content', such as setting a height, padding, background color, and width.
What is two-way data binding and how is it used in the context of the side navigation?
-Two-way data binding is a technique that allows data to be both read and updated from and to the UI. In the context of side navigation, it is used to bind the 'opened' attribute to a property that can be controlled by a button click.
What are the different modes available for the side navigation?
-The side navigation can have three modes: 'over', 'push', and 'side'. 'Over' mode covers the main content with a backdrop, 'push' mode pushes the main content aside, and 'side' mode places the side navigation next to the main content.
How can you toggle the side navigation open and closed?
-You can toggle the side navigation by invoking the 'toggle' method on the 'mat-sidenav' component or by using a button that calls the 'open' and 'close' methods on the side navigation's template reference variable.
What are the 'opened' and 'closed' events and how can they be utilized?
-The 'opened' and 'closed' events are emitted when the side navigation is opened or closed, respectively. You can listen to these events and perform actions, such as logging a message or executing a function, by calling methods in response to these events.
How can you ensure that certain elements are not affected by the side navigation container?
-If you don't want certain elements, like headers or footers, to be affected by the side navigation container, you can place them outside of the 'mat-sidenav-container'.
What is a template reference variable and how is it used in this context?
-A template reference variable is a way to get a reference to a DOM element in Angular templates. In this context, it is used to reference the 'mat-sidenav' component so that you can invoke methods like 'open', 'close', and 'toggle' on it.
What are the three methods to show or hide the side navigation?
-The three methods to show or hide the side navigation are: 1) using the 'opened' attribute, 2) invoking the 'open' or 'close' methods on the side navigation itself, and 3) calling the 'toggle' method.
Outlines
๐ Introduction to Angular Material SideNav
This paragraph introduces the process of implementing a side navigation (side nav) in an Angular application using Angular Material. It begins by explaining the initial step of importing the necessary modules from the Angular Material library. The paragraph then describes the use of three main components: the MatSidenavContainer, MatSidenav, and MatSidenavContent, which collectively form the structure of the side nav. It also touches on the default behavior of the side nav being hidden and the various methods to show or hide it, such as adding the 'opened' attribute or using two-way data binding with a button. Additionally, the paragraph briefly mentions the importance of applying basic styling to improve the user interface.
๐ง Customizing SideNav Behavior and Appearance
This paragraph delves into the different modes available for the side nav and how to apply them using the 'mode' attribute on the MatSidenav component. The default 'over' mode is explained, where the side nav floats over the main content with a backdrop. The 'push' mode is introduced, which pushes the main content aside to make space for the side nav, and the 'side' mode is mentioned, where the side nav appears alongside the main content. The paragraph also covers methods for controlling the side nav, such as invoking the open, close, and toggle methods on the side nav component itself. Lastly, it discusses the possibility of performing actions based on the side nav's opened and closed events, providing an example of logging the state to the console.
Mindmap
Keywords
๐กAngular Material
๐กModule Import
๐กmat sidenav-container
๐กmat sidenav
๐กTwo-way Binding
๐กTemplate Reference Variable
๐กSide Nav Modes
๐กOpen and Close Methods
๐กToggle Method
๐กEvents
๐กStyling
Highlights
The introduction of Angular Material's side, nav, and angular modules.
The process of importing the module and adding it to the material array.
Setting up a site map using three components: Matt site, nav container, mat side nav, and map site map content.
The default behavior of the side nav being hidden and the method to make it visible using the 'opened' attribute.
Adding basic styling to improve the user interface, including padding, background color, and width adjustments.
Two-way binding to control the side nav's visibility with a button, requiring the forms module.
Exploring different modes for the side nav: over, push, and side.
The 'over' mode, where the side nav floats over the main content with a backdrop.
The 'push' mode, where the side nav pushes the main content aside.
The 'side' mode, where the side nav appears alongside the main content.
Using template reference variables to invoke open or close methods on the side nav component.
The toggle method for the side nav, activated by a button in the main content.
Listening to 'opened' and 'closed' events for the side nav to perform actions upon opening or closing.
Creating a log method to record console messages for side nav events.
The practical application of side nav in Angular Material for building interactive user interfaces.
The conclusion of the video, summarizing the side nav functionalities and encouraging viewers to subscribe for more content.
Transcripts
in this video let's take a look at side
nav and angular material the first step
as always is to import the module so in
material module dot es import mat side
nav module and add it to the material
array now we can add the site map to our
application
to set up a site now we use three
components the first one is Matt site
nap container which acts as a container
to the site nav as well as the main
content within the container we have mat
side nav
which represents the site content
and then we have map site map content
which represents the main content it is
important that the site content and the
main content are placed within the
container if you don't want some
elements to be affected by this
container for example header and footer
you can place them outside the sitemap
container all right if we now save the
file and take a look at the browser the
output is not quite what we expect
we can see the main content but the site
now is not seen let me tell you that
this is the expected behavior site now
is always hidden by default there are a
couple of ways to open or show the side
nav the simplest way is to add the
opened attribute on the mat side nav
component
if you now say the file and take a look
at the browser you should be able to see
the site now as well the UI though is
not clear so let me add some basic
styling back in vs code and AB dot
component dot CSS I'm going to add mat
side nap container has a height of a
hundred percent mat side nav and mat
side nav content let's add some padding
and finally just for the side nav I'm
going to add a background color light
coral and a width of 200 pixels
if we now take a look at the browser it
is much more clear the site now appears
like an overlay on the main content and
when I click outside the side nav it
closes and we can see the main content
now once we close it though there is no
way to open it again
so rather than setting the opened
attribute like here let's bind it to a
property which we can then control using
a button we will be using two-way
binding so the first step is to import
the forms module in app module so open
up dot module dot ES
in Port forms module and add it to the
imports array
now let's go back to two-way binding in
AB dot component dot es which is the
component class I'm going to create a
new property called opened and set it
defaults next in the HTML bind the
opened attribute to the opened property
and create a button that will toggle the
opened property value so for two-way
binding we use banana in a box in tax so
square brackets parenthesis and close it
now this is going to be equal to the
property we just created opened next as
part of the main content I'm going to
add a button the text is going to be
toggle opened and on click of this
button so click handler we simply toggle
the open value
opened is equal to not off opened if you
now say the files and take a look at the
browser the site now should be initially
hidden because we have initialized it to
false I click on the button and the side
nav is shown click outside the side nav
and it automatically hides so this is
the first method to show or hide the
side nav before we take a look at the
next method I want to quickly show you
the different modes that can be applied
to a side nav the mode for a side nav
can be specified using the mode
attribute on the mat side nav component
the default mode is over mode is equal
to over and this is the mode we have
seen so far if you go back to the
browser you can see that there is no
change from what we have already seen
the site now floats over the main
content which is covered by a backdrop
the second possible value for the mold
attribute is push so I'm going to change
over to push let's see how this works in
the browser I clicked on the button the
site map appears but this time the site
map pushes the primary content out of
its way covering it with a backdrop the
final possible mode is side so mode is
equal to side
in this mode the side nav appears
side-by-side with the main content
shrinking the main contents width to
make space for the side nav so the three
possible modes are over push and side
I'm going to stick with site for the
rest of this video now back to opening
and closing the side nav we have seen
the first method which is using the
opened attribute the second way to open
or close the side nav is by invoking the
open or close methods on the side nav
itself for this method I will create a
template reference variable on the mat
side nav component hash symbol and side
nav now I can create two buttons that
will call the open and close methods on
this template reference variable button
open on click it is going to call side
nav dot open
similarly button close on click side nav
dot close let's save this file and go
back to the browser I click on open and
the side nav opens I click on close and
the side nav closes so this is the
second method the third method is to
simply toggle the side nav by calling
the toggle method this is also the
approach you might want to take when you
have a hamburger icon for example I will
create another button in the main
content and the text is going to be
toggle
on click of this button I simply call
the toggle method on the side nav
reference variable side nav dot toggle
if I now go back to the browser click on
the toggle button it opens I click again
it closes so these are the three methods
and if at all you want to perform some
action on open or close off the side nav
you can listen to the opened and closed
events now back in vs code in AB
component Diaz I am going to create a
method called log which accepts a
parameter called state and simply logs
that to the console
now in the HTML we can listen to opened
and closed events and call our log
method passing in the appropriate value
so on mat side nav listen to opened
event
and call the log method passing in the
string opened similarly on the closed
event called the method passing in the
string closed if you now head back to
the browser open dev tools click on
toggle you should see the message opened
toggle again you should see the message
closed now I am simply logging a message
but you can perform any action that
seems fit for your application so that
is about the side nav in angular
material thank you guys for watching
feel free to subscribe I'll see you guys
in the next video
5.0 / 5 (0 votes)