S8E16 | What's New in Angular Material | Ankita Sood - The Angular Plus Show

Episode Transcript
Available transcripts are automatically generated. Complete accuracy is not guaranteed.
Speaker 1 (00:08):
Welcome to the Angular Plus Show. We're app developers of
all kinds share their insights and experiences. Let's get started.

Speaker 2 (00:21):
Hello and welcome back to another episode of the Angular
Plus Show. My name is Lara Newsom. I am one
of your hosts. Today with me, I have q Q.
How's it going.

Speaker 3 (00:30):
Much better than last week when I had to flit?
So yes, yes, I think we're all getting sick.

Speaker 2 (00:38):
But my husband is very sick right now, and so
yesterday I had to banish him from the kitchen unless
you're not allowed in the kitchen. If you do come
in the kitchen, you have to wear a mask because
otherwise he's just like a volcano of germs because when
he moves, he needs like his body wants to cough.
And so I'm like, I can't trust you, You're going
to cough on my food. And so yeah, he's been

(01:00):
to the bedroom and I've been just like walking around
like sanitizing everything. So yeah, it's really soon because it
did shuck. Like so far I've dodged it, but yeah,
it's it's it's hard. I am thankful that we have
because I'm in the new house and we have an
actual spare bedroom, so I can go sleep in there

(01:22):
instead of like lying next to the germ tornado. So
but yeah, I'm glad you're feeling better. Did it take
about a week to get over?

Speaker 3 (01:31):
Yeah, but for me it was like three days. But
my kids are still cofughing. They were sick before me,
and then my wife just got diagnosed today this morning,
so it's the whole house has had their run. But
I had the flu shot this year, so it was
for me, it wasn't terrible. I was only down for
about two or three days.

Speaker 2 (01:50):
That's good.

Speaker 4 (01:50):
That's good.

Speaker 2 (01:51):
Well for any of our listeners who are out there,
I hope you feel better soon. Time to go listen
to all the podcast episodes. It's such a great activity
while you're lying there and trying not to die, just
laying on your bed listening to the Angular Bud Show.
On that note, our guest today is somebody our listeners

(02:13):
should know. This is our guest sday is Ankeida suit Ankeita.
How are you today?

Speaker 4 (02:18):
I am doing very well, thankfully staying away from all
the food. That does not sound fun, So.

Speaker 2 (02:26):
No, it is not. It's a lot easier to avoid
if you don't have little kids like I don't have
little kids, so yeah, but little kids are like they like,
they just they accumulate mm hmm.

Speaker 4 (02:38):
Even if you're in the same rule as them, you
may or may not falls in the next face.

Speaker 2 (02:42):
So exactly, just looking at them sometimes.

Speaker 3 (02:44):
You just espech like you have a little thumbsucker. So yeah,
but it makes it way worse.

Speaker 4 (02:51):
Yeah.

Speaker 2 (02:51):
I had like a kid that would lick the windows
at daycare, and so we were really sick when they
were little.

Speaker 3 (02:56):
But whoa would the windows.

Speaker 2 (03:02):
I remember like dropping her off the first day and thinking, oh,
looking at all the boogernose kids, and I'm like, my
kid will never be one of those. My kid won't
be like that. And then I go to pick her
up and I look at her, like I can see
her through the window, and she and another kid are
like licking the window together, and I'm like, oh no,
I finally like parents are all. That's how parenthood is.

(03:23):
It's like, my kid will never And then you're like, oh, okay, yeah,
my kid definitely will. Like there's there's a lot of
lessons you learned the hard way, so yeah.

Speaker 4 (03:31):
Yeah, your kids like hold my milk bottle.

Speaker 2 (03:36):
Hold on, I'm gonna rub this around the toilet. There
we go. They're discussed. Children are disgusting, but they're cute
and that's why we keep them around. So anyways, we
didn't come here to talk about influenza. We came here
to talk about something much better than influenza, and that
topic is Angular Material.

Speaker 4 (03:58):
Yes, I am very aware that there are not many
Angler developers who might be even using Angler material, but
I'm pretty sure I can bet on it. Everyone has
heard of it, you know, everyone knows it exists, and
everyone knows like it's an option if you ever want

(04:18):
to take it, and I think up until the recent versions,
it hasn't been a popular option for several reasons. It
has been majorly overlooked, feels neglected by the Angler team.
But people forget that there are not many people working
on the material team. I think they're like two and
a half people who work on it. And it's a

(04:42):
lot when it gets a lot of attention because it
is maintained by the official Angler team, and it doesn't
get enough credit for its CDK, which is so much
more easier to extend and implement and zoom. It's like

(05:02):
you have core angular components presentational components that you can
just adapt and extend the way you want it to
do it. So, however, I also know like CDK has,
they're like handful of components and utility glasses and directors
and nothing new net new has been added for many

(05:23):
many years, and same for Material until recently.

Speaker 2 (05:28):
Yeah, and okay, let's let's for those. So if you
if we do have any listeners who haven't used Angular
Material or aren't aware the Angular material exists, what is
Angular material?

Speaker 4 (05:41):
Yeah, so even if you take a step back, I'm
sure that everyone is aware or needs presentational components or
UI get components in the Nix world that like a
simple button or a dialogue or a farm field that
you just want to plug in your in your application

(06:03):
without having to worry what it looks like. Angler Material
is built on top of Google Materials design principles. Currently
it is on version three, so I think it was
announced I'm forgetting the exact year when Material was first

(06:25):
published and announced it was on a Google Aisle stage.
And then the latest version I think twenty nineteen or
some Material three or it was also announced as a
Material view at the time, was announced and adapted. And
finally the Angler Material team has made several overarching architectural

(06:47):
changes so that it is now implementing material three. And
I'm pretty sure, Like I looked around at a couple
of other frameworks. Material Live is because Google Material is
its own design principles and anyone can adapt them the

(07:08):
way that they want. See Angler team has built Angler
Material library that are based out of material design principles. Now,
why would you wanted to use material design principles? That's
also a great question. I'm glad you asked. Google has
spent so much research on understanding design principles, and in

(07:30):
fact it's named material because it tries its design principles,
tries to mimic in real world what material interactions you see.
You rely on edges, borders, shadows to understand in our
treaty space, what is interact by, what can be pressed,
what can be flipped? What you know, the corners, the

(07:53):
radius of a corner. It has tried to mimic those
real world design principles into software and as built design
principles around spacing, typography, colors, and all sorts of things
that you don't have to spend the time and effort
to think about. Because Google is very extensive. I think

(08:13):
there's a bare minimum requirement that they have a PhD
in human psychology if you want to work or contribute
to the material design principles. So very they have done
extensive research and come up with these principles. And then
Angler has built up a component library based on ease

(08:37):
and so the latest one is Material Design Tree, and
I am pretty confident, and our listeners can fighting or
sorry not fighting, correct me if I'm wrong, but I
don't think any other frameworks libraries that are built on
top of material are on Material Tree as on date

