JEREMY ELBOURN:
Ahoy, web friends. I'm Jeremy Elbourn,
tech lead for Angular. And I am sincerely
excited to show off a brand new feature
we're releasing in Angular v 15, the
directive composition API. Angular devs have
long wanted a way to reuse behaviors
from directives without those
directives showing up in the public API
of their components. This has been one of our most
requested features on GitHub. And it was even in my own
personal top five feature requests. To show off this new feature,
let's go through a scenario. Let's say I work on an app
called Quality Xylophones. The designer on my
team has come up with a new design
for menus in our app, and I need to build a
new component for them. They've even helpfully already
written the CSS for me. We can start by adding
a couple of components for our menu and menu item. Normally we'd jump
deep into coding out the menu functionality now. Instead though, we can use
the directive composition API to pull in behaviors we
need from Angular CDK. To use the new API, we add
a host directive's property to our components, bringing
in CdkMenu and CdkMenuItem. This will apply these
directives to the host element of these components. We can try out components
in the template now. Note that there's no sign of
anything CDK related in the API here. If we run our application
and look at the render DOM, we get something like this. You can see that
the CDK directives have applied a number of
CSS classes and attributes. So we know that the
directives have been applied. We can also navigate the
menu with our keyboard. It works. The design I'm building also
includes a disabled state for the menu items. I know that CdkMenuItem
already has an input for this. So now I can update my
hostDirectives property and expose a disabled input as
part of the menu item's API. You can see we've refactored
the entry in hostDirectives so that we can specify
the inputs property. This lets us use an alias on
one of the CdkMenuItem's inputs to be included in
qx-menu's public API. In this case, we're aliasing
the verbose cdkMenuItemDisabled to the much shorter disabled. With this in place, we can
now bind the disabled input on a menu item. You can alias any number
of inputs and outputs from directives you apply in
the hostDirectives property to create a fully custom API
while still delegating behavior to the compose directives. Now, I've got a
functional menu now. But I need to change it from
being an inline menu to a pop up menu. So let's take what
we've covered so far and apply that to finish up. I'll introduce a new
component for my menu trigger. This component
uses CdkMenuTrigger in hostDirectives and aliases
the input cdkMenuTriggerFor to panel. Notice here that I can also
use the hostDirectives property on a directive in
addition to a component. Now, I'll go back
to the template and add my new menu trigger. To connect the menu
trigger to the menu pop up, I put the menu inside of
an ng template and declare the template variable
called popup. And with all of that, I can
hop back to my running demo and see the whole
menu in action. I can click the
menu trigger and get a fully functional pop-up menu. By using the directive
composition API along with the CDK menu primitive,
we have a pop up menu that does everything
we need, including setting all of the right
attributes for accessibility. By adding and configuring
a few host directives, we didn't even need to write
a single line of JavaScript. And because it was
so easy, I won't mind when the
designer comes back next month with a new design. Now that you've seen what
it can do, go try it out and let us know what you think. [MUSIC PLAYING]
