Updated April 4, 2023
Introduction to Angular material label
In Angular material, we can create labels using the form field. Labels are present inside the form field inside the material library. If we want to use this, then we have to import the form filed from the material library. After this, we can use the appropriate label to create labels using angular material in our application. Labels help us to provide a name to any input field or other component name which helps them identified easily. We have seen this type of thing while providing value to the input fields in the form, hence it is present inside the form filed package for the material library. In the coming section of the tutorial, we will see how we can use this to create labels inside our application, for beginners to get a better idea.
Syntax:
In this section we will see the syntax to create labels inside the application using the material library, also we have to make some configurations in order to make this work properly. Let’s have a closer look at the syntax to understand it better see below;
<mat-form-field>
<mat-label>your label..</mat-label>
<input placeholder="">
</mat-form-field>As you can see in the above syntax we are trying to create the label, using the ‘mat-label’ from the form filed. We can easily create by configuring the small things to the application but first, we need to have the material application in place.
How does label work in Angular material?
In this section, we will see how we can use the form field to create the label inside our application. We will see step by step configuration to make this work properly. Also for this, we need to have material library in place in order to use its module to create the component inside our application first have a look at the basic configuration to use this let’s get started to see below;
1) MatFormFieldModule: if you want to create the label we require to include this module inside our root module or any of the child module in which we want to use this. After that, we will be able to implement the label inside the application. For reference please see the below code for reference and paste it inside our root module see below;
e.g. :
import {MatFormFieldModule} from '@angular/material/form-field';2) mat-label: Now after importing the required package or module we can now this tag to create the tag on the UI. Below see the piece of code attached to create the label using the material library in the angular application see below;
e.g. :
<mat-form-field appearance="legacy">
<mat-label>enter name ::</mat-label>
<input matInput placeholder="enter name here">
</mat-form-field>As you can see in the above piece of code we are trying to create the label using the ‘mat-label’, for this, we have to have ‘mat-form-field’ module import inside the application. we can set up the material inside the angular application just follow the below steps mentioned, you are building your project from scratch then follow the step from the first point else you can jump to the last step mention in the document. Let’s get started to see below;
- First, we will be going to install the Angular CLI which will help us to create the angular project very fast and easily, just by executing few commands. We can use angular CLI, later on, to include or install any dependency inside our project. Execute the below command to install angular CLI;
e.g. :
npm install -g @angular/cli)3) After the successful installation of the angular CLI we can now create our very first angular application by using the below command, just mentioned the project name for your application see below;
e.g. :
ng new your project name
>> ng new my-first-projectgo to the directory where you have created it in order to see the changes.
4) We should do this step in order to install all the required dependencies, it is optional but recommends to do to avoid any future error, see below;
e.g. :
npm install5) We can now able to test our application, just run the application. It will show us the default component provided by angular, we can change it as per need;
e.g. :
ng serve6) Once the server is started successfully then we can test and see our Ui on the localhost just by adding the port as 4200, it is the default port for angular application, however we can change this while creating our application;
e.g. :
http://localhps:42007) Now we have to install the material library in order to use its component, we can install it by using the below command.
e.g. :
ng add @angular/materialWe are now ready to use any of the components provided by the material library for quick development let’s take look at the mat-label implementation.
Example
Sample piece of code to create a label using the material library in angular, with form filed.
1) index.html code:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/normalize.css">
<my-label>Loading ....</my-label>2) demo.label.componenet.ts code:
import { Component } from '@angular/core';
@Component({
selector: 'my-label',
templateUrl: './demo.label.componenet.html',
styleUrls: [ './demo.label.componenet.css' ]
})
export class DemoLabelComponent {
}3) demo.label.componenet.html code:
<h5><u><i>Label demo using angular material !!</i></u></h5>
<p>
<mat-form-field >
<mat-label>Enter Name</mat-label>
<input matInput placeholder="Placeholder">
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
</mat-form-field>
</p>
<p>
<mat-form-field>
<mat-label>Enter City</mat-label>
<input matInput placeholder="Placeholder">
<mat-icon matSuffix>emoji_nature</mat-icon>
</mat-form-field>
</p>
<p>
<mat-form-field>
<mat-label>Address</mat-label>
<input matInput placeholder="Placeholder">
<mat-icon matSuffix>emoji_transportation</mat-icon>
</mat-form-field>
</p>
<p>
<mat-label>Label One</mat-label>
<mat-icon matSuffix color="warn">cruelty_free</mat-icon>
</p>
<p>
<mat-label>Label Two</mat-label>
<mat-icon class="material-icons-two-tone" color="primary">back_hand</mat-icon>
</p>
<p>
<mat-label>Label Three</mat-label>
<mat-icon class="material-icons-two-tone" >emoji_symbols</mat-icon>
</p>
<p>
<mat-label>Label Four</mat-label>
<mat-icon class="material-icons-two-tone" color="warn">duo</mat-icon>
</p>4) module.ts code:
import {NgModule} from '@angular/core';
import {MatFormFieldModule} from '@angular/material/form-field';
@NgModule({
exports: [
MatFormFieldModule
]
})
export class LabelMaterialModule {}Output:
Conclusion
By the use of label, we can have proper names to our fields by which users can easily understand it. It is very easy to use, handle, developed, and maintainable by the developers. Just by making a small configuration, we can start using it inside the application.
Recommended Articles
We hope that this EDUCBA information on “Angular material label” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