(08:58):
because I look and beautify if I'm saying the right views.
Material Library for Material Design sheet says it's currently interactive
development and.

Speaker 2 (09:11):
It will be.

Speaker 4 (09:11):
It doesn't say when would it be available at all.
And then if you look at react reacts Material Library,
which is an UI you can see for all of
the components. They have a list and the Material Design
version that they currently are on is either empty one

(09:33):
or MPT two MD two. No one's on material three yet,
no one's on the latest version yet. So I'm pretty
sure that Angler Materials team was the first ONETH you
update it's material library to the latest version. And there
are several other libraries that I'm sure are listeners and

(09:53):
you'll also use for your presentational component that are available
will for Angler, there's im G, there's Skendo Ui, there's
I think Sparkan also has Sparking Ui also has Angler
now and honestly, they're all great options.

Speaker 2 (10:12):
And yeah, and some of those options, you know, some
you may pay for. Others, you know, others are open source.
But since they're open source, you know, we had looked
so Cisco. We went through a process of picking a
component library. We ended up we we're building one in

(10:34):
house and so which takes a lot of work. But
we also have our own design system. So material design
is not the only design system out there, but like
Anketa was saying, it handles a lot of the decisions
you have to make, like what do buttons look like?
What are dropped down? How did drop down menus? How
are they're supposed to work? How do we how do

(10:56):
we what level of accessibility do we expect in these components?
And so it's like it's real easy to start writing
an application be like I don't need all this, I'm
just gonna I know what buttons are supposed to look like.
But then you forget that, like what's the Harver state
supposed to look like? Is it accessible? Yeah, Like there's

(11:17):
all these things that come up and you're like, oh man,
this is all dumb, and so really my biggest experience
with angular material is sample applications. I almost exclusively use
angular material when I do sample applications because I don't
have to think about what a stupid button looks like.

(11:38):
A Kila material handles that for me.

Speaker 3 (11:41):
But the big majority of us angular users working at
big enterprises who don't let us make the decision on
what to use in those regards. So most places I've
worked at have either used a or created their own
component library. One of them was based on material, but
we use primeng another because it was more customizable, Like

(12:02):
it was a lot easier to stall and dem it
to our company standards and what material was at the time.
I don't know if there's still the case. He said
that they've overhauled a lot, but that was like the
big deciding factor.

Speaker 4 (12:16):
Yeah, we also and I agree like not everyone has
even the stay on what to use, but if you
are aware of some of the pros and cons of
using which one, I think there's a case that can
be made and One of the biggest cases that can
be made for Material library is just by implementing material components,

(12:39):
you don't even have to worry about your accessibility scores.
They're always at par because accessibility is ingrained in the library,
it is at its score and all these other prime
eng or whether you decide to pay for one, whether
you decide to build your own, whether you decide to
build one on top of material, it's still your architectural

(13:03):
changes and you're right up into a few versions ago
it was pain in whatever area of your choice that
it was so painfulty have to either even upgrade or
even customize material. I think that's why NGD was born,
even because of material, because there was no way for

(13:25):
you if you didn't want those junky form fields that
material has, if you want them to not be taking
asma space, if you want them do not look like
if you don't want your application, And that's one of
the biggest things about using Angler material, like why should
I want my own enterprise application to look like a
Google product. I don't. I want to be able to

(13:47):
customize it, even though it comes with Google's philosophies of
design principles. I still don't want it to look exactly
the same. I want to be able to customize at
least some aspects of it, which was nearly impossible to
do it without using ngdep and global styles and several
different custom personalized customer options that for the case, and

(14:13):
if anyone's been keeping up, that is no longer the case.
One of the biggest shifts that the material team has
done has switched to CSS variables, And now I feel
like some people are like, CSSs variables, what, it's a
broad arming language. No it's not. But I feel like
CSS variables has been a game changer in CSS general.

(14:37):
CSS three in general has been a dream. Like I
was like, why did these things not exist when I
was just starting my career and had to fight CSS
so bad, so hard for browser compatibility all the time,
and now it has advanced so much. So anyways, if
you're not familiar with CSS variables, I highly highly encourage

(15:00):
to read up on those. MD and has great documentation
and basically what they allow is to you can store
any value in a variable, just like you do in
any other programming language, and you can use it or
update it at a component level, and have like global
CSS variables that are applied to your STML or your

(15:23):
root and then have them have just listen to those
variables and have the value of your colorabile change if
that variable changes basically and so you can change that variable,
you can scope the change on your base, on your component.
And that's what Angler Matital is really leveraging. So the

(15:46):
first major overhaulogy that they did was they change their
internal architecture so that it would support CSS variables, and
then they added CSS variables so from Verdon ninety and
another major thing whenever someone's working on an application is
to be able to team it because every even if

(16:10):
you just have one theme, you want it to be
consistent and you want to be able to team any
other libraries components that you're using based on your brand colors.
And it was it was also again a pin to
be able to team if you didn't want the default
five or six ballads that material offers, which honestly ideous. Yeah,

(16:35):
application is going to be using those.

Speaker 3 (16:39):
Salmon salmon purple and green and gray. Yeah, I don't
even like you.

Speaker 4 (16:45):
Remember for like a demo app no thank you, So
I don't know who was using them if people are
still using them, But I mean.

Speaker 2 (16:56):
The demo app.

Speaker 4 (17:00):
Then no like in the enterprise application. And those are
the little things that were always going against material design.
And don't get me wrong, like, it's still not perfect,
and I dare you to find one that is perfect,
like even with SHATSI. And it's coming up with all
these great components and customized customizations, but it's still a

(17:23):
learning curve that you have to understand how they write
their customizations and their components. And the Angler Material team
utilizes core Angler principles that the Angler team is by
itself promoting, you know, So it's yeah, like an easier
mental model.

Speaker 2 (17:44):
Yeah, if you go through like the source code, the
components are on push, right, so they're getting ready for
it's almost change detection, right.

Speaker 4 (17:52):
Yeah, it was also might.

Speaker 2 (17:55):
Be on push. I know that. When we were comparing
component libraries, one of our our biggest complaints was, oh, well,
this one has a lot of components, but it doesn't
like they're not they're not stand alone, they're not on push, like,
so then what does that mean for our application? And
so there's compatibility issues that way as well, Like if

(18:15):
you're writing Angular nineteen and you're using a component library
that can't support.

Speaker 4 (18:20):
That yeah, yeah, then that becomes a blocker for you
to be able to upgrade your application. And that's another
big plus or Angler Material Team that they're always at
the same version of Anglo. That particular thing would never
be a blocker for you to be able to update
your application. And they have been pushing so many changes,

(18:40):
just like Angler Team has. Angler Material Team has been
crushing it there. Obviously there are still some gaps, but
they so like I was saying earlier, they're now heavily
relying on CSS variables to the point that and again
one of the biggest hurdles would be, like do you
those Anglar Material components. You would have to create a theme,

