If you build things with Angular, you probably already know that you need to keep
up with the framework as it evolves over time. Well, in this video, I’m going
to help you do just that. We’re going to take a look
at the new host attribute injection token and why you may want to use it. In this video we’ll use an example
of an existing button component with inputs and we’ll replace them with the inject
function and the HostAttributeToken class. Alright, let’s get to it! Ok, let’s take a look at the example
that we’re going to use in this video. We have a demo application
for the Vans clothing brand. We’re going to focus on these two buttons here. They have been added using a button component. When we look at the code for this component, we see that we are using the input function
for our “primary” and “secondary” labels. Also, the primary label is required, meaning if we use this component but fail to provide a
primary label, we will receive an error. Now, this works totally fine, but in
this app we know that we only ever need to provide static string literal values for
the labels when using this button component. We are going to set them once and that’s it. They won’t need to change dynamically
so maybe an input is not the best idea. When we use an input, Angular will
create a binding that it will then need to check on every change detection cycle. This isn’t great since we will really only
ever care about the value on initialization. After that it won’t be changed. Well, this is where the @Attribute
decorator comes into play. Since we know these values are going
to be a static string literal we can instead convert them over to attributes. To do this, we need to start
by adding a constructor. Then we can add the @Attribute decorator. Within this decorator, we need to
provide the attribute name as a string, so in this case it’ll be, “primaryLabel”. Next, let’s include the public modifier
and name it “primaryLabel” as well. And, it will be a string. Now, let’s do the same for
the “secondaryLabel” property. We’ll add the decorator, the “secondaryLabel”
name, and type it to a string as well. Ok, now we can remove the
inputs and the input import too. Now, since we switched away from signal inputs,
we need to go update the template real quick. And there we go. We don’t need to do anything else. So, let’s save and double check. Yep, the buttons look like they did
before this change, so that’s pretty cool. It’s a small optimization but it makes a
lot more sense for what we’re doing here. But now, in newer versions of Angular,
we can even do this differently. We can use the inject function and
the new HostAttributeToken class. In this example let’s switch it over. Let’s start with our “primaryLabel”. Let’s create a field like we had with
the input function named “primaryLabel”. Then we’ll use the inject function. In this function we’ll new up an instance
of the new HostAttributeToken class. Then, we need to add the attribute name
as a string like we do with the decorator. Ok, now let’s do the same
for the “secondaryLabel”. Let’s add the field, the inject function, the HostAttributeToken class,
and the name of the attribute. Now let’s remove the old @Attribute decorators
and the constructor since it’s not needed anymore. Ok, now let’s save and see how this looks. Uh oh, it looks like we broke it. Well, this is actually one of the benefits
of using this method over the old decorator. If we look at the console here, we can see that
we have an error for our “secondaryLabel” letting us know that one is not found on our second
button where we don’t need the additional label. So, this is an advantage to using
the inject function and this class, we will get a dependency injection
error when something is wrong. In this case the fix is pretty simple. We can make this attribute optional. Now, when we save, we’ll
see everything is all good. So, just a different way to do this sort of thing. If you can use static string literals
for your components and directives, attributes are the way to go. And if you want runtime dependency injection
errors or don’t otherwise have the need for a constructor, you’ll probably want to use the
inject function and the HostAttributeToken. Alright, that’s all for now. Until next time, thanks for watching.
