Category: Angular Material

The Angular directive <mat-button-toggle> is used to create a toggle or on/off button with material styling and animations. Mat-button-toggle buttons are configured to behave as radio buttons or checkboxes. They are part of <mat-button-toggle-group>. <mat-button-toggle> are on/off toggles with the appearance of a button. These toggles can be configured to behave as either radio-buttons or checkboxes. While they can be…

<mat-expansion-panel> provides an expandable summary view. The <mat-expansion-panel>, an Angular Directive, is used to create an expandable detail v/s summary view. app.component.html app.component.ts app.component.css Output: Expansion-panel content Header The <mat-expansion-panel-header> shows a summary of the panel content and acts as the control for expanding and collapsing. This header may optionally contain an <mat-panel-title> and an <mat-panel-description>,…

We can connect user input to screen reactions by using ripples to indicate the point of touch and confirm that touch input was received. For touch or mouse, this occurs at the point of contact. The matRipple attribute directive defines an area in which a ripple animates on user interaction. By default, a ripple is…

Angular content stepper provides a wizard-like workflow by dividing the content into logical steps. The material stepper is responsible for logic on the CDK stepper’s foundation that drives the stepped workflow. The material stepper extends the CDK stepper and a material design style. Stepper Variants There are two stepper components: mat-horizontal-stepper and mat-vertical-stepper. They both…

The Angular Directive md-contact-chips, is an input control that is built on MD-chips and uses the md-auto-complete element. The contact chip component has an expression that lists the contacts. The user selects one of it and then adds it to the list of available chips. The <md-contact-chips> is an input component based on md-chips. It is used mainly…

The <md-fab-toolbar> is an Angular directive contains the headers, titles, or actions. It is used to show the toolbar of elements or buttons for quick use of common functions. You can use the tab toolbar with a trigger. You can use the md-open attribute to control the program openly. You can set the direction that…

The <mat-toolbar> is an Angular Directive used to create a toolbar to show the title, header, or any button action of buttons. <mat-toolbar>: It represents the main container. <mat-toolbar-row>: It adds a new row at the toolbar. Example of ToolBar: Modified descriptor app.module.ts. Content of modified CSS file app.component.css. Modified HTML host file app.component.html. Output: Explanation: First, we have created a toolbar…

<mat-select> is a form control used for selecting a value from a set of options. It is same as the original <select> element. We will discuss more about the selections in Material Design Imagination. To add selection options, add <mat-select> elements to <mat-select>. Angular content supports the use of <mat-form-field> inside the native <select> element.…

The md-chips is an angular directive used as a special component called a chip. It is used to represent a small set of information, for example, a contact, tag, etc. A custom template can be used to render the contents of a chip. It can be achieved by specifying the md-chip-template element containing the custom…

The <mat-radiobutton> is used for <input type=”radio”> for enhance the material design-based styling. It provides the same functionality as the <input type=”radio”> with Angular Material Design styling and animations. Radio-Button Label The radio-button label is provided as the content of the <mat-radiobutton> element. If you do not want the label to appear next to the radio button, you use the area-label to…