(19:03):
either adopt one of the in built rebuilt themes that
they have or build your own. And that really gets
challenging for a developer to understand what's a ballet? What's
a color balette? Why do I need a light them
palette and a dark team pallet? What are these alphanumeric
values inside a palette that I need to specify just

(19:25):
to be able to have a light theme. I just
want a light background and a few colors, you know,
Like I don't need to understand. Why should I just
want to say that my error color should be red?
Why do I need to specify eleven X codes have
a red ballet, you'll be able to use that red
color for my error color. That was such a big

(19:50):
blocker in terms of a developer being able to understand it.
Not everyone even has that design mindset to understand.

Speaker 2 (19:58):
All accessibility can sert there too, like contract like there's
different color contrasts that you need to have for accessibility, and.

Speaker 4 (20:08):
Yeah, and yeah, absolutely, so those things you.

Speaker 2 (20:13):
Can do with overwriting, like with CSS variables. I think
that it doesn't cause this problem, but sometimes the way
people override CSS can make it so that accessibility on
browsers is harder because people are able to up their
contrast as they need to unless like there's certain things

(20:34):
you can do to CSS that can make it so
they can't do that. Yeah, and so design tokens like
the CSS variables help a lot with that as well.

Speaker 4 (20:43):
Yeah, and even the tokens that they have they support
a contrast light contrasts or dark contrast and light team
and dark team and how your app should look like.
And so now, actually there are multiple ways that you
can create a team. There's a schematic generator, which is
something bad Materim did not have schematics, you know, they
didn't have And now there's a generator for a firm.

(21:06):
There's a generator for you. You know, like five or
six components that you just run that generator command and
it just spits out a component with material components and
all the things hooked into it. So that that is
also like not just great for a demo app, but
it is great for just being able to hit the

(21:31):
ground running when you're trying to release a feature and
you just know, like, Okay, I know I need a
firm to use material form components. Let me just run
the schematic and have at least the baseline structure for it.

Speaker 2 (21:44):
Yeah, they're like I remember trying to build themes like
many many many years ago, and it was it was
a lot. Especially if you're working for a company with
a strong brand like It's, it can end up, right.

Speaker 4 (21:59):
Yeah. I don't know if the expectation was that even
the UX or the designer I just would be familiar
with the material teaming, because often they're not. And why should,
like I said, for they just want to provide you
one hex code for error color, you know, why should
they then have to come up with all the other

(22:20):
palette colors that I should have to be specified for
you to be able to team your app. That's not
really on them. That's a technical problem. And this is
where the gap happens. Like we gave you a code,
go figure your code out, and it looks so.

Speaker 2 (22:37):
And I like, I have a design background. I was
a designer.

Speaker 4 (22:40):
I was.

Speaker 2 (22:40):
I designed and I hate it. I hate colors, I
hate deciding like borders and bonds, I hate all of that. Like,
I never want to do any of that again.

Speaker 3 (22:52):
How did I miss that you were a designer? I
like you probably talked about it in like the very first.

Speaker 2 (22:57):
Episode, but I have yeah, I have, like but yeah,
I mean I haven't. I have two art degrees.

Speaker 3 (23:02):
So okay, no, that's what it is. Yes, you're artist, Yeah.

Speaker 2 (23:06):
Yeah, but you know most artists who aren't trust on
babies make their money doing graphic designs. So that's what
I did.

Speaker 4 (23:14):
And I think, well, yeah, so, I mean now teaming
is so much more simpler. You just earlier you had
to do mad Dot define Light Team and mad Dot
define Dark Team. But what if you need a hot
duct team? You know, like, how do you fit in
those values. So now you just have a mad Dot

(23:35):
define team and you just specify the color and if
you want to specify the typography and everything, and that
is if you already have a balete. If you don't
want to use a ballet, you can use their generator
that you just specify the X values that you have
for H. And again this is also a mental model

(23:57):
that you wouldn't need to be familiar with how much
you those things that they have something called as primary color,
and then they have something called as secondary color, which
by name it makes sense that you have a primary
color for your app, and then you have a secondary
color that is for accent, like something that's not your
primary action but your secondary action. So you have a

(24:22):
schematic that you can run and you can specify those
codes and it spits out the teaming configuration for you
and you just plug it in and it's awesome and
I have been using that quite often for my demo apps.
And the third way that you can do is like
forget defining team at all. You can just use CSS
variables and they're called system variables, and it makes it

(24:47):
so easy. I cannot stress how easy it makes things
to be able to theme your application. They're about forty
nine or SOSS variables that all materials components depend on,
and if you specify those forty nine values, then you
can just see that. So like if you specify your

(25:10):
primary color, all your primary buttons or farms or other
actions in them, or anything that has an extra action
associated with will pick up that color. So they usually
start with Matts, says Statash. Matt Happen says happen primary
or something. Sorry not having that, and just specify, like

(25:33):
what should be your border color, So you specify the
outline color or anything that has a border, your farm field,
your card, or any other component like your chip's boder,
they'll all pick up that butter color. And now you
must be wondering, like what if I don't want the
same boder color for all my components? What if I
want to be we will be able to override, like

(25:55):
button should have a different border, but yeah, sure, like
my mad divider or which is like the divider opponent,
or my list or whatever other things can have whatever
the generic body color is. But I want to be
able to customize the buttons so that they don't have
the same body color. Now, there's an easy way to
do that because they have exposed these SaaS mix sense,

(26:18):
which you can easily override for each token that the
component relies on. Now they've updated their documentation so that
each component has a styling tab and you just look
at those token names and specify a custom value that

(26:39):
you need to specify. And it's not just for color,
it's for typography. It's for density, which is like how
light or lose or lose or not's lose, like how
compact or dense your component should look like. It's for
like horizontal padding or vertical padding or any other spacing between.
So if your button has an icon of it, how

(27:00):
much should do you want the spacing between the text
and the icon. You can customize this button as much
as you like with the tokens and how much shadow
should it have or what should fond weight or fond size,
Like you can really really customize a button the way
you want to do with this mix in that they
have exposed. Nice.

Speaker 2 (27:20):
Yeah, because the version nineteen they release the ability to
use components specific mixins. Yeah, So if you're like, this
is my this is my web page for Fred's hardware,
but this specific component is the special Halloween ad. So
everything should be Halloween themed, right, So you could just

(27:41):
for the Halloween component have Halloween colors and it doesn't
affect all of the website. It just affects that one component.
That's like, that's super powerful, and I think it's one
of the things that can be really frustrating is when
you end up accidentally changing a value, like you run
your app and like you actually run it and you're like,

(28:04):
oh no, look I changed all the background colors and
that looks really SCCID.

Speaker 4 (28:07):
So yeah, you can minimize the scope, but we're changes
by wrapping it in whatever CSS selector. Another great thing
is that earlier, for all these components, you would have
to specify color equals primary or color equals worn or whatever,
like you would have to specify and attribute value. Now

