Angular Signal Input - The Solution to Angular Inputs

in this video you will learn what is angular signal input and how to use it inside angular 17 so not so long ago inside version 17.1 we got a cool new feature which is called angular signal input as you can see here inser core it exposes the new input API for the signal based inputs let's have a look on the code here I prepared for us a pagination component this is just a standard component with some markup inside our template and here several inputs that we have it's a current page total and limit then inside in unit we are calculating Pages array and then we render this information on the screen what problems do inputs have inside angular first of all we typically have this problem when we don't provide a default value we're getting an error property current page has no initializer and is not definitely assigned in the Constructor it is is really a nasty error because you can only fix it by providing a default value this is exactly what we did here but sometimes you don't really want to provide the default value inside your component you really may want to say okay I really need inside to provide a current page total and limit this is why here you might want to remove a default value and in order to fix that inside angular we got required property and we can set it to true actually this will tell typescript to check this input and it will throw an error if we try and remove here a current page we're getting an error required input current page must be specified but still as you can see this error with no initializer is there and in order to fix that you might want to use an exclamation mark to tell typescript that this value is for sure there it is obviously not true but because of this required we're kind of on the safe side but obviously this is not the best possible code and now we're getting something better instead additionally to that we don't really have a good way to trigger some changes when our input changes yes if our input changes our template will be rendered angular does it for us but what can we do if we want to prepare some variable when something changes for example as you can see here I have Eng unit inside which we're using total and limit in order to calculate Pages we're doing this only on initialized so we're not expecting that these values are changed if they are then we must write here NG on changes and you know the drill you must get here your simple changes and then check what you are getting inside your changes and apply this logic Instead This is not really comfortable because this is not a declarative way so basically two most important problems that we had is this initializer problems and some changes callbacks inside our component and both these problems are brilliantly solved with signals you already know signals we're creating a signal we're rendering it ins a template and it works just fine but previously we could not use signals as our inputs we can do that now this is why here we can comment out all these inputs we don't need them and we can simply create here multiple local properties without need to create an input I'm sorry for Interruption but I just want to let you know that I have lots of advanced courses on different web Technologies where we create Trail ations and prepare for the interviews you can find the link in the description box below now let's jump back into the video so here I can say that we want to create a current page and it equals an input and as you can see we're getting an input from angular core and we can even say dot required and inside we're providing a data type in our case it is a number and we're calling it with round brackets so what it does this creates for us an input and this in input as you can see it's an input signal of number which means we're getting directly a signal inside our component and not just some local property additionally to that our input can be just an input which is optional by default or which do required it can be required which means it is also much better typed for the typescript now let's write exactly the same with other variable so we have here total which is an input and it must also be required and it is of type number and the last one here is our limit which is also an input it is required and it is of type number now we can remove these inputs we don't need them anymore most importantly this are just local properties they are not really separated like inputs but most importantly this a readable input signal we can't update it but now we must tune our component a little bit so this total must be called because this is a signal the same with this limit and now here inside our template we can also check current page and compare it with the page so as you can see changing inputs to Signal inputs is extremely easy but we can do even better as I already told you this logic inside init is not the best approach why is that first of all this logic will happen only on initialize but it won't happen when inputs are changed we can fix that now by creating a signal Pages what does it mean mean here inside Pages we can assign a computed signal which actually means here we have a function and this function must return some value now I want to copy this code inside our pages and I can remove Eng g in it we don't need that now instead of this Pages we can simply return here this range Pages count and that's it which actually means our pages is The Signal of number array this is exactly what we wanted but most importantly now it is declarative it is based on our inputs it will be directly changed every single time when our input changes and we don't need any code like ngon init or ngon changes at all now the only thing that we need to do is remove here implements on in it and update our pages to the signal so we need to add here round brackets as you can see the code with angular signal inputs is really clean and much easier to support and the validation is still there we're still getting required inputs current page limit must be specified and if you for some reason still don't know other features of angular 17 like for example control flow or defur make sure to check them in this video also

Channel: Monsterlessons Academy

Views: 1,817

Keywords: angular signal input

Id: fMA25gzJQPU

Length: 6min 51sec (411 seconds)

Published: Thu Feb 29 2024