Angular Material Badge (mat Badge), used to display notifications counts like unread messages in Gmail.
- Mat Input Set Disabled Password
- Mat Input Set Disabled Windows 10
- Mat Input Set Disabled Windows
- Mat Input Set Disabled File
The ng-disabled directive sets the disabled attribute of a form field (input, select, or textarea). The form field will be disabled if the expression inside the ng-disabled attribute returns true. The ng-disabled directive is necessary to be able to shift the value between true and false. Disable submit button until all mandatory fields are filled - Angular Angular auto focus for input box - Angular File upload validation - Angular 3 simple ways to share data through angular route. How to solve JavaScript heap out of memory issue in Angular project Rating stars in angular js using directive.
matBadge selector is used to display the badges on top of UI elements.
It is part of Angular material module called MatBadgeModule.
Angular Material Badge
Disable mat tooltip in Angular using matTooltipDisabled. MatTooltipDisabled is used to disable tooltips in Angular. Mat-raised-button matTooltip='Disable tooltip' matTooltipDisabled='true' Disable tooltip We can dynamically change the matTooltipDisabled input property by binding to a variable.
Mat Input Set Disabled Password
A badge is nothing but a small circle,that will be displayed on top of other HTML elements or angular components.
An anuglar material badge may contain a number or small set of characters.
A badge can be used on top of
- Text
- Buttons
- Icons
Steps to implement notification badges in Angular.
step 1: Import MatBadgeModule
We can import badge module in our component 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 Badge directive to display status descriptors
After importing angular material badge module. We can use mat Badge directive to display notification texts as shown below.
Adding mat Badge to the buttons
Adding mat Badge to Icons
mat Badge overlap
If you see the above image the badge is overlapped with the host element.
For icons i.e, notifications and buttons it looks good. But for the text it’s kind of weird.
To remove overlapping of badge with the host element we can use matBadgeOverlap property.
Changing mat Badge Position
By default, material badge will be displayed on top right corner of the element.
We can change the position of mat Badge by using matBadgePosition input.
matBadgePosition accepts four values as listed below.
- above after (Top right corner)
- above before (Top left corner)
- below before (Bottom left corner)
- below after (Bottom right corner)
The default value is above after.
In most of the cases we will not be using mat badge position as badge is like notification and always displayed on top of other elements.
Changing mat Badge Color
To change the color of mat Badge we can use matBadgeColor attribute as shown below.
The default value is primary.
We can change the color of mat Badge to the default theme themePalettes like primary, accent, or warn.
Giving Custom Color to mat Badge
As explained above we can pass only default themePalettes to matBadgeColor attribute.
To give our own custom color to material badge we can override the CSS of mat Badge elemenet.
Changing text color of mat Badge Content
By default the text color of material badge content is white.
To change the text color of mat Badge content we can change the CSS of .mat-badge-content class as shown below.
Changing size of mat Badge
Angular material will provide three sizes for mat Badge.
- small
- medium
- large
The default size of the badge is medium.
We can change the size of mat Badge by using matBadgeSize attribute as shown below.
Changing mat Badge content dynamically.
In the above example we are using static values for material badge content.
To change mat Badge content dynamically, we can bind a variable to matBadge and update it whenever required as shown below.
Now we will create a notification counter using mat Badge
Notification Counter Using mat Badge
I have created a componet called NotificationBadgeComponent and in that added a variable named badgeCounter.
badgeCounter variable is binded to [matBadge].
By default the counter value is ‘0’.
To increase or decrease the counter, I created two buttons + and - and one button is to reset the counter.
On clicking these buttons badgeCounter will either increase or decrease.
Now the problem is even though the counter is ‘0’. The badge content still displayed with value zero.
Ideally when there are no notifications we wont be showing count as zero, will simply hide the notifications.
Display or Hide mat Badge
We can display or hide the material badge by using matBadgeHidden property.
Mat Input Set Disabled Windows 10
If matBadgeHidden is true then mat Badge will be hidden.
Now in the above example with the help of matBadgeHidden we can hide the notifications, when the counter became zero.
I have created a variable called hideMatBadge and the value will be toggled when the counter will became zero.
And actually It’s not required to create an extra variable (hideMatBadge), we can directly pass an expression to [matBadgeHidden] input.
Mat Input Set Disabled Windows
If the badgeCounter is zero hide the badge.
Mat Input Set Disabled File
mat Badge disabled
When a badge is added to an element, for instance button, and if the button element is disabled, the badge color will be shown according to primary, accent, or warn color irrespective of host element shown below.
So in such cases to disable mat Badge we can use [matBadgeDisabled] input property.
But remember that it just changes the color of mat Badge to gray. And it is possible change the mat Badge content dynamically as explained above.