(28:31):
you can wrap all of this in a dot ed
or CSS selector and override and so not, and you
can have that dot error class apply to just your
button or to a div that has endless how many
server buttons you want, and if your div has that
dot error class, then all of those buttons inside that

(28:53):
would get that er color overrides that you're wanting to apply.
So It's made it a lot more easier to understand.
Even how do you configure a component and just be
able to do anything with it? Yeah, I mean I

(29:15):
have been. I have been switching for our app, all
of our just updating to material free and using this
system variables approach instead of which By the way, you
can totally stick to your Matt Dot defined team and
your ballet that you have because it is backward compatible,

(29:36):
like how all things always are. So if you have
a palette already and you don't want to touch it
and you don't want to do anything with it, you
can stick to it. I just wanted to be able
to update our components so that in the future customization
is so much more easier for us. If someone wants
to add in a third team. And this is also

(29:58):
where things get tricky, right, you can and you have
a light team and a dark team, and you have
it set up, and that's beautiful and that's great. The
challenge is we find ourselves running into is sometimes the
app might be in a light them but we want
the button to show up in dark theme because there's
a background, and we want the button to show up.
How it shows up in the dark team, and so

(30:20):
it's so easy for designers to just drag that component
and fig mine be like, yeah, use the dark team button,
sell no light team, And I was like, I wish
that's how it worked. I don't know how it was
put to be in dark team all the time, no
matter what the apps theme is. But now it's easy
because I can just use the overrides and my component
and be like, yeah, just use the dark theme version
of this all the time. So it's been it's been

(30:44):
interesting to see how easy all of the previous hacks,
like we would have to use so much to be
able to override and customize it, and now it's just
become so much more easier to understand to maintain, because
other rise it would just be me. He could have
been an understand my own clothes since I was.

Speaker 2 (31:02):
And I think that, like, you know, I've definitely been
on teams where a significant amount of the work was
going through and removing all the direct references to colors.
Right You'll be like, oh, we changed that blue. It's
actually not that hex code now, it's this just very slightly
different one that you can't see the defensive but we
sure can. Then you got to go through and do

(31:25):
the find and replace and so one of the even
without using Angular Material, using design tokens is extremely helpful
for that because you can just go in and change
everything all at once. You know, if somebody reports an
accessibility issue, like your likely font is too light on
this white background, you're like, oh, yeah, right it is.
I can just I change it in one place and

(31:47):
today it's fixed.

Speaker 4 (31:48):
Yeah, so yeah, that's a big deal.

Speaker 2 (31:52):
Okay, So Angular material is the component library, but then
there's also Angular CDK. So what is when we're talking
about the Angular CDK.

Speaker 4 (32:01):
What is that? Yeah, it's cityk sharp for a Component
development kit or developer kit.

Speaker 3 (32:09):
Wait, I think it is developer kit.

Speaker 4 (32:12):
Yeah, because it just says Component def Kit on the WEP.

Speaker 2 (32:16):
So we're gonna say that. Then we're both all right,
would you say off? You're like, am I saying authentication
or authorization?

Speaker 4 (32:24):
No, you're saying, yeah, it's a it's just a primitive
library again, but it doesn't follow any of Google Materials
design principles. Those are basically like directives or basic components

(32:48):
that you can plug into your component and customize it
the way that you you can make it look like
the way you wanted to. There's absolutely no seeming support,
no CSS that comes with this at all, just the
behavior or the functionality that comes along with these components.

Speaker 2 (33:09):
Because for like, yeah, so accordions.

Speaker 4 (33:17):
Right, yeah, yeah, they're scrolling directive is great for like
if you want to have scrolling that fetches new new
batch of data once the current list that is visible

(33:38):
in the viewpoort is scrolled completely, and then the API
request to get more is fired. That makes it so
much more easy. Even their stepper is great because they
have the basic functionality of how you want your stepper
to be, like stepper, like you progressive stepper and you
just they have the bare off everything and you can

(34:02):
make it a function or look like howsoever. You can
add on more functionality to it and make it look
like how sooever you want to do.

Speaker 2 (34:12):
Yeah, like even like the scrolling one. It even does
like virtualized scroll. So if you have a you know,
so you have an API request that red turns eleven
thousand entries and you're trying to render that on your page,
that's going to slow down your performance because it's rendering
all these like dominodes, and so you can use the
virtualized scroll to say, hey, take those eleven thousand results

(34:35):
and only show me the ones that are actually like
only render in the domin the ones they're going to
be in the viewport. And so it can help with
performance of your application and stuff. And that's like that.
Then you don't even have to like break up your
API calls it. You can just use your dumb API
that returns eleven thousand things at the same time. But yeah,
it's a yeah, candy tool. And it looks like in
version nineteen they did some improved events and there as well,

(35:01):
like two dimensional dragon draw. Yeah.

Speaker 4 (35:05):
Yeah, even for the components there. For the longest time,
everyone was requesting for a time picker because there was
a date picker component but no time picker, and they
added that recently, and so they added a new component
after a long long time. But at least there's I'll
take it. At least there's one more, because sometimes that

(35:27):
also becomes a thing that they only have those like
core components that they have specified but they don't have anymore.
And the answer to that, alway is there is the
cdkate that will get you started. And now with the
system variables approach, one major major advantage is that you

(35:49):
can build an Angler component and then use those CASS
variables to theme it and style it and make it
look like the rest of the app. Basically, you know,
you don't have to then specify the background and like
for multiple themes, you don't have to go again ting
your basic Angler component. You just use the CSS wearables

(36:12):
like for background. If you use it to match Maths's
background variable, then when and you have that variable defined
for each team already, So you have done the configuration.
You have done half the work already. Now you can
keep adding more components and using and keep using those
variables that you have defined for typography or taming or whatever.

(36:35):
And it's the end result is that you were able
to build an Angler component half the time that it
would have taken if you weren't relying on that. Yeah,
and granted that's an approach you can take even if
you don't use them material Library, But I'm just saying
that it makes it easy to have everything consistently tied

(36:59):
up up together if you're using material are not. You know, like,
it doesn't matter what what your presentational component is built upon,
it will look consistent because of the ideology that you're
using to configure our team your application.

Speaker 2 (37:19):
So yeah, like one of the I think what I like.
One thing I like about Angular material is like you
said that it is supported by Google itself. Yeah, means
that as I mean, it wouldn't. Changes won't come to
Angular material unless they're compatible with Angular and vice versa.
Really like, Angular can't release a version of Angular that

(37:41):
just doesn't work with Angular Material, and so absolutely, that's like, honestly,
that's one of the reasons I like Angular is that,
you know, especially like so I work, I work for Cisco,
I work for a very large company. Decisions don't happen fast.
You know. We'll say, oh, we want to use we
need feature flags, we need a feature flag provider. Okay,

(38:03):
so we're going to go out and do research and
figure out what feature flag provider.

Speaker 4 (38:06):
We're going to use.

