The focus of this article is the Angular disabled attribute. Next, take a look at the third button. It has a disabled attribute. That attribute is set to toggle based on the buttonDisabled property. So when the buttonDisabled property is true, that third button is disabled. And when the buttonDisabled property is false, the third button is. The mat-form-field supports 4 different appearance variants which can be set via the appearance input. The legacy appearance is the default style that the mat-form-field has traditionally had. It shows the input box with an underline underneath it. Create a form tag with the formGroup attribute. Add an input control to the form with a required attribute. When running, fill out the form so its valid, then reset the form and model through the click handler on a button. The required control will now have the mat-input-invalid class.

1. Mat Input Set Disabled File
2. Mat Input Set Disabled Password
3. Mat Input Set Disabled Windows
4. Mat Input Set Disabled Windows 10
5. Mat Input Set Disabled

Create beautiful menu items in Angular using material design

To implement menu items in Angular we can use angular material menu module called MatMenuModule.

mat-menu selector is used to display floating menu panel containing list of menu items.

Menu items in Angular

Steps to implement Menu items in Angular applications.

step 1: Import Angular material Menu module

We can import material menu module (MatMenuModule) in our components ts file or app.module.ts file or some common material module which can be used across the application as explained in angular material tutorial.

step 2: Use mat Menu selector to display Menu Items

After importing MatMenuModule in our component file, use mat-menu selector which is nothing but a floating panel containing list of menu options.

I am using button element as Menu Item. And do not forgot to add mat-menu-item to the menu options.

Add a template reference variable to the mat-menu which will be used to refer our menu panel.

In this case I have added variable #menu.

step 3: Add matMenuTriggerFor Element

The above mat-menu element does not render anything in the UI.

The menu should be attached to a trigger element, which will open and close the menu using matMenuTriggerFor directive

In the above example I am attaching mat-menu container to a button called “Simple Menu” via matMenuTriggerFor attribute.

Use the template reference variable i.e., #menu, created in step 2 to attach the menu panel to the trigger element.

Changing mat Menu Position

By default material menu will be displayed under the menu trigger element.

To change the menu position we can use xPosition and yPosition properties of mat-menu selector.

mat-Menu position Before or after

If you want display menu before and after the menu trigger element we can pass xPosition value as “before” or “after”.

xPosition property changes the menu position across the horizontal axis.

mat Menu position above or below

To display the menu position above the menu trigger element set yPosition property as “above”.

yPosition property used to change the menu position across the vertical axis.

Mat Input Set Disabled File

yPosition accepts the values “above” or “below”.

Mat Menu with Icons

We can display material icons before the menu item text by placing mat-icon elements.

Further we can use mat icons as menu trigger elements.

How to create Nested Menus or sub-menus?

Creating nested menus or sub menus is very simple.

We need to attach another menu to mat-menu-item using matMenuTriggerFor property.

We will create a simple nested menu which represents different types of programming languages which follows the below structure.

1. languages
   1. frontend
      1. Javascript
         1. jQuery
         2. VueJs
      2. Typescript
      3. Angular
   2. backend
      1. C#
      2. Java
         

We have three levels of sub menus.

First We will create first level of Menus with root as languages and menu list items as frontend and backend.

Now under frontend menu-list-item, we have three sub menu items as Javascript,typescript and Angular.

Similarly for backend we have two sub menu list items as C# and Java.

Now we will create second level sub menus by creating two new menu items as frontend and backend.

Now we need to attach this second level menus to the above frontend and backend menu list items using matMenuTriggerFor.

Now we will create third level sub menu Javascript.

And attach this to second level sub menu list item i.e.,Javascript using matMenuTriggerFor.

Now our three level Nested Menu is ready.

How to open mat menu programmatically?

To open mat open programmatically we need to get instance of MatMenuTrigger from matMenuTriggerFor element.

In the below example matMenuTriggerFor element is an icon button.

I have added template variable #triggerBtn to that element.

And now in component ts file, I am using @ViewChild to get the instance MatMenuTrigger from the trigger element. i.e., triggerBtn.

MatMenuTrigger will expose several methods including openMenu().

For our demo purpose I have created a button Open Menu and attached a click event method openMatMenuProgrammatically().

Inside openMatMenuProgrammatically() method I am calling this.triggerBtn.openMenu() which will open our menu.

Creating dynamic menu list items

The above menu list items are static.

In most of the real world cases, we might need to create dynamic menus, where the menu list items may come from an API through ajax call or from an observable.

For that purpose I have create a MatMenuListItem object which will be used to generate dynamic menu list items.

I am assinging mat menu item values in the constructor.

This menu list item data may come from observable as well.

And in component HTML file using *ngFor we can create menu list items as shown below.

Even if we have static menu items, I prefer creating a menu list object and bind it to mat-menu panel in component HTML file.

Because *ngFor will simplify our HTML code.

mat-menu-item click event

To add click events to mat menu item, we can use built in click event method.

In the above example, I have created a method called clickMenuItem and bind it to the mat-menu-item click event.

Navigate to an angular route on menu click event

If you are using angular routes in your application we can navigate to that particular route on mat menu click event.

Or we can add another property to the MatMenuListItem which represents angular route to navigate so that we can avoid the above if loop check.

If your menu item only handles with route navigation then you can directly add routerLink attribute to mat-menu-item.

How to disable mat-menu-item ?

Mat Input Set Disabled Password

To disable the mat menu item we can use disable property.

In the above MatMenuListItem object I have added a property called IsDisabled. And it can be used to disable the menu link

Passing Data to the Menu Content Panel

We can render single menu instance with a different set of data, depending upon the data being passed by the trigger element.

To do that we can pass the data to the menu panel via the matMenuTriggerData input.

This is very helpful in some real world cases. For example in twitter we have the ability to manage multiple accounts at a time.

I have two twitter accounts one is personal @arungudelli and @angular_js.

Mat Input Set Disabled Windows

We can manage two accounts using menu placed at the bottom left corner of the webpage.

If we click on the menu item, we will see multiple options as shown in the below image.

The last menu list item Log out displays user name as well i.e.,Log Out @angular_js,which ever account we are using marked with a tick mark.

Depeding upon the selected account these two entries will change.

matMenuContent Example

Mat Input Set Disabled Windows 10

In the menu panel, matMenuContent used to receive the data from mat-menu trigger element.

We will try to develop above twitter manage accounts menu using matMenuTriggerData input.

We will create few new classes in our component HTML file and use them to pass dynamic data to the mat menu panel.

Mat Input Set Disabled

I have defined 2 objects

1. Active User
2. Menu Items

Now we will build our dynamic menu content structure.

matMenuTriggerData property used to pass dynamic content data to the menu panel. In the above case I am passing menuItems object.

I have defined a menu content panel with the name manageAccounts, and attached it to the active user name element via matMenuTriggerFor.

In the menu content panel using ng-template selector and matMenuContent input we can lazy load the menu panel data until the menu trigger is clicked.

And in the ng-template, Using [matMenuContent] I am reading the data provided by the matMenuTriggerData input.

I am passing a complex object to matMenuContent input. Which has list of users, other menu items and active user.

If you have a simple object you can directly use let keyword to define a new variable and use it in menu content panel.