Create Input, Textarea, Select, Radio Button, Checkbox field and Button in Angular Material

Posted at: April 12, 2019 4:33 PM

In this lesson we will learn, how to create input field, textarea field, select field, checkbox, radio button, button and toggle button in Angular Material. And also we learn how to use ngModel and change event in checkbox and radio button. And use two way data binding in select fields. And how to show a validation error message and hint message in Angular Material.

Import Angular Material Module.

Import angular material module in your own NgModule.

MatCheckboxModule: This module import for creating checkbox

MatRadioModule: This module import for creating radio button

MatFormFieldModule: This component uses for creating form field. Its contain input field. This is use of style such as floating label, hint, error message etc.

MatInputModule: This module import for creating input and textarea field

MatSelectModule: This module import for creating select field

MatButtonModule: This module import for creating button

MatButtonToggleModule: This module import for creating toggle button

Above these are modules import and export in your own NgModule

material-design/material-design.module.ts

Import NgModule MaterialDesignModule

Import this NgModule MaterialDesignModule wherever you would like to use the Angular Material components. For example import in AppModule

Also import FormsModule, ReactiveFormsModule into app.module.ts for NgModel and FormController

src/app/app-module.ts

src/app/app.component.ts

Use in HTML

src/app/app.component.html

src/styles.css

Conclusion

We have learnt this lesson for creating input, textarea, select, radio button, checkbox, button and toggle button. And we have used ngModel and change event on radio button and checkbox. And validate email and show validation error message and hint message in Angular Material.

Input Field Select Field Textarea Radio Button Checkbox Button Toggle Button Email Validation Hint Message

Please leave comments

0 Comments