Speaker 2 (38:07):
Okay, now that we've got we've got our choices. Now
we're going to run those by and find out what
we can get if we can pay for that, and
then we're going to do you know, and it can
take months and months and months to make decisions that
feel like they could happen a lot faster, and it's
just because of the bureaucracy involved, and so at least
like with Angular, like I don't have to figure out
you like, I could just say I'm going to use

(38:27):
Angular material and yeah, he says, why you can say, well,
it's supported by the Angular framework. It's like, it's we
know it's going to be compatible, we know it's going
to work. It might not fill all our needs, but
we can extend it if we need to, you know.
So there's like there's reasons for it that way, and
you know, obviously arguments for Angular two is that then,

(38:49):
I mean, there's a lot of reasons. I can tell
you all the reasons why you should write Angular code.

Speaker 4 (38:55):
But.

Speaker 2 (38:57):
One of them that I really particularly like is that
they provide enough out of the box that I don't
have to I don't have to put as much effort
into picking things like just random packages a hope. Will
they be supported in five years, I don't know. It's
open source. We'll find out, you know, will it Is
it going to be compatible with the next version of Angular.

(39:18):
I don't know. We'll find out they're going to be
a security vulnerability that pops up in it that I
don't know about. I don't know. We'll find out, you know.
And so the nice thing with that is that with
angular material being part of Angular, it inherits this like Google,
Google uses it, it has to pass their security guidelines,

(39:38):
which is probably going to pass all of your company's
security guidelines as well. Like it kind of eliminates a
lot of those choices for people.

Speaker 4 (39:46):
All right, yeah, and I like you mentioned because they're
always implementing best angler practices, can they'll be performing like
they wantn't affect your performance fact indicators or benchmarks whatever
you might have like LCP or whatever you're tracking. Those
who never get impacted because you're using this library. There

(40:10):
is something to say about all of that. And you
might think like, oh, I don't have to worry about accessibility,
like no one's using that, But there might be even
if you have one user who is visually impaired in
a way that it's affecting their visibility or they use
high contrast on their even if you are not providing

(40:34):
support in your application, but your customer is using it
in high contrast mode and they're not able to distinguish
between borders or your disabled colors and your secondary colors
and all of that, then that's one custom that's unhappy, right,
and so it does make it a lot more easier
once you follow their their direction on how do you

(40:58):
how basically the design principle materials, because that's building.

Speaker 2 (41:02):
You inherit quite a bit of accessibility just from the
angular from angular material itself, you can still work it
up like it is. Accessibility is one of those things
where like even like I have the best intentions, I'm
going to write the most accessible app, and it's like, oops,
I've thought about this, right, because it's it's hard to

(41:26):
it's hard to be every type of disability when using
your apples, and so it's nice to have a library
that's kind of thought through a lot of those scenarios
already so I don't have to. I mean, everyone should
always always think about their users. An accessible website is
better not only for your disabled users, but also like

(41:46):
you're just hw, I'm a user. I'm showing up to
like try to buy something on your website. If your
website is accessible and your components are accessible, they're probably
going to work as expected, which means that your baseline
experience is going to be better anyway.

Speaker 4 (42:05):
Right, Yeah, and so yeah, yeah, I think that I
mean all the friction against Angler Material. I definitely see
it dissipating. I know Prime MG has two hundred million
downloads on NVM, and I don't think Material is any
mid closed.

Speaker 2 (42:25):
Do that and have a lot more. It has a
lot more components. Yeah, I've actually done this comparison. It
has more components when I was looking at it. I
haven't looked at the library lately. So if you're a
maintainer of prime MG, I'm not trying to bag on
Prime ENG. At the time we looked at it, it
didn't support some of the modern features that we needed

(42:45):
it to per angular right.

Speaker 4 (42:47):
Yeah. They did recently publish their nineteenth vertion, which I
kind of wrong that is based on the Angler nineteen
maybe eighteen. I don't know like how they do the versioning.

Speaker 2 (43:02):
The main branch right now is on it's running nineteen.
So that's that's good because when we were looking at it,
it wasn't it wasn't running the latest.

Speaker 4 (43:11):
Yeah. Now, I don't know how they do the versioning,
if it's always the same version of Angler, or if
it's different. But I think it is.

Speaker 3 (43:17):
I think it is.

Speaker 4 (43:18):
Ye're a the same like, right, right right? I think
it is, But so sure, like there's something to be
said about that. But howsoever, I do think that with
this new shift that the materials them has made a
to support token, CSS tokens, designed tokens and CSS variables,

(43:39):
whatever you want to call them. And we make teaming
so easy, because that was a big like you would
have to spend one day just to understand how they
expect you to team the app to be able to
use material because you could not use then anglar material
component unless you teem it the way it is apposed

(44:00):
to be themed. And now they made it so much
more easy. And I forgot to mention a resource to
you them to generate a theme. So material, like Google
Material has built this website where you can just plug
in the x codes that you want and you can
then extract gson and a few other like priss file

(44:26):
or a few other files and you can just copy
those tokens and paste it in your code get it
started from there. So like, it really cannot get easier
than this as of today to be able to team
compared to what it was like a year ago to
be able to team your apps. So yeah, and I think,

(44:47):
I mean there's still a lot of room for improvement.
I know when the schematic to you generate your team
came out at first, it didn't accept a few colors.
I think it didn't accept bad ground or air color,
Like I forget there are a couple of colors that
it didn't even accept, and like, how so what's the
point of a generator if I can't fully rely on it?

(45:11):
H But now they have I saw an AMAR that
recently fixed it that gotten marched I think in the
late disorders. So they're like definitely making progress and hitting
in the right direction. I would say, so for all
of y'all who have been snoozing on it, I would say,
give it another look and.

Speaker 2 (45:31):
Yeah yeah, and that so you use a material at work,
Yeah yeah, And so like there are companies that do
use it and rely on it and have been doing
it for a long time. Yeah, for many reasons. But
like I said, there's other options out there. A lot
of a lot of companies are like, we're going to
roll our own I will tell you, if you're going

(45:53):
to roll your own component library, you better have a
team to support it, right, because that is the I
think that's the key that people miss. They're like, well,
we can do our own. I'm like, yes you can,
but who's going to handle the bugs when the button
isn't quite right or the form plain doesn't like something
changes and this doesn't work, or design hands you new

(46:14):
requirements like now what do you do to update that?
And so it's nice to have a best Like it's
nice to have an option that's just built in with Angular.
I mean you have to add it, you know, like
it doesn't automatically get added. You have to add it.
But it's a free, open source package. It's easy to add,

(46:35):
it's easy to get started.

Speaker 4 (46:38):
Yeah, I think the fact that it's free and updated,
always has updated to latest angler version, and you don't
have to think about accessibility. Those few things were the
big things that sold us on it when you were starting.
So it also like obviously depends on your priorities, and

(46:59):
we do we have built upon it. So when they
change their internally b API or like their internal structure,
we were crying because we had to go and update
all the places where we had overridden it because they
changed the they change a lot of the shimo or
cssure for their components. But that's what they also tell you, like,

