Angular Material Tutorial - 8 - Badges

let's take a look at material badges in

this video if you work with bootstrap

badges should seem familiar to you

they are basically small status

descriptors for UI elements for example

if you have to display notifications for

a user or the number of unread messages

in your Inbox badges are the way to go

so let's see what is possible with

angular material badges in this video to

be able to use them we first need to

import the badge module in material dot

module dot es import mat badge module

from angular slash material slash badge

and then add it to the material

components array

now let's create our first badge in AB

component dot HTML I'm going to include

a span tag with the text notifications

to add a badge to the span tag we make

use of the mat badge attribute

so mad badge and this attribute is equal

to the value you want to indicate let's

go with five if we save this and take a

look at the browser you should see the

badge in action the small circular

element on the top right of the span

text now this is the most basic badge

you can have let's see how to customize

this and let's start with the position

by default a badge is placed above and

after the element it is associated with

that is to the top right we can control

the position using the mat badge

position attribute so back in the HTML

I'm going to make three more copies of

this div tag

and I'm going to specify the Matt badge

position attribute

below and before

below and after

above and before let me also add some

margin to the div tags to make sure that

there is enough spacing between the

elements so div margin three realms now

if you save the files and take a look at

the browser you can see the different

positions above and after below and

before below and after above and before

so Matt badge position attribute to

control the position of the badge next

let's talk about badge sizing we can

specify the size using the Matt badge

size attribute the possible values are

small medium and large with medium being

the default value I'm going to make

three more copies of our notification

badge and for the first one I'm going to

add Matt badge size is equal to small

the second one medium which is also the

default and for the third one large if

you now save the file and take a look at

the browser you can see the badges which

are small medium and large

alright next we have badge coloring the

badge background color can be set using

the mat badge color attribute possible

values our primary accent and born with

primary being the default value the

color of course is determined by the

theme your application is using so back

in vs code I'm going to make three more

copies of the original notification

badge

for the first one I'm going to add math

badge color is equal to primary which is

the default for the second one it is

going to be accent and for the third one

it's going to be warned if we save this

and take a look at the browser you can

see primary accent and worn colors based

on your theme

now you might have noticed in all the

notification badges the badge overlaps

with the text the overlap flag though

can be controlled as well we specify the

Matt badge overlap attribute and set it

defaults so back in vs code on the last

badge I'm going to add the attribute

Matt batch overlap is equal to false if

you go back to the browser you can see

that the batch doesn't overlap with the

text anymore

in fact material documentation advises

us to overlap badges for icons and not

for text for example if you have the

inbox icon then overlapping might be a

good choice for text however try

avoiding overlap as much as possible

finally let's talk about binding values

and also conditional rendering the value

for a batch is usually stored in a class

property to bind the value we simply use

property binding so I'm going to open

app component es and over here I'm going

to create a new property notifications

is equal to two and then in the HTML on

the very first badge I'm going to have

property binding on the mat batch

attribute so square brackets for

property binding and the property we

want to bind to is notifications

this property right here so now if we go

back to the browser

the very first badge now indicates two

now sometimes you might also want to

conditionally render based on the number

of notifications for example when

notifications is zero it doesn't really

make sense to indicate that we rather

hide the badge itself we can do that

using Mod Podge hidden attribute so back

an app component I'm going to add the

condition property binding with mat

badge hidden

and this is going to be equal to the

condition notifications is equal to zero

now if we take a look at the browser you

can still see the badge to go back to vs

code change the value to zero

and you can see that the batch is now

hidden that is how you conditionally

render a batch in angular material using

the matte batch hidden attribute alright

that's pretty much what I have about

badges

let me quickly point you to the

documentation so go to material dot io

components under buttons and indicators

there is badge and if you go to the API

tab you will know what has to be

imported alright then thank you guys for

watching don't forget to subscribe I'll

see you guys in the next video