Angular Signals Example - Learn Them by Doing

in this video you will learn how to build a to-do list with such features like deleting editing and creating by using angular signals [Music] and the project that we want to build is called to do MVC as you can see here I opened the website to the mvc.com and here you can see examples in different front-end languages and here is how our project is looking like we have here a header to those and just an input and we can type something here after we're hitting enter we see our to-do here on the bottom and we can directly add one more to do as you can see we have here cross on the right so we can remove the to-do or on the left we can select the to-do and then it is marked as completed after we marked at least one item we can see on the bottom one item left and here different filters like all active completed we can click here on active and we can see all items which are not completed yet on completed we see only completed items and we can click here clear completed and then we have just one item left because all our completed items are removed additionally to that we have a a double click here and we can update our item this is exactly the project that we want to implement inside angular by using angular signals and here I already generated for us an empty angular application I don't have anything here inside app it is just an empty HTML and an empty app component but most importantly we have here style CSS and here I have lots of styles which are directly from this to do project as you can see here are classes like to do app H1 new to do edit and so on obviously you don't need to retype it you can just take it from the description box below so first of all here let's create a new folder for our huge feature inside app I want to create a folder which will be called to those and this is exactly the whole feature that we want to implement with the list filtering and editing and inside to do this directly I want to create our new component because it is a standalone component here is our to-do use component DS and to those component HTML now inside I will simply write to those so we can check if our component is working and here inside TS file we must generate a new component and first of all here let's provide the selector for example app to those because my project is named app then we need here a template URL for the file that we just created to those component HTML and we must say that this is a standalone component this is by Standalone true after this I want to export our new class which is a to-do's component now in order to test that we must register it inside our app component this is why I am jumping inside app component yes and inside our inputs I want to add here to those component without this line we can't really render our component but now I can jump inside HTML and just render here our app to those component let's check if it's working I don't have any errors in the console all and inside browser here on the top you can see a single word to those which actually means we successfully registered our todos component and rendered it inside our project what I want to do next I want to split our feature in different components because I want to keep it separated and what I want to create here is first of all a header than a footer that we have here on the bottom then main part and probably a component for a single to do which actually means for this we must create four additional components this is why here I want to copy to this folder completely and now inside app to those we want a new folder which is called components here we will store all child components of forward to those feature this is by inside components we can paste and rename this folder and first of all I want to create here a header folder now inside this header folder we must rename our to-do's component to header component and HTML file to header component HTML well now inside I want to render our header word and just change our component so here we will have a selector app to those header because this is a child component and the template URL here will be header component HTML this is also a standalone component but the class here will be header component our first component is fully ready now I just want to copy paste it completely and rename to the footer this is exactly what we want to render on the bottom so here again it will be footer component HTML and footer component yes now inside our HTML we can just write footer and we must update our component so here we will have not had about footer and here will be footer component HTML and the name will be footer component and the last thing that we need here is our main component this is why I want to paste and rename header to the main and just update the names so here will be main component HTML and main component yes now let's just change our HTML to Main and update our TS file it will be app to Do's main here is our main component HTML and our component is called main component so all our components are ready now we must register all of them inside out to those component tiers this is why here Insider inputs we can register all these components first of all it is header component then footer component and then main component and now we can render them directly inside our HTML so just for testing I will write Here app then to those here we have header let's close our app to this header then I will copy paste it and just change to Main and on the bottom we have our footer let's check if it's working we don't have any errors and as you can see inside browser we're rendering three different components header Main and footer which actually means we've fully prepared our empty components then next thing that I want to prepare is the interface because we are talking here about to-do's and it makes a lot of sense to create such entity inside our application and in order to do that inside our app to Do's I want to create a new folder and it is types and inside types we will store all interfaces or types or enums which are related to our feature this is why here I want to create to do interface.s and here is just a single to do how it must look like and then we will reuse this interface everywhere so Ubuntu export here an interface and it is a to-do interface and it has several things first of all it is 80 it must be a string then a text this is a content of our to-do and the last one is is completed and this completed must be Boolean which actually means when we completed to do we must change is completed property to true and now we are coming to the most interesting part it is our service by is that because essentially we will write always signals inside the service so actually all our components will use the same shareable service to isolate all these methods inside this is why here inside our app to Do's I want to create a Services folder and here we will have just a single service to those service tiers and here we have an injectable service and as it is recommended inside angular we want to register it was provided in root after this we must export this new class which is our to-do's service so now the question is what western here and obviously we're starting the list of our to-do's and we want to store it with signals this is where here I want to create to those property we can even write with camel case to those signal so we know that this is a signal and here we are assigning our signal with initial value empty array and here we must say that inside we want to store our to-do interface array which actually means here we created a signal and it stores inside an array of our todos and by default we don't have any to-do's now we need to create here several methods to work without todos like for example add to do because we want to add it to the list remove to do update to do and so on but here I want to start with just a single method add to do and what we are getting here after we typed in the input is just text and this is a stream and here we're returning void because it simply must update our signal how we can do that first of all we must create here our new to doom and we must say that this is our to-do interface so in order to create that we must throw inside our text we know that is completed by default is false but the most interesting is ID we don't have a way to generate a unique ID this is why I will simply use here math random and after this to string 16 and this is how our string will look like it is fine for our needs but obviously in the real project you will make an API call to the backend and it will generate for you NAD for our case this is completely fine we generated a new to do and now we must push it to our to-do signal in order to do that we can use a method which is called update and we are calling it on our signal and inside we are providing a function which will update our elements inside which actually means here we are getting inside function our to-do's that we already have and now we must return a new array of to-do's this is why I am spreading all our to-do's and at the end I want to push our new to do which actually means with a single line we updated our signal with new data and as you can see here update method updates the value of the signal based on its current value and notify all dependents this is exactly what we want now I want to start implementing our header but in order to do that we must change a little bit however to those component HTML it is actually completely fine but we must wrap it with an additional class so here will be div class to do app and when needed because the whole CSS is written with this parent class but all this stuff is staying the same now let's implement the logic inside our header this is why I am jumping inside our components header head HTML and this is what we need to implement our header is just this part that you can see here and the input that we're changing this is why let's write exactly this here we have our header with class header and inside our header we have H1 tag and this H1 tag is to do's and after this we have our input where we will type everything and most importantly is our class new to do after this we also have a placeholder which is what needs to be done but also have here autofocus this is exactly the sautofox feature after this we must provide the value and here we must create a value text I will create it in a second and also we need here an event after changing the input this is why here we have a key app and let's name it for example change text where inside we're providing our event and last but not least is key up Dot and this is our enter which will happen only when we want to add to do this is by here we have a net to do method so again we created here our value which we must create and we have two events change text where we're changing this property text and that to do where we're adding it to do now let's Implement on the right exactly that here is our header component and first of all we need here text it is a string and by default it is an empty string now here we want our change text function which we created on the left with key up event and we're getting here event which is an event and we're returning here void what we want to do here we want to get a correct Target and actually here we must convert it and say that this is an input this is by here we are writing that event dot Target as HTML input element and in this case we told typescript that our Target is an input this is where here now we can write this text equal Target dot value because in this case our Target is HTML input element and it has a value which actually means every single time when we have a key up event we change our text now we must Implement add to the function but the main point is that we want to inject our service here in order to use it this is why here we want on the top to inject our to-do service that we just created and here we're using inject function in order to inject inside our to-do's service so with this single liner our to-do service is available for us inside this component so here after change text we can create add to do function and here were written in void and we simply want to call our service this is this to the service dot add to do and we're providing inside our text and our text is inside this dot text which actually means with this single line from any place of our application we can add a new to do to our signal and after this what we want to do we want to reset our text this is where this text equals an empty string let's check if it's working as you can see here we don't have any errors let's look and browse it so here you can see that our headline is there we have our input what needs to be done I can type something and hit enter and the text disappears and now we can type again and actually it didn't just disappear it went to our signal but obviously we didn't render a value from the signal yet which means now we must Implement our main section to render the hour to Do's so let's jump inside our component main inside HTML and here we want some markup what we want here is a section with class Main and inside we have a URL with class to do list and what we want to render inside is to Do's from our service this is right here on the right inside main component we want to get access to our service this is by here to do service and by injecting it with Studio Service as you can see here if we're using our this to do service we have full access to our to-do signal which actually means we can use it directly inside our HTML this is why here what I want to do on the left I want to render a list with our signal from the service so here let's just write a div with NG for Loop and by looping to create a to-do off to those and we're getting them from our to-do service Dot and here we have our to-do's signal and actually we must write here around brackets because this is a signal and this is how we're reading the value from the signal now here inside we can just render like normally to do the text let's check if it's working as you can see here we're getting a warning because we used ng4 directive but we didn't inject common module inside our component this is why here on the right we must input common module so it will work correctly as you can see now everything is green and we don't have any error let's jump to the browser and here I will try to type something and hit enter and as you can see now we're getting this to-do's which are directly added inside our main section which actually means every single time when we're submitting the input all to do is pushed to the signals and now inside main we are subscribing to this signal and we're rendering information from it this is exactly how we typically use signals inside our application we are packing them inside the service and we can use them everywhere but now it is time to make it more complicated just to remind you inside out of doing see on the bottom we have three different filters all active and completed which actually means we must Implement somehow filters inside our application so first of all what I want to do is generate the enum for our filters in this case we can understand directly what filters are possible for us this is why inside app to those types we can create a new enum and let's name it filter enum TS now here let's export our enum which is filter enum and here we have three different enums first of all it is all this is just a string all then we have active which is just a string active and we have completed and this is a string completed and what we want to do now we want to activate some filter which actually means at all times we have some filter activated this is why inside our services to the service we can create a new signal just for filter this is where here I will create filter signal and this is just a signal where inside we can write only filter enum that we just created and by default the value here will be filtered in dot all which actually means we're showing all our to-do's so our filter is there and now we can use it for logic inside main tasks this is why here I will jump directly inside main component yes and here I want to create a property visible to those by that because as you can see here inside the example we have different visible to Do's based on what filter is activated this is not how we rendered elements for now because we simply rendered all our elements from the to-do signal and this is run this is where here inside main TS I want to use the filter to write correct logic and in order to do that we must use computed so what is computed we can based on some signals calculate some new signal this is exactly what computed is used for so here I want to create 8 visible to those which is a property which will hold just to those which must be rendered on the screen now with current filter and we're using for this computed function and inside we provide just a function and we can use inside several signals first of all here we want to get to do signal and this is this to the service our to-do signal and here we also want to create our filter and this is our this to do service dot filter signal and as you can see I'm using here round brackets because we just need to read the value which actually means we have directly here the list of our to-do's and the filter which is active this is where here we can right now logic what do those we want to show based on this filter so here we are checking if our filter equals filter enum DOT active it means that we need to filter out only active to-do's this is the way here I want to return our to-do's filter and by getting access to every single to do and we want to know that our to do is not completed which actually means with this line we're returning only active to-do's now here we must write one more check for our filter and here we want to check if our filter enum equals completed in this case we want to show only completed to-do's and this is exactly the same logic but without exclamation mark it is just to do is completed and if all these cases are not valid then here we want to just return our to-do's as it is without any filtering this is our default case and as you can see what we're getting back is our signal of to do interface array but now this is a visible to Do's it is computed based on these two signals to do's and filter so now here we can jump back inside HTML and instead of this code we can simply write visible to Do's with round brackets as you can see in browser it looks exactly the same like previously but now we used the filter logic inside which actually means it is a nice time to implement our footer because we have filter change there this is why here I want to jump inside out to those components here is our footer and HTML now let's write markup for our footer so here we will have quarter with class footer and inside we will have our filters this is by UL with class filters let's close our URL and create inside a Li and inside leave we want to create a graph which is a slash and here we want to create NG class yng class because we want to apply here a selected class when this particular item is selected this is right here we're applying selected class where this logic works and this is filter equals filter enum.o and now here I want to close our a and inside we're writing all now the question is what is filter and what is filter enum we must create them inside TS file and in order to do that we must inject our to-do service inside this component so here is inject to the service and we want to get a filter and in order to get a filter like a readable value we can write this dot to the service and here is our filter signal with round brackets as you can see now we are getting back a filter enum this is exactly what we need and additionally to that we want to read a filter enum inside our HTML this is why we must create it as a local property inside our footer component as you can see here we don't get any errors I can jump in browser and we see here our all filter which is activated because it is selected by default now let's create two more links this is where here I will copy paste this slick completely and we want to change our log magic so here we want to highlight the link only for active elements and now we are showing here active elements and here we have filter completed and the filter enum here is completed as you can see in browser all these filters are there and now we must create the logic to activate them this is why here for every single filter I want to create a click event and here will be a function change filter where inside we must provide bot batch engine as this is a graph we want to use prevent default this is why I will pass here an event but also filter enum.all and the same click we must attach for every single a so here filter enum will be active and for the last one it will be completed and now we must create this change filter function inside our footer component so here is change filter and we know that we're getting event which is an event and we're getting a filter name and this is our filter enum that will already prepared and inside function does not return anything but first of all we want to call event prevent default because this is a link and secondly we want to change the filter but we don't have such method inside our service we must create it this is why on the right I will open our service which is to do service and here on the top I want to create a function which is change filter and here we can get a filter name inside which will be our filter enum and it returns fast void but inside we just want to update our filter signal and in order to do that we can use this filter signal dot set and we're set in here our filter name and as you can see we used here not update like here but said and what set does it overrides completely the value of the signal this is exactly what we want now here inside our change filter we can directly call our service and this is this to the service dot change filter where inside we're providing our filter name which actually means with this single line by updating a filter inside our service and it will update all our components which are listening for this change of the filter but as you can see we're clicking on the active button and nothing happens why is that because essentially this line changed the signal inside our service but this line will be read our filter signal just did it once and we can easily check that I will paste the console log after our change filter so this is after change filter and here what I want to check is this to the service dot filter signal with round brackets this is how we are reading the value from the signal let's have a look I am clicking on the active and we're getting after change filter active which actually means we have a correct filter inside our signal but the value of the filter here is shown and it is run because we read it only once and it is not a signal anymore this is where here the correct way to do it is to right that this is a filter signal and here remove round brackets in this case here it is still a signal from our service and now we must jump back inside our HTML and denote places instead of filter where write and filter signal with round brackets and in this case it will work because it listens to the signal and not just from the value that we set once let's have a look now I am clicking on the active and as you can see it updated correctly because the problem was not in our service but in our component which was not listening for the changes of our signal as you can see our filters are there but we're missing on the left the count of our to-do's that we have this is where here what I want to do inside our footer I want to create one more computed property and here we can name it active count which will show how many active to-do's we have and we can assign here computed and we want to provide inside a function and use it to do single signal to get the amount effective elements this is by here we can return this to the service and here we have our to-do signals with round brackets so we're getting here a list of our to-do's and we want to filter them and get only active so to do must be not completed and at the end we must use lens because we want to know the total amount of our active items so here now we can jump inside our HTML and before our filters we want to create a span with class to do count and now inside this pen we can create strong element and render inside a value active count with round brackets because this is a signal as you can see we don't have any errors and here we are getting 0 on the screen now when we're adding several to-do's you can see that our count is three now which actually means our computed property is working correctly the only thing that we're missing here on the footer is an additional class but we must apply this class hidden so we should not show footer if we don't have any items which actually means here we want to create one more computed property so here let's create a no to-do's class which is either true or false and we're using here computed and here we want to return a function where we're checking this to the service and here is our to-do signal and we want to check that its length is zero in this case we are getting no to those class and now here inside our HTML we can add it to hide the whole footer so we need here NG class and we want to apply here a class which is called hidden and here we're calling now to this class signal as you can see no errors here now when we're reloading the page we don't see our footer at all because it is hidden and the last thing that we are missing inside our footer is the text regarding how many items we have here we have a counter but no text and text we also must prepare as a computed so here we can create items left text and here we're using our computed property and inside we have a function where we're returning a string and here we're writing item and then a variable and here I want to use ternary operator to check if we need plural form or not and by checking here if our active count does not equal 1 which means it is bigger then by returning here s another case we're returning here an empty string then we have here a space and board left so essentially here inside we will have a string either items or item left let's apply it inside our HTML so here after our active count we just need to render property items left text with round brackets and as you can see in browser now when we will create our to-do we're getting one item left if we have more than one item then we're getting two items left which actually means we successfully implemented our footer the next thing that I want want to implement is a single to do by now we simply rendered inside our main html text inside visible to those this is not enough because we want to implement editing and removing and the whole to do and it makes a lot of sense to create an additional component for it this is why here I want to create a new folder which is called to do and inside we need two things first of all our component is and secondly component HTML now here inside our main HTML instead of to do text we want to call a component app to those to do and we simply close it here and actually we can move this in G4 on this component because we don't need this additional div additionally to that we want to provide Insider to do that we are getting When We're looping through now here we can directly remove this text and this diff we don't need it anymore so let's implement this to-do component I want to jump back inside out to do component TS and here I want to register our component where we have our selector which will be app to Do's to do and here we also need to provide a template URL that we just created also obviously we want Standalone true and here we want to export our class which will be out to do component now here we already know that inside we are python air to do this is where here we can create an input and we can say that it is required this is my required true and here we're saying to do with exclamation mark it means that typescript won't tell us that this input is not provided because we are sure with required that we always provided and we must say that this is a to-do interface which we will use inside now let's write the markup and inside our HTML first of all we have here early and then inside we have a div with class view let's close this div and inside we will have a label with our text of the to do and it will be in our case to do dot text as you can see we're getting an error that app to those to do is not a known element and it happens because we must register inside our main TS inside our Imports to do component that we just created now we don't have any errors let's jump in browser here I am adding a to-do and now as you can see it is rendered much nicer because it is isolated inside a component and we added here some classes the next thing that we need to implement is editing of this specific to do and in order to do that we must or somewhere and edit an ID because we only can change a single to do this is by here I want inside main component store a variable with the editing ID so here on the top for example we can create editing ID and the design the string or now and by default it must be now which actually means we're storing inside editing ID the ID of the to do when we edit it and additionally to that we must create here a function set editing ID because we want to call it from our HTML so here inside we're getting editing ID and it is obviously a string on now why now because it might happen that we want to close the editing form without submitting and then we need to provide an online site this is why here we must return void and we simply want to update our property editing ID with the editing ID that we got now we can jump directly inside our HTML and provide inside every single to do and editing ID but we can do better we can directly provide here is additive and then every single element knows if we are editing this component or not this is why here I am just comparing a Disney ID this is our property inside this wish to do ID inside the loop in this case here we're provided inside the value is editing and not just editing ID additionally to that we must call here set at 1980 because we want to call it from the inside this is why here said editing ID that we just created and we will pass it from to the component itself so let's go back to our to-do component and here we know that we're getting one more input and it is required this is where required true and we know that we have is editing also with exclamation mark and it is a Boolean now we can use this property inside our HTML here on the LI we must create here in G-Class and we want to set here editing class and actually if our property is editing is true then we want to set this class and obviously we must wrap it in double quotes so here we rendered our view it is always there but additionally to that in the editing mode Ubuntu render a specific block this is where here I will write NG container and let's close our NG container and inside I will write NG if is editing which actually means this block is there only when we are in the editing State and what we want here is an input and we need here an input with class added were provided inside the value and what is our value this is our editing text and we don't have it yet also here we need a key up event just like we did previously and here we will have change text function for example also with event and also the submit here is key up with DOT enter and it will be our change to do for example which actually means here we are binding a value we will create it in a second we also have a cap event and submitting to change the to do now here on the right let's open our to-do component and here what we want to do is create editing text and we can say that this is a string and by default it is an empty string because at this moment we didn't receive our inputs yet this is why here we must write implements on init and we must write the logic to set our inputs inside our engine it so here inside the engine unit we can write this editing text equals this dot to do dot text in this case here we're updating our editing text and now we can change it inside our input without modifying the to-do itself now here we must also create change text which must update this property so we're getting here an event which is of type event and again we want to get our value in order to get a valuable reading event dot Target as HTML input element and we know that we have a property value on it and after this we can simply assign this value property to our editing text so this was our change text and also we must create change to do which will update it and actually this is the submitting of our input and we want two things first of all we want to close our editing State we can do that with the output just to remind you inside our main inside HTML we have set editing ID this is exactly what we need here now we need to register here our output and we have here set editing ID function and we know that this is an eventimeter with either string or now and here we're calling you event emitter with round brackets and now here what it does this is just an output so we can tell main what we want to do with Edison ID and in this case here inside our change to do we want to call set editing ID with Emit and provide inside now which actually means we simply close it let's check if it's working we have here an error cannot bind to NG class again it happens because here we must import common module as you can see we don't have errors let's check in browser here I can add an input but we can't really jump inside editing mode we must Implement a double click on this value and then our editing mode will be activated this is why here let's open an HTML of 2 do and here we have our label what we want to do on our label we want a double click event and we need to call something like set to do in edit mode Let's jump back to our TS file and create this function and what this function does it simply emits the ID through said editing ID so we're calling here Emit and we're providing Insight at this to do dot ID which actually means we're saying okay inside main we must store now the ID of this to do as editing ID as you can see we don't have errors let's add here add to do and double click on it and as you can see voila we're getting here an input how it happened we made a double click we set this property inside main now main gave us is editing property as true for this specific to do and we rendered this input and inside we got the value which is there through our editing text now here we can change it and hit enter and this value will be submitted this is why we are not in editing mode anymore which actually means everything worked but we didn't update this property at all inside our service inside array of signals and in order to do that we must create a new method inside out to do service so when it has something like change to do and we're getting here an 80. this is a to-do that we want to update and text which will be new for our to do here we're returning void and we must update this to do inside our signal so here will be this to the signal dot update and we're getting access to all our to-do's now here what we can do we can map through every single to do and we're getting access to the to-do and we can check the to-do ID must equal the ID that we provided and if yes that we want to update the hole to do with new text in other case we want just to return it to do which actually means we are looping through all our to-do and were updating just to do where ID is like we provided inside our function so now we can jump back inside our to-do component and here when we have change to do before we emit now we can call our service this is by here this dot to do service and as you can see we didn't inject it here this is right here on the top I want to get to the service by injecting our to-do's service and now here on the bottom we can call this to those service Dot and we are getting change to do inside we must provide our this to do ID and the new text and this text is inside this dot editing text let's check if it's working we don't have errors let's jump in browser and create a to-do now I will double click on it and update it with 111 I'm hitting end and as you can see it was modified because we updated it inside the service our next step is to implement removing of our to-do and in order to do that we must jump inside the HTML of our to-do and after our label we have a button so here will be button with class destroy and here we must apply a click event with for example remove to do and now let's just close this button and just like previously we don't have this method inside service yet this is by here let's first create an empty remove to do method inside out to do component and now we must jump back inside our to-do service to implement deleting of the to do inside our signal so let's call it remove to do and we know in order to remove the to-do we must know an ID and it is a string now here we are returning void and again we will use update this is by this to do signal dot update we're getting access to the to-do's that we have here and we just want to filter them so we're calling filter we're getting access to every single to do and we're comparing to do ID and it should not equal the AED that we provided which actually means we're storing all to Do's except of one with this specific ID now we can jump back inside our component and just call this function this is by this to the service remove to do and we must provide an ID of the to-do inside it is this to do dot ID let's check if it's working no errors here let's jump in browser and type something for hour to do and now here on the right we have on Hover this cross I can click on this cross and as you can see directly our to-do was removed as you can see inside finished project we have on the left also the check mark and when we're clicking on here our to-do is completed we also must implement this logic so in order to do that I want to jump inside out to do component HTML and here before our label we can create an input with class toggle and here the type will be checkbox and here we have two things first of all we must browse right checked inside and it will be to do is completed as we have access to the whole to do we can directly set it on initialized and after this we also must create here A Change event and we can name it for example toggle to do let's close this input and the only thing that we're missing is toggle to the function and again the struggle to the function must be implemented first inside our service because we're modifying a to-do inside the signal and actually in order to implement that we can copy completely change to do because we will do exactly the same stuff we simply need to modify a value inside our to-do so here I want to name the function toggle to do and we are providing just ID string inside because we know we simply want to toggle our is completed here we are looping through all our to-do's with the map and we're checking the to-do for this ID and if it is this ID what we want to do we want to assign is completed as not is completed and it will toggle this property but actually it is to do dot is completed which actually means we are mapping through all our to-do's we're checking every single to do for this ID that we provided and if it is this to do then we are overwriting is completed by toggling it in other case we simply return the same to do now we can jump back inside our to-do component and here we can create a function toggle to do where we don't get anything now here we're returning void and we can simply call inside to the service Dot and here we have our toggle to do where inside we must provide an ID of our to-do let's check if it's working now errors here let's jump to browser and add a to-do as you can see on the left we have now a Toggler and we can click on it and as you can see when I clicked now it is green and we're getting on the footer the zero items left which means it is all completely correct and it was modified inside our signal the main problem is that our item is not crossed out it happens because we must apply one more class on our Li and it is a class completed so by applying it only whenever to do is completed in this case it should work just fine let's check this out we're typing you to do I'm clicking here to complete the to do and now it is crossed out but we have one more problem when we're double clicking on the item we can't directly type something we really need to focus on the field and this is not a cool Behavior we can easily change that if we are getting access to this specific input so we can write here hash text input and we can just read this view child inside our component so let's jump inside our TS file and here on the top we can get access to this view child where inside we're providing text input that we just attached and this is a text input by default it is undefined and by getting access to our element reference now here what we want to do want to listen for engine changes this is where here on changes and here we must create NG on changes and we want to check if our changes and property is editing dot current value which means its editing is true then we want to make a focus and we must wrap it with set timeout to wait for the rendered element and this is just a set timeout with zero so no delay here and we're calling this text input we know that it might be undefined this is question mark dot native element dot Focus which actually means every single time when batch engine is editing to true we're coming here and we're focusing on this native element with plain JavaScript let's check if it's working so here we are creating you to do I am activating editing and as you can see I can type directly because we were focused on this specific input and the last feature that we are missing is toggle all as you can see here inside headline on the top we have this icon and then by clicking on it we're toggling all elements that we have and essentially this icon is not inside header it is positioned absolute from the main this is why we must jump back inside our main and here we must create it so inside our section before UL we're creating an input with a d toggle all and also a class toggle all and type is checkbox and also again we're providing inside checked where we must calculate it this is why here I want to create something like ease all to do selected and again with round brackets because it must be a signal and also we must create here A Change event when we're clicking on it and let's name it toggle all to do's and inside we're providing an event and after our input we want to create a label with text 4 and here will be toggle all as our ad element because essentially our input won't be visible we will see just label and bubble click on the label and inside I will write Mark all as completed so now we must create this computed property and this change event let's jump inside our TS file and create first of all computed property so we want here is all to the selected computed property by using here a computed function and we're providing a function inside so we want to check here this to do service and we want to access all our to-do so to do signal with round brackets and we're calling here every because we want to know that every single to do here is completed so to do is completed which actually means this signal will return first a Boolean and it will be true when all our to-do's are completed and additionally here we must create a function toggle all to Do's where we're getting inside an event of type event back we're getting our void and inside we just want to read a Target this is way here to redetage it boom must convert event search it as HTML input element now here we must call a service method toggle all and we didn't implement it yet this is where let's jump back to our to-do service and here on the bottom we can implement the function toggle all and inside we're providing is completed which is either true or false which means it is Boolean back by returning void and what we want to do is simply update every single element which means we can simply copy paste this update with map this is totally fine and we want to update every single to do here with inverted is completed so we don't need this check we simply return a merge to do with this completed property whereby assigning this is completed which actually means we're simply updating every single element inside our array now let's jump back inside our main component yes and call here the service it will be this dot to the service Dot and here we have a functional toggle all where inside we must provide is completed and what is is completed in our case it is started dot checked because this is a checkbox let's check if it's working but don't have any errors let's jump here as you can see we already have this icon I can type something here to add several to those and I want to click on it and as you can see all I have to do is were toggled directly now we're clicking again and they are all active again the only thing that we're missing is no to those class just like we had inside our footer this is where here we can jump inside footer and simply copy paste it I want to take this now to those class and create it here inside Main and essentially as you can see this is the same code in two different components we could move it to our service so now I want to jump inside our main component HTML and here we have class main but we also want NG class here to apply one more class and it will be hidden where we will call no to those class with round brackets which actually means we're hiding our main part if we don't have any to-do's let's check this out we don't see anything except of the input we are typing something and now we see our main part we can click here and toggle one to do and now by clicking on completed filter and as you can see it highlights only completed items Now by clicking on the active and we see just active items which actually means we successfully implemented this to-do list with signals and if you are interested to know how to implement exactly the same to-do list without signals but with the vix.js and plain angular make sure to check this video also

Channel: Monsterlessons Academy

Views: 11,403

Keywords: angular signals example

Id: wq4ZlpEg5jw

Length: 50min 49sec (3049 seconds)

Published: Tue Jul 18 2023