Learn What the Directive Composition API Is and How To Use It in Angular 15

Hello everybody welcome to another video from cold church with profanis angular version 15 has been released and again the angular theme released great features one of them is the directive composition API in this video I will try to explain what this is how it works and we will also see some use cases for those of you who are not familiar with the term directive we will start with the very Basics no worries it won't last long till the end of this video you will know all it needs to start crafting and composing your directives so let's get started I said let's start with a very Basics and saying the following that the directives do not own their own HTML tablet the directives change the appearance and the behavior of a host element who of course has an HTML template and let's see the following example let's say that we have a component element which is the host element and we want to change the appearance and the behavior of this host element in this example we will see the following we're going to uncover to make this element bold and also again on Hover we go on this element to be on the line we need two different things we can achieve this by creating two different directives the first one will be the ball directive which of course will be responsible to set the host element as bold and the other one will be the underline directive and again this will be responsible only for the underline and the code will look like this here we will have the ball directive and here we will have the underlying directive the end result will be to have an element which will have the CMP bold and other line at the same time this is the first approach then we will try the following we will try to use the composition API and for this one we will create the mouse under directive and this will be composed by bold and underline and the end result will be this we'll have the host element and we will use only one directive the mouse gender and behind the scenes this will use the bold and underline and then we will try to improve this even more since we are talking about host directives we can apply these directives in the host element without even use this one how to do this we will see later on in this video so let's jump into the code and start creating and composing our directives I have just updated to angular 15 and let's start by creating two different directives the ball directive the underlying directive and you know what I will also create a component which will be my hot component to give it a try so let's create NDG D under directives are going to have my bold directive this has to be a standalone otherwise we cannot compose the directives if they are not Standalone and I also want to skip the tests and let's also create here the underline and again this has to be Standalone otherwise we cannot compose it and Skip test for now and I will create one component and this is going to be under components and I will name it tester and again I want this to be Standalone skip tests and why not to have inline style and also inline template so now we have the directives ball directive underline directive and this is our tester component at first I will use the up tester component into the app component HTML and of course we have to grab the tester component and go to the app module and import it here so that we can make use of that nice so let's now Focus into the ball directive at first what we want to achieve here is the following whenever the user moves enter the host element we're going to convert this to bold and when we Mouse leave we want to revert the font weight so let's give it a try at first we need into the Constructor to have our host element and this is going to be the element ref and this is going to be a for a generic type and that will be like yeah this is going to be just an HTML element and I'm going to apply like we said we're going to apply two events the first one is the mouse render again and the other one is the mouse leaf so on Mouse and I'm going to do something and on Mouse Leaf I'm going to do something else and now we have some how to link the mouse gender and mouse Leaf to specific events so for this I will use the host listener I'm listening to the host element for a specific event and this is going to be the mouse Ender and let's use the same here but this time this is going to be Mouse live see we have the host element here we can now go and do the following this host element we will grab the native element and since this is a generic type of HTML element we have full intelligence and I want the style and specifically the font weight equals bold and when we Mouse leave I want this to be normal so this is the very first step and now let's give it a try and use this one the up bold here into the host element the up tester and to make this happen of course we need to use the ball directive into my app module so I will import it here and now let's go to the browser to see what we have if a mouse enter we can see that this is bulk and on Mouse Leaf this is back to normal now let's try to create the underline directive I will Fast Forward a bit the video and then I will explain what is happening [Music] so what I'm doing here is the following that again I have my host element and on Mouse gender I'm changing the text decoration to underline dotted and the text decoration color to be by default I have black and then from the host element we can change the black to red green or whatever color we wish and on Mouse Leaf the text decoration is none and the text declaration color again is none so we are reverting The Styling that we have applied so this is it and now let's go and the underline directive I will go to the up module use it here and then we need to grab the selector the up under line and it will go to the upcomband HTML and apply here to the app tester now if we go to the browser we expect this to be underlined and dotted like we can see in difficult Mouse leave this turns back to normal now let's give it a try and try to compose this one the ball directive and underline directive and for this reason I will create another directive and I will name it more gender ndgd and under directives are going to use my mouse enter and again I want to skip the tests and I made a mistake as you can see I have just updated the app module and this means that the directive is not standalone so let's go here and remove this from the Declarations and I will go to the mouse render directive and that will simply Mark these are standalone so Standalone equals to true so what Google try to do is the following I will grab the selector of mouse gender and into the up component I want to replace these two directives The Bold and underline with the mouse under and I want the mouse render to apply both bold and underline to make this happen I will use this property the host directives and like we said I want to use the ball directive and also I want to use the underline directive and now let's grab the mouse Ender the class name and I'm going to go to the app module I no longer need to define the ball directive and the underline directive here but I need to have the mouse under directive let's import this and let's go to the browser to see what we have nice it works just fine so we managed to compose two different directives The Bold and underline how about now so let's close everything in order not to get confused how about now if I want to change the underlying color if you remember here we have an input and since we are using the underline directive here you would expect if I have here color equals to Red for example the underlying to be red but it's not it's still black the reason is that whenever we're using the host directives and we are specifying a directive like these we do not expose any input or output to expose some of the inputs or the outputs we have to explicitly Define them and for this reason we will use here an object and I will say that this is my directive the underlying directive and I want to expose these inputs which one a color so now if we go to the browser we will see that the underline is red and we can also change the name I can define an alias name and for example I'm going to be like the underlying color is matched with this color so the underline color now should replace this from the host element now let's go to the browser and yeah everything works just fine so this is how we use the composition API we managed to create the mouse render directive and we're using the bolt and the underlying and you know what let's go to the ball directive and let's try to use also an output and the output I will name it just hover equals to new event emitter and whenever we Mouse render I'm going to emit this event so this hover sorry this hover dot I mean so this is it and now so similar to the inputs if we want to expose the output we'll have to explicitly Define them so the ball directive should be replaced by an object and the directive will be this and then I want my output the outputs to expose to be the hover and now into the upcombonate HTML here I can be like the hover will do something specific and this is going to be the hover event handler number on this and let's go now into the source code and create this method yeah and just a control look here with the message hover and this is it as we can see here we have the hover and similar again to the inputs we can change the name so into the mouse enter directive where I'm composing The Bold and the underline I want to change the name the name of the hover and I'm going to have it like bolt hover and now I need to change the hover to bolt hover into my host element which is here so this is bold hover now again I expect everything to work just fine nice and now how about if somehow we won't to completely remove these the up Mouse under like that so let's give it a try So currently we have The Mouse and the directive which is which uses the bold and underline and we will go to our testing component we have just the tester Works Standalone the template the Styles no more than this how about now it will use here the host directives and specifically I'm going to use let's say the mouse render The Mouse and the directive so now I expect whenever I use the app tester to reuse The Mouse and the directive without even specifying you know what let me delete everything here and start slowly whenever I use now the app tester I expect to use the mouse render directive which from his side uses the bolt and underline so let's go to the browser and this is it we have the bold and underline how cool this is and the great with this is that we can now go for example into the tester and perhaps we don't need to have the mouse render or we want to use only the Bold or the underline you name it and how about now the inputs and the outputs and in the previous example we had the underlying color and also bold and hover and let's close the app component yes we don't need this and into the mouse Ender we have changed the cover to bolt cover and the color to underline color and since we are using The Mouse and the directive directly as a host directive into my host I expect these names these Alias names to work as expected and let's give it a try and yeah it seems that it works just fine so whenever we hover over test works we can now use the color and we can use also the output as we can see here and let's now try to create one more directive at first let's set the expectations let's assume that we're going to have a functionality where when a user clicks on a host element we want to send a message to our server a post message to our server and perhaps this is going to be to handle some events or whatever so this is going to be our use case click and send something and the problem here is that what kind of payload are going to send to the server the host to Define the payload so let's give it a try I'm going to create one more directive ngd under directives and I will name it event yeah this is going to be my name and Standalone and again I want to skip the tests and for this example we're going to use HTTP client and so let's go into my imports and use the HTTP client module now let's go into the event directive and we said that we need to have an HTTP so let's use here HTTP client http client and we want on Mouse Ender oh sorry on click to do something specific and again we'll have to use the host listener here and I will listen to The Click event and what would happen I won't use this dot HTTP and then I'm going to use a post and yeah I need to also to have a domain let's define a domain here I would read only and this is going to be by domain equals this is my domain so let's use here this domain and then we need to define the payload to send the body to send let's say that we want by default to send the user and then we also need to send some data and the data will be defined by the host element so we need here to have the data for now I will have it like type any this is going to be my data and of course I can have a check here if this data are faulty then just throw an error so throw new error and the message will be please define the data and then we need to also to have here for example pipe take one and then definitely we need to subscribe so this is going to be the functionality that will run on click and you know what since this is not affecting the change detection it would be a good idea also to run outside of the zone so private is going to be my energy Zone and the zone and this is this ND Zone run outside angular so why we need to have this around outside the angular the reason is that whenever we have an assurance operation the change detection run and for this example we do not want to run the change detection so we'll have it something like that nice so now we can use the event directive so let me close this and I will keep this to have it side by side and we can now use the event directive into my host element the app tester so let's go here to the tester component and into the host directives I will use this the event directive let's give it a try if we go to the browser and if I immediately click here we can say to have an error and the error is please define the data how can we Define now the data into the tester component I can use a dependency injection and I will use the inject method and this is going to be my event directive equals let's use the inject and I want to use the event directive and perhaps into the Constructor and generate or wherever so let's do this into the only need foreign [Music] let's have it somehow like this and into the engine you need I want the event directive dot data to be just a payload and the payload could be property one and this is going to be my value and the same goes let's use property2 with another value this is going to be my full tool nice so what we're doing now is that we are providing the data and we expect whenever we run this directive to grab this data and perform the post so let's go to the browser and specifically into the network and definitely now click you can see that of course this is 404 because this domain doesn't exist and if we click into the payload we can see that we just send the user me and then we'll have property one with this value and property two with this value so that was it this is how we can use the directive composition API please let me know what you think in the comments below and if you like this video please share it in the social thank you very much and see you in the next video

Channel: Code Shots With Profanis

Views: 5,657

Keywords: angular, angular tutorial, learn angular, angular lesson, angular v15, angular tutorial for beginners, new updates to angular v15, directive composition api in angular, directive composition api, angular directives

Id: 2S6FVt-tQ7M

Length: 22min 42sec (1362 seconds)

Published: Fri Nov 25 2022