(47:24):
do not rely on something that's not exposed in the
sense that that's not documented that you can override it in
this way. But do we do as developers we inspect
elements like.

Speaker 5 (47:36):
Yeah, I just started this thing, Yes, exactly, well, and
I I so one thing that we that, like I
have done with so component libraries change, whether you're using
Angular Material, whether you're using Prime eng, you're going to
get somebody that's going to come along and say, hey.

Speaker 2 (47:58):
What if we just change it like for fun, Like, yeah,
it's great, And so I'm I'm a fan of trying
to limit the amount of times like that I'm directly importing,
say a component library button, right, So I know that
I have a card that's going to have a button,

(48:19):
and I'm going to reuse that same design a lot
of places. I'm going to make a card that has
that button that looks the way I want to. So
if I have to change out my underlying design or
component system, it's an easier fix. It's less impacted components.
So I think that's the principle behind design tokens is
the less you can any any third party dependency, even

(48:43):
if it's a built in Angular library like Angular Material,
the less you can less you seep it into every
file in your application, the less you're going to have
to extract it out if you ever have to remove it.

Speaker 4 (49:00):
Yeah, yeah, And it's it's also like as someone who
has worked on design systems extensiveway and has and design system,
I'm sure our listeners are aware, but it's just a
basic component library that you want to use in our application.
That's common even if you have multiple applications in a

(49:22):
modern report, you can just plug in those design system
components and use them and extend them and customize them
easily and all of that. It is such a challenge
to build something that is customizable enough and also does
not break functionality if the user is trying to customize it.
It is such a big challenge and I think Material team,

(49:44):
like any library, would like how much is too much
power that they would want to give to their consumers.
And because you can really go all in and like
make it twist and bend around so much that it
looks not like what was built or designed originally, So
like how many dopems should they expise versus not? You know,

(50:07):
that could be that's quite challenged to think of and
like well to solve.

Speaker 2 (50:15):
And it can be a systemic problem as well too,
Like if you find yourself having to write components that
are like design system components that are so flexible they
can handle anything, Yeah, maybe it's time to talk to
your UX team and be like, hey, can we just
agree that this is what this looks like and we

(50:35):
can have these options, but not like any because I've
definitely worked where you get a drawing and you're like,
oh boy, so you want me to take this component
that's the same everywhere else, but for some reason, this
one has a drop down right here.

Speaker 4 (50:50):
Why yeah, yeah, like why not use the same thing?
But yeah, I think and because of this approach that followed,
they have made what makes sense to be able to
customize so much more easy. For example, you have a
tap component that that has that like that active bar

(51:11):
under the active tab. They have many customize the height
the color of that bar, you know, which makes sense.
Your designer might think it needs to be the thickest
thing on that page versus it's just just like one
pixel or point five pixel the most stand. Yeah, so

(51:32):
it makes sense to be able to customize those or
the font weight or the fund whatever fund family. If
you don't if you want your tab that labels to
be comic sense as opposed to or whatever. Your is
your basic one, Like, you can customize all those little
things and still use design principles that are that have

(51:55):
come out from the Google Material team, but also make
it look like yours. So I say that, And however
I still had to inspect element and over write some
of the things that were not exposed as stokens. They
can't have enough of it, but who knows, maybe they
will expose more tokens to be able to they did,

(52:17):
like from Virgin eighteen, they hadn't documented it, but I
noticed it, and so I started using their sass api
to overwrite things. And then when Virgin ninety, when they
did document it, they added so many more variables and
they kind of debradated the ones that I was relying on,
which is fine, that's what you get for being proactive.

(52:39):
And yes, something that was not really shared, but I'm like, oh,
I see it, I can use this token and the
stuckn like no, not really, because first they just had
like one blanket total for but a label and now
they have like ten for the kind of button it
is but an outline or but and flat or blood

(53:01):
and race and blah blah blah. So yeah, it's been
a nice shift that I'm witnessing in the team and
how their components are architectured and aligned and all those things.
So that has been great. Like I feel in a
way that we were not wrong in choosing material as
the library to rely on, because that kind of also

(53:23):
forces good practices within your team architecturally. Do you style
your components?

Speaker 2 (53:29):
So yeah, yeah, definitely well and if you you know,
if you have components that reliably look the same, like
you know, if your customer is used to looking for
the blue button to submit and it's always a blue
button that looks exactly the same, it's a lot easier
to find on the page than it is if sometimes
it's red and sometimes it's green and other times it's

(53:51):
over here. I mean, how many times do you go
to the ATM right or like or the page like
at the grocery store and you have to say yes,
I will pay you all of my money, and like
sometimes they put the yes on the wrong side. I'm
so programmed that it should be on I always don't
want on the right. And if they ever put on

(54:11):
the left night, like half the time I miss it
because I don't read it. I just that's where it's
at click, you know. And so the more you can
sort of standardize your design, the more it helps your
users sort of predict where to find things, which makes
navigating your website easier, because the last thing you want
to do is make it hard for your users to
accomplish the tasks that they're therefore, especially if that task

(54:32):
is giving you money.

Speaker 3 (54:33):
Yeah, our tips at at restaurants.

Speaker 2 (54:37):
Exactly, don't make that hard. Also, maybe don't pre select
the like twenty eight percent button or whatever. But yeah,
like I get it.

Speaker 3 (54:50):
This program to make or to be the opposite of
what you're.

Speaker 2 (54:53):
Used to exactly, just programming two hundred percent tip under
a built what Oh my gosh.

Speaker 4 (55:03):
I know, when you're building out something new, it's often
easy to overlook a design system or design principles. And
we're not everyone's. I mean, it's one thing to not
prioritize it. But if you if you don't, even if
you want you, sometimes you don't know where to begin. Yeah,
and yeah, to be able to just have something I

(55:26):
think material is a great start, and then you can build.
You can use CDK to build on top of it.

Speaker 2 (55:33):
Yeah, absolutely, I definitely agree with that. So and just
having the yeah, having the options like it makes it
so easy to just like you can take your website
from looking like some sad like Craigslist type monstrosity. Yeah,

(55:54):
I mean I can write CSS, I just don't love
to and so nice one. I don't have to do that.

Speaker 4 (56:01):
Yeah, I mean I love writings, yes a second, but
it's also not something that you sometimes don't have the
time to make it picture pixels perfect all the time.

Speaker 2 (56:13):
Yeah. Well, another thing to consider too is if you're
including styles in every single component, you're inflating your bundle size.

Speaker 4 (56:21):
Yeah, exactly.

Speaker 2 (56:22):
Yeah, it's really easy to be like, let's put a
style on this. I'll just put a syl on this.
I'll just put a style on this. And then you're like, oh, oh,
why are my styles like bigger than my actual app?
And you have a bunch of redundant styles in here
that you didn't.

Speaker 4 (56:35):
Need, right, It's like those stale wind memes that I
keep seeing that Oh yeah, I was writing all the
stale when classes all day and now how that's what's
my upper body work out?

Speaker 2 (56:46):
Like?

Speaker 4 (56:46):
Now have biceps? Because I think that which the thing
is hilarious and they need to remember all the no
hate on dailwin. I just think that it's hilarious if
that's what you rely on your architecture. One thing that
you mentioned bundle size, and I noticed this. I didn't
see any documentation around it. But if like of course modules,

(57:10):
no one uses modules anymore, not that we have standalone,
standalone components you can use, like for if you want
to import an angle sorry material component you can use
instead of importing the module. For whatever you're like a button,
you can import their it as a standalone component also,

(57:33):
so they have made that transition. However, in their documentation
where they have examples, I still see them importing like
mad button module and not just mad button.

Speaker 2 (57:46):
Sure.

Speaker 4 (57:46):
I don't know why. That's just a matter of they
haven't updated their documentation versus yeah, I don't know the
reason behind this. I'm not like yeah, like docs are
hard to maintain. I get it, which you can import
just a component, and I encourage users to do that
instead of the module because the difference I noticed is

(58:08):
that in your impulse, if you just have mad button,
but you're not actually using it anywhere in new component
because you refactored something and you remove that button or
moved it somewhere else now being on the latest version,
you get a warning that this component has been imported
but it's not being used. But if you import the

(58:29):
module of the same thing, you don't get that warning
because I think that warning is only for standalone components
and not for modules.

Speaker 2 (58:36):
So yeah, yeah, this module is basically telling yes, Bill, like, hey,
I definitely need everything in here, so yeah, exactly everything
I put in here has to be in the bundle,
and don't don't try to figure out if I'm using
it or not, just like just go get it more.

Speaker 4 (58:51):
Yeah. Yeah, because when you look at stag like examples
on their like, because they have all these tag blits
examples of how to implement any any of those components,
and you look at those examples, you'll see the way
they have done it no matter what component that the
example is far. But they haven't included all the modules

(59:14):
for all the material components, and that's kind of not
best practice to do. You really only want to import
the component that you're using. Even if you think you're
going to use all the components in the library, all
of the material components in your application still just only
import the one component, or even if it's ten components,

(59:36):
I strongly recommend people to just impot those ten components
and not like copy paste it from documentation and include it,
include all of them, because yeah, their bernal size will
be inflated, and then you can't really blame Angular material
for that. You know, that's more of a you problem

(59:58):
than if you're non At least.

Speaker 3 (01:00:01):
You're being honest, I think, and I.

Speaker 2 (01:00:04):
Think it's hard, you know, when you're just starting out,
or even if you've been writing Angular for a long time,
it's it's hard to always understand how Like you're like, oh,
Angular does tree shaking, Well, there's yes, it does. But
if you don't understand how tree shaking actually works, it's
easy to do mistakes like importing an entire module that

(01:00:27):
will make it so that tree shaking can't tree shape
and so yeah, you definitely yeah, yeah, understanding how that works.
And you know, one of those one of the big
key pieces of that is modules. Like I said, modules
are just basically you telling you saying you have to
include everything in the bundle, like, don't tree shake any
of the stuff because I totally need it, and yeah, yeah,

(01:00:50):
it's it's it's it's easy to make those mistakes because
we're like, oh, it's tree shaking. I don't have to
worry about it. You know, it's like, Okay, it doesn't
tree you know, wels, it doesn't tree shake out dead code.
So like if you've got some that are getting called
in your classes that also can't tree shake those out, Yeah,
so I guess, but you know, like, yeah, it's interesting.

(01:01:13):
Like that was something that kind of that was a
like ould moment for me a few years ago where
I was like, oh I understand. So so all right, well,
I really appreciate having you on today. Is there anything
else you wanted to share with the listener about angular material?

Speaker 4 (01:01:32):
Oh well, I feel like I blabbered a lot. I
probably cover all things that I would like to share.
I think it's definitely interesting. I highly recommend people loooking
in the examples that they have on stack lips and
just customizing it the way you know, just showing those

(01:01:52):
includes starting examples that they have to write it and
see what they wanted you with it. And I'm sure
it's it's just fun to play around with it and
then maybe we're convinced to use it.

Speaker 2 (01:02:08):
And yeah, well I think we could also use like
the community can always use more content. So you discover
something interesting about Angular material, like write an article absolutely yeah,
post about it on Blue Sky, like yeah, make a
little video, put it on YouTube, Like there's a lot
of ways. And you know, if you tag the Angular

(01:02:31):
plus show in it, we can have a look and
like promote it as well. But the community is also
like I'd say, the best way to get into the
Angular community is to start contributing to it, and so
Angular Material is a great space to do that, especially
if it's something you're passionate about, Like we could update
some of those examples, right, So, like that's an easy

(01:02:51):
way to start contributing to Adding documentation is a great
way to start contributing to the framework.

Speaker 4 (01:02:58):
Yeah, I will love to hear of someone after listening
to this episode plays around with it. I will please
please reach out to me. I will love to hear
feedback and your thoughts on it and we can love
and hate on it together. It's always I've always had
a love hate relationship with material, Like I love using
it and I hate having to customize it. But it's

(01:03:19):
getting a bit better for sure for me.

Speaker 2 (01:03:22):
I think I think I don't think it matters what
component library are using exactly.

Speaker 4 (01:03:28):
They're all the same. They all have their pitfalls and
they all have their plus points, and it's nice. I
didn't build it, I don't on it.

Speaker 5 (01:03:36):
I just I enjoyed talking about it.

Speaker 4 (01:03:42):
It's not gonna hurt my feelings if you know. Don't
love it either. Like I said, I have a love
hate relationship for it because I'm just spending so much
time with it because i use it at work, and
you like poking at it all the time and poking
holes and finding bugs and talking its conferences about it
and all the things that I.

Speaker 2 (01:04:03):
Love doing it.

Speaker 4 (01:04:06):
Yeah. I did talk about it, but when I talked
about it in GDE, but that was ogin eating, It's
just ogin eating in nineteen. Also, a lot has changed,
so I feel like it could write a brand new
talk about it again.

Speaker 2 (01:04:19):
That's like, I think the worst part about being a
content creator right now in Angular is that yeah, you're
like this is great, and then you're like, oh, it's
ye like and now it's slightly outdated, so right, yeah.

Speaker 4 (01:04:33):
I have to rewrite this all over again.

Speaker 6 (01:04:35):
Thanks, thanks, But like, yeah, we were we were talking
about like, oh, it's it's a great time to be
an Angular developer, and we're like, but like, it's kind
of also a really confusing time to be an Angular.

Speaker 2 (01:04:47):
Developer because if you're working in a legacy Angular application
or an application that started as like version eleven and
has even if it's been being migrated all along, you
still might run into modu. You still might run into
older men of different things, and so yeah, it can
be also very difficult.

