Mat Input Set Disabled
Mat Input Set Disabled Windows

It’s challenging to find resources that extend or modify the component styles and colors of the Angular Material Design framework. Most of the time, the overrides come from hacky solutions that provide a band-aid approach to solving a problem. After diving into the source code and looking through the applied CSS classes and how specific they are, some insight can be obtained.

For example, trying to override the color of an input could go from this:

I'm using matInput and mat-form-field (@angular/material) in an Angular component, and I can't disable the matInput. A working example can be seen here. It seems likely that I'm missing something obvious, but for the life of me I can't figure out what. This is incorrect, the HTML and DOM disabled attribute is a 'boolean attribute' which means only the attribute name needs to be specified - or its value must equal disabled, e.g. Disabled='disabled' - it does not recognize the values of true` or false - so disabled='false' will still cause the element to be disabled. The complete mat-select or native select control can be disabled by setting the disabled='true' as shown below: mat-select disabled='true'. Mat-select disabled='true'. Each option value can also be disabled by adding the disabled property Material Select with Checkboxes for Multiple Selection.

To this:

That’s a more detailed example, but the scope is still accurate.

Before beginning this short walkthrough, start by creating an Angular application and installing the Angular Material package and dependencies. You can follow this guide to create a new Angular application. Alternatively, if you already have an application but do not have Material installed, start here.

Now that we have our application up and running with Material components installed, we can start talking about overriding the default Material theme. Without much configuration, the theme can be customized to include brand colors. Unfortunately, there aren’t many options, other than this, for a site to use more than three colors (primary, accent, and warn for errors/warnings) in Material components, or not without some overriding.

To start, we can override the color of a mat-button. For the most part, the default styling of a Material button can be changed quite easily without much force or complex class names. New colors for buttons can be submitted simply by using the .mat- prefix on our custom color class.

For example, if a blue button was desired but blue was not either the primary or accent color defined in your Material theme, a class can be created to be used alongside ‘primary’ or ‘accent’. The override is straightforward for all types of buttons.

Here .mat-blue is defined, the custom color for our button. As you can see, a more specific class is used so we can easily apply the styling to the correct type of button.

For sake of simplicity, there isn’t much that needs to be done outside of changing the color of the text and the background. We could get more fancy with ripple color and focus attributes, but for now let’s apply these classes to some buttons.

By using the color attribute on the button, we can simply specify the selector ‘blue’ as it was defined in our css file with .mat-blue (Note that using class='mat-blue' is not necessary here!). We could have just applied a base class, but this becomes more extensive with ripple and other color styling further on. The color attribute will allow us to group all of our custom colors into one class, and therefore keep our custom colors separate from any other styling we might have to do.

Now, let’s take a look at the buttons, each with their own default styles.

They look a bit bored by themselves, but if we look at a side-by-side comparison with the primary, accent, and warn colors in this theme we can see the similarities that maintain after just changing the color.

After exploring the source code of some of the extensive CSS rules for the Angular Material components, I have found the most important thing to keep in mind when overriding or defining styles and colors is specificity. The more specific the class is that you are targeting, the more likely the style will be applied as intended.

Use descriptions such as:

Instead of simply:

The button example covers the basic custom color creation in Angular Material for most components! By changing the other moving parts (ripple, overlay, etc.) that go along with many components similar to buttons, such as tabs and spinners, the customization can become endless (and potentially quite extreme).

For a more complex use case, feel free to check out this StackBlitz that has the full example (previewed above) of altering a mat-form-field to display as white on a dark background as well as the classes and examples of the buttons.

One final note: The shadow-piercing selectors that are widely referenced such as /deep/, >>> and ::ng-deep are deprecated as mentioned in the docs, so a large handful of the examples showing how to override styles and color in Angular Material in StackOverflow will not be useful.

For more information or to learn about our web development and design services,

email sales@wildcardcorp.com, or call (715) 869-3440.

<mat-checkbox> selector is an angular material checkbox component, it works like <input type=”checkbox”> & sugar coated with Material design styling and animations.<mat-checkbox> part of Angular Material module called MatCheckboxModule.

The simple usage of <mat-checkbox> is as follows

<mat-checkbox>Checkbox example</mat-checkbox>

To use <mat-checkbox> we have to import MatCheckboxModule from @angular/Material module.

import {MatCheckboxModule} from '@angular/material'</pre>

Properties of mat-checkbox

Angular Material Checkbox Property	Description
Checked : boolean	Indicates whether checkbox is checked
Unchecked : Boolean	Indicates whether checkbox is unchecked
Indeterminate : Boolean	Indicates whether checkbox is indeterminate or we can call it as mixed state
Disabled	Indicated whether checkbox is disabled
Id	A unique id to represent checkbox elements if nothing is supplied then auto generated
labelPosition : before or after	Indicates whether label should appear before or after the checkbox
Required : Boolean	Indicates whether the checkbox is required inside a form
Value:string	Indicates the value of checkbox element
Color:ThemePalatte (primary or accent or warn)	Indicates theme color palette of checkbox element
disableRipple : Boolean	Indicates whether ripple animation disabled on checkbox element
areaLabel : string	Will be attached ‘area-label’ attribute of checkbox element
ariaLabelledby : string or null	Will be attached ‘area-labelledby’ attribute of checkbox element

mat-checkbox Label

Content of the <mat-checkbox> element acts as label for checkbox in angular material. Label position can be before or after the checkbox.

We can control the label position using labelPosition property of <mat-checkbox>.

mat-checkbox Checked state

Using checked property value of <mat-checkbox> we can control the state of checkbox either checked or unchecked

mat-checkbox UnChecked state

Provides exact opposite functionality of checked property. If its true in <mat-checkbox> then checkbox is unchecked and vice versa

mat-checkbox Indeterminate state

<mat-checkbox> supports Indeterminate state. Indicates whether checkbox is indeterminate or we can call it as mixed state.The value can be set through Indeterminate property of <mat-checkbox> value can be true or false

For example say there is one parent checkbox under which we have four children checkboxes, if all children checkbozes are checked then parent checkbox should be checked and if all checkboxes are unchecked then it should be unchecked if any one of them is unchecked then parent checkbox should indicate mixed state.that is Indeterminate state.

And it is only for visua

Mat Input Set Disabled