Speaker 4 (01:05:08):
Right, And if you're new and you're looking at the
dogs and you might be confused, like why are material
components being imported as modules? I thought they were dead
and like is this the only module that I'm going
to have an application? No, you don't have to use modules.
They just yeah, updated the dogs probably, And it also.

Speaker 2 (01:05:28):
Like it doesn't it doesn't necessarily like aside from bundle size,
like it doesn't.

Speaker 4 (01:05:32):
Hurt, Like it's still worse, right, yeah, it about Yeah, yeah,
it was just the same. And there's a lot of
times if your ID is automatically importing, I think it's
still defaults to modules for material than the actual component.
So it depends. And it's not like a terrible thing,

(01:05:53):
it's just.

Speaker 2 (01:05:55):
That it can be slightly more efficient if you if
you don't import the whole lotch So.

Speaker 4 (01:06:01):
Yeah, yeah library.

Speaker 2 (01:06:06):
Yeah you may not notice it on buttons, but some
of the bigger components you might start to really be like.

Speaker 4 (01:06:11):
Yeah, especially if you're using a lot of them, like
if you're using a lot of dialogues or for using
a lot of from fields and stuff like that in
your application, or Badgie Needter and all of that. So yeah, yeah,
I think it's it's a great library. They're all great,
just like all frameworks are the same.

Speaker 2 (01:06:33):
Yeah. I was like, one of the best talks I
posted as some Blue Sky and one of the best
talks I ever went to was a talk about JavaScript frameworks. Yeah.
What I loved about it is it wasn't like this
one is the best and you should use it. It
was like, we have a lot of amazing choices out there,
and so the one you choose, Like what's going to

(01:06:55):
matter the most is that you know how to use
the one that you choose. Yes, you know, It's like yes.
And it's the same thing with component libraries, like, yeah,
there's gonna be problems. They might. You might run into
issues with all of them. Some some are gonna be
it's really understanding why, like what you need to accomplish,

(01:07:16):
so that you can evaluate whether or not it's the
right pick, like the right tool. Right.

Speaker 4 (01:07:20):
Yeah. I would also say that no, like the other thing,
because it's it's evolving so rapidly. He I hasn't kept
up with it, Like if I had to Gemini something,
you'll give me something that's absolutely wrong or either old
deal or something.

Speaker 2 (01:07:40):
Yeah.

Speaker 4 (01:07:43):
Yeah, but yeah, if you want to inherit your latest
like if you use Google Meet and stuff, you might
have noticed like it had as Google was adapting Digital
Design Tree across it's so other like so or to
another product. England Material Team also adopted it, and like

(01:08:06):
I said, I think it's the only component library out
there that is already on Material Design Tree. So yeah,
if adds something that is important to you that you
adhere to your latest design principles that are being published
by a major BRANDT yeah, I think it works. It

(01:08:29):
definitely checks that box works well.

Speaker 2 (01:08:31):
That exactly well, and they've already done it, so like
it's not Yeah, the band aid's off right right yeah, Alkida,
If if the listeners would like to reach out to you,
what's the best way to do that.

Speaker 4 (01:08:46):
I think LinkedIn and Blue Sky. I am still like
I haven't deleted my pro account and I refused to
call it x but I still am on it now.

Speaker 2 (01:08:57):
Yeah, Like I can't delete my account because I literally
can't log back into it.

Speaker 4 (01:09:02):
That's so funny.

Speaker 2 (01:09:03):
Yeah, I refuse to pay for I refuse to pay
for it because it was hot garbage. Yeah, and so
it wouldn't like at the time, it wouldn't let me
set up m a like proper yeah, for authentication, and
and so then like time passed and I hadn't logged
in a while, but now it requires it, but I

(01:09:24):
never set it up, and so I literally can't get in,
and they're like email us and we'll help you. And
I've tried like three or four times and they won't
let me because I think they know I just want
to go into deep leap it. I'm like sort of
hoping that maybe it's just gone by now because they're like,
she's never coming back, but that's funny, who knows.

Speaker 4 (01:09:43):
Yeah, it's still there. Occasionally someone will send me a
tweet and I'll open it and I'll be like, I'm
logged in and my browser already, but if I'm logged
off some day like you, I think i'll be logged on.

Speaker 2 (01:09:55):
Also, Yeah, but yeah.

Speaker 4 (01:10:00):
Would be the best place is to reach out Otherwise,
hopefully I'll run into you and other people at some
conferences around or some online needles and stuff.

Speaker 2 (01:10:11):
Yeah, I feel like like this next year's conferences, I'm
just starting to hear two of them. I know that
there's quite a few Angular conferences planned for the fall,
so it'll be great to actually start to get some
dates on those and start to the FPS out and
all that. So so yeah, definitely I look forward to

(01:10:33):
running into you around. Like the last time I saw
you was in Germany and that was awesome. So it's
always great to see friendly faces at the games. I
guess we get.

Speaker 4 (01:10:46):
To right, Yeah, yeah, that would be awesome. So yeah,
the rise the Internet is a great place, isn't it Exactly?

Speaker 2 (01:10:58):
Just like fire up a zoom call and hang out
like this, Like, hey, wait a minute, we haven't had
on ketah on for a while, let's have on keta on.

Speaker 4 (01:11:09):
Thank you so much for having me.

Speaker 2 (01:11:11):
Absolutely, you know the fact that you're working with Angular
material every day is awesome and it's like because like
you said, it's like it often gets overlooked and I
think it's a really powerful tool. So great to have
you on. Thank you the listener. Thank you for joining
us today. Don't forget to subscribe. If you like what
you're hearing. If you have ideas for more shows that

(01:11:32):
you would like to hear, you can message us on
Blue Sky. The Angular Plush Show is on Blue Sky
and we'll catch you next time.

Speaker 7 (01:11:44):
Hey, this is Pressol. I'm one of the NGI Champions writers.
In our daily battle to crush out code, we run
into problems and sometimes those problems aren't easily solved. NGI
KONF broadcasts articles and tutorials from NDIE champions like myself
that help make other developers' lives just a little bit easier.
To access these articles, visit Medium, dot com, forward Slash,
n gcomm.

Speaker 1 (01:12:06):
Thank you for listening to The Angular Plus Show, a
NGCOMFF podcast. We would like to thank our sponsors, the
NGCOMF organizers Joe Eames and Aaron Frost, our producer Genebourne,
and our podcast editor and engineer Patrick Kays. You can
find him at spoonful Ofmedia dot com.

All Episodes

S8E16 | What's New in Angular Material | Ankita Sood

Episode Transcript

Popular Podcasts

New Heights with Jason & Travis Kelce

Dateline NBC

24/7 News: The Latest

.css-15opob5{left:0;position:absolute;top:0.8rem;} All Episodes

.css-14f5ked{margin:0;word-break:break-word;display:-webkit-box;-webkit-box-orient:vertical;box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}S8E16 | What's New in Angular Material | Ankita Sood