Angular signals

foreign foreign foreign I'm getting tired we could have breakfast welcome everybody welcome to this Sunday afternoon um really excited for the stream today I want to take a look at signals so it's my first time trying something with signals um so let's see so to do so we will go to a location uh private location and then we will run a command to get like the latest angular version um and the command we will run is basically npx at angular slash CLI at next because it's merged in the next Branch I think um new let's call it signals playground yeah let's go with sigmund's playground I usually like to choose funnier names let's just go with signalo let's call it signalo that's good okay we are we want to install that that looks good let's see oh angular routing yeah let's add it let's add it ALS outside recently switched the theme of my um of my terminal I'm now using the point Menders theme instead of dark color so let me already prepare the ID this is coming documents code signal right so I guess like so this is my first time using signals so I would say we start with the basic stuff right so usually people do like this counter component in almost all the examples so they go like add component I think it's not yet indexed yet it is yeah let's forget about the template for the moment is right so we have the counter component um this will be a standalone component right nah not sort properties just imported right so we have our counter component um let's just call it H1 counter but please keep why are you removing the the second tactics app component right and then inside here which is to like counter and then we go like uh [Music] okay we compiled successfully uh we probably have to close all the other tabs here right yeah so our counter is working right and now when we want to get started with signals what people usually do is like they usually create something like this so inside your component let's just go with we would have a private account which is now equal to eight signal right and we give it the value of zero right now there are various options so we we created our surface signal and the way you can think of the signal is I'm not sure if this is the right analogy but it's almost like a behavior subject right more or less and what we can now do we have a bunch of methods on this so we can have a Setter we can have a getter so let's just go and use the orange on init lifecycle hook to just do some stuff foreign yeah implement the interface but please do it below all right and now inside here we can do some things so what we can do is we can create a const double count right and this is basically there is like one method which is called computed compute and this compute I think it's computed right yeah computed so we import computed and signal from angular core and then whenever we have computed this double count will be basically um up update as well right so maybe we do a click Handler maybe that's better so let's just do like a button yeah where we say like update count right let's just call it like this this dot count dot set we just call it um not update we just call it increment right so we go like this increment count and here we also show like an H1 current count and count since it's a signal we have to call it we should not make it private right so also double count we will not have it in a on in a lifecycle hook let's remove that something like this right and then we do on H2 double count and here we do double count right then we optimize the import we go ahead and we run it and we have a uptake count and you see how everything already works right how this is basically called because we use the computed on the signal right so basically whenever our account changes the computer is re-executed and double count will be assigned so that's pretty cool so we already saw the signal how we can create it we saw the computed method which basically just recompute something that is inside here and then we saw the setter right but there's also effect um and I'll quickly have to check how the effect is meant to be used because what you can do is basically use the effect to just update um or just run something whenever the count changes right so I think what we can do I'm not sure how this works on a class level but I think we can do like effect [Music] and here you can pass in a callback count change to can I do it like no so at the import statement okay let's see what this does let's see if this locks something or not because we go up to account yeah you see how it looks count change to eight seven six right so basically we can have um some functions that gets called so we could also have probably we could also have a log function you say something like this I I would say that this also works right yeah you see how everything now reacts so that's pretty cool that's pretty neat right it's pretty simple and thoughts and react um so first of all welcome grizzly in 44 um actually not that much I haven't done so many things with react to be honest I've tried many Frameworks but react not so much it's still on my to-do list for one of my streams to do like a to-do app or something with react but I think it's kinda I mean yeah I haven't used it that much I cannot say that much but I I think it's kind of cool from what I've seen I like it from what I've seen but yeah I've never used it in a real world project so I think for me or why I from my point of view why I prefer angular overreact is because I think angular gives me like more opinionated architecture and I think it suits better for the clients that I consult because um angular has like this advantage that it's more than just like a framework it's more like a platform so if you go to a new project and you want to perform HTTP requests you already know how they are done they are using the HTTP client you want to you you want to do something like environment variables or you come to a project and you know how it's structured you know how to do lazy loading you know how the router works it's all kind of the same and it makes much more sense for companies at least from the companies that I consultant I work with so but yeah I think react is cool so we have this um basically we have already seen like a Setter we have seen effect we have seen computed we have seen the signal all right what I still want to try is basically let's say this is like the simple counter but now let's make it let's refactor this and just call it call it simple counter component right then maybe we also call it simple counter and then probably in our app module okay it was all good so let's go here and just uncommented right and now we can generate a new component uh we say counter component.ts right I want to see how it behaves with not just Primitives like um yeah we basically want to do the same but this time slightly different the same but yeah the same but slightly different so just slightly different right inside what so inside our app module of course we added um foreign so we use this one and now the counter object component of course somehow it's a bit slow in reacting so what we want to do is we want to have a count right which again is a signal but this time it's basically a object with a value which is zero right then the same for the double count right okay we'll do it like the double count is not the not really a signal right it's just a value that we compute and then we have a increment count which is a method where we say discounted set which is basically setting the new value which is this dot count and here we have to call it right I think it's like this the syntax so we call the signal we get the value back which is an object and then we take value and set it plus one so we basically set it to a new object right and then the double count is basically actually it's a computed all right it's like this and we could also have an effect let's do the effect as well um foreign so this has to be something like this right we cannot have it like this I think no of course not but we could do this inside maybe this is better than doing it like this if we have like an on in it or something and then we add oh God [Music] so we add the engine in it life cycle hook right and we add that here and then inside here we basically do it like this so something like this right now let's see how our counter object of course inside our counter objective here so we can say count dot value right [Applause] and then double count is just directly the value because we return like the value another object did we also call the double count yeah okay we have to call this here right so it's still behaving the exact same right but there is also a DOT mutate method right which basically allows you to not reset it but to just say like this dot count dot mutate yeah something like this isn't it that mutate is it that up is it an update let me quickly check I'm not familiar yet with the syntax I think there's also that update or mutate thing about budget yeah there's update ah okay so this one we don't call actually [Music] what is tissue uh we have to return something like this right and then everything still works so with that update the difference is like here we don't get access to the current state without update we get access to the current state right so that's kind of cool um so that's kind of the difference here so now the basically here we set it to a new array and here we update it yeah so that looks good now I'm curious I don't know which one you prefer the update or the turn state let's go with the let's go with this one so everything works right and now I'm curious if I go here and then let me quickly check there was a way to disable um zone right I think it was somewhere on the module you could say like exactly I think it was this but this is the question right disable engine Zone yeah so that would basically be in our main TS app module and then we pass in something like this and his own Loop right and everything is broken and probably I don't know if this is yet implemented but in the future this should then actually work I think so that's one of the main arguments for it to not have like Zone to have some of this application I don't know if this yet is yet I don't think this is yet implemented or it doesn't look like let me also see if our simple counter doesn't work no so stuff still gets fired but um nothing happens right so I guess this is not yet so far it's just a example to play around with so far right but I I this should be like one of the points that should work in the future okay so I guess we could also now have like some other scenarios so what we could also have is probably a service we could use a service that has a signal and could use that service to communicate so imagine we would have like one form so let's create a new directory let's call it user and then we would have like a new file a user form dot component dot TS let's call it user minus form and that one is just a component all right selector [Applause] yeah come on copilot you can do it yeah let's go with name um first name right first name we go with this import and we add a closing div so this would be like first name name first name we don't need right we go like this name name um and then we close our form because we have two divs right that's what I don't like about Inlet templates somehow the ID support is not so good foreign today I'm having a bit of issues with typing my fingers are still very very cold because I just came from the outside today is freezingly cold um yeah let's go to app module let's import that one right so good so we have our user form component which probably isn't the nicest yet so let's do like we have a div and we just call it um user form right so this will probably not look the nicest yeah it's like this but we don't want to go too much into styling here so let's then say we have a new file which is called a user listed component.ts right that's a component it's a selector user list a template right uh that will be just like skull like users and then we have a div right and this would be basically user card so again this is Standalone true with the list component all right so we added here and then we go to our app compound HTML and we drop that in here user list right so we have something like this we have users on top we have some user lists like next to each other um yeah it doesn't look the best let's let's add some small some small um styling right let's just do some small stuff um Flex Direction column Center now let's do like with let's do like sixty percent right then we go like marching right Auto at the same for left right so it's not it's not the best but still like oh my God I don't want to do type too much into styling here but let's quickly because it's not much effort and it's much more pleasant to look at right okay so we go like form um and we say display Flex right Flex direction is column and then we say we have a gap of 20 pixels or something and then we save for each one this would be like a form field probably all right foreign field will also be displayed Flex right Flex direction would be column uh we go with um let's start without um quotes right and then we do a gap of the F5 pixels so yeah it looks smaller or less right more or less occasion it looks okay-ish and then of course what we still need it's probably a button which says like submit right and on the click we do like a submit and then we still have to build out the form here so we're going to our Constructor we take access to the form Builder right you know where I'm going with this so let's call this user form and then what we we have name and first name right and the first name we say both are required so we import the validator right and then inside here we basically say this Dot if it's valid and we do something or like yeah I don't want to focus now on the error handling actually so let's just say if it's valid then we do we basically do something right we basically say we have a valid form right um so let's let's test this so we click something nothing happens right we do this and then you should probably add because otherwise it tries to make a request and now on submit actually something should happen did we call submit on click so this isn't valid right this still isn't valid because it makes sense all right because we didn't use anything at all so so this would be a form group now we want to import directive forms module do I have to do it myself seems like I have to be Imports form Builder can I I think reactive forms module should be enough right probably it's more form control name is name right now we should have it so nothing and now we get name first name right now what we want to do is we want of course we want to have a user service TS right which is an inject able so that's our user service and on here we have like a user right we can also export interface which is called user and this has like a name which is string and the first name which is string right probably should also inside our form then just use the uppercase so use it like this first name and then here as well something like this and then user would be a signal right and the signal is probably a list right it's like an empty list and now what we want to do is we have a method public add user so here you could then do like a backend request listed user and now we cannot use we could use set but I think here it's much easier to use um update because we just say probably we should also call it users right yeah maybe we go with state that push user and then we have to return the state I think all right so whenever you do this yeah so is the signal generic I I think so right something like this so we would have add user and then probably now now I'm curious like probably it's the same pattern like we don't want to give the signal away because we don't want that everybody can just update and drive to the signal right so what we want to have is probably another public method get users right it will return a user array something like this right so that's our user service and now of course inside our user list but first let's first with the first add the component so here we get additional access user service user service right okay so we have our user service and here we say this that user service dot add user user which basically is right I don't know if I have to construct the user myself here or if I have to Typecast it I have to do it like this but let me do it like this name first name so we get them and then we go like so what is this shoe the toes yeah the problem is can I say this is 100 guaranteed to be there because he thinks I mean I can do it like this or let's just do it like something like this so you manually cast it right because we we are guaranteed if the form is valid as long as we have the validators on there the form is valid and we are good good so we can edit and now on the user list we come and we say private user service it's the question if you even do let's say now we have the signal right and now I'm not sure if this will update let's see so we go like ng4 maybe we add some Styles here oh my yeah so we say this has the class of it's called user and it basically has like display Flex yeah it has a padding of 10 pixel it has border sounds good now we don't maybe what we want is like box box chef yeah but you have GitHub copper take what you did why why somehow I just want to auto complete what he has right but this somehow doesn't work so do I have to I think it interferes with the ID right now so and we want to have like some border somehow it's a bit annoying with copilot to be honest like it's not his suggest suggestions but it's the way it's proposed here so then um we have to have Imports I think potentially four off I actually need all right let user of users something like this right so this looks pretty nice right so we have successfully had a signal okay that's super that makes it so much simpler right that makes stuff so much simpler than than um Behavior subjects I think I think it's pretty cool actually okay um what I also wanted to check so we had like this user list but we also had let me quickly go back to the counter for once second because now let's do it like this then do it like this and then finally like this so we again have our control checked right and we have the update count and the way we did that is by using the update but there's also a mutate power and you and to mutate basically allows us to actually I think that would be sorry for the for the back and forth this is not really like brainstormed out what I want to do it's just freestyle so um what I'm thinking is here we could probably also do on the user service instead of update think what we can also do is we can also say this that use theirs dot mutate and then we don't have to return anything right we are just mutating the state which is much cleaner [Music] and that still works so I think that's probably I prefer this because we are just mutating the state and we are not um requiring on the current state which is now okay we want to mutate it we just want to push something into it I think that makes much more sense so that's pretty nice um what else did I wanted to try out um so we can use it together with directives and we can use it in services so that all makes perfect sense um let me quickly check something so the music was gone there for a second okay good um what you can also do is we can try something a bit more advanced I think we covered the basics of signals also if you guys are like I'm curious about signals I definitely recommend you to check out thank you the demo done by Sarah Dresner this is such an epic demo right so it's a small demo that explains like the basics that we just covered I think it's so cool what you did here I think this is really really awesome um yeah but she also states that basically this is so the angular team started to do this and I think this is a pretty cool approach they just merged something that they think like it's already kind of working their merchant for the next Branch so that people can already play around and they also open in parallel arfc so we can go to the RFC and discuss basically our findings what we would wish for um here is a link to the RFC I think that's a pretty cool approach I like this approach very much instead of just coming up with like a final version that is really is fully fought through I think it's pretty cool to just kind of prototype it gets something out get it to the hands of the developer collect feedback I think that's a I really like this approach so that's the RFC right and then what I want to try is um I want to try so ciao I don't know if you guys know ciao if not I strongly recommend you I recommend everybody to go and give him a follow he's doing um angular 3.js but he's doing in general like he's a pretty outstanding engineer and doing like great work no that's the wrong one so child run right and yeah just give him a follow because he's doing like so much cool things um now also what I want to try because he has made like a cool Repository with signals I don't know I think it wasn't this one I think it's it is where is it I think it's this one yeah so this is the repository and then he basically copied over something that is probably coming to angular like this from signal so angular will also have methods to that allow you allow you allow you all to um basically what allows us to take a signal and convert it into an observable or vice versa taken observable and convert it into a signal right and so basically this is not yet merged this is still on the way but Xiao already took it over I think this is even taken from the pr I think he also left some comments there yeah but basically this gives us the method from observable so we can convert a observable into a signal with this code right so let's go ahead and just copy that and add like do this under Maybe I liked his name so again I think that's the perfect name for the folder I think that's pretty cool from observable Latias Also let's when we are on it let's give this repository a star right good so um we have from observable right so what about having like a small to-do list so let's go to our app component let's just take that uncomment that and add a new directory to Do's right and inside here we add I think there is this free Json API Json how's it called Json place holder API or something prefect yeah this one try it yeah so or let's call let's say we have some posts whatever some posts yeah so we will call this endpoint right so let's not call it to Do's Let's uh refactor any name of two posts and of course what we will have is a new file let's say posts Dot service.ts posts without the tea at the end [Music] again an injectable right provided in root sport class Post Service let's call it backend URL foreign so we have the h-man client we get public get post right and here we can already return a signal actually so what we can do here is so we basically call from observable so this is now a signal right that's pretty cool so we get post pass back um probably we can even get here like directly we can call this and get a list of posts right so this would be an array if you type it something like this right I don't know if this is probably mapped maybe here we have to do like a generic if it's generic yeah something like this okay I don't I don't want to type this because I don't have the model for post but you get the idea right so we get this back and then probably inside our app module we have to import the http client module right and then we go and we say like new file posts Dot component.ts and now backticks tactics foreign post component at module post component we go back we have a let's just render it as a Json right let's just go like pre uh hi Kevin yeah hi ciao how are you doing ciao your your stream yesterday inspired me to go fully win I haven't done it yet I will probably do one more stream where I think like going fully with him right but look what I did yesterday in the evening I did my setup with nvim okay maybe I'm In The Raw no so I have now installed this nvim three I think it's called like this right but I cannot yet I'm not yet convinced of going fully with him yeah yeah I could do that but I'm not yet sure how it is with refactoring tools also if I want to create a file like I don't know how to do it to be honest unless I open a terminal and create a file so those kind of things are still not clear [Applause] so for everybody um I was previously talking about ciao because we were taking his Repository that's not TC on Twitch also follow him here so give him a um go and follow him because he's doing pretty cool things so so the chasing pipe and now the post is we can get access to our to the post service right and then we say post is that this posters get posts let's see if that is working probably we should display the post component right that would make sense [Music] and now signal read before the Observer will emitted okay so we are basically trying to get posts right I'm not sure if this is the correct way to call it maybe we have to do it like this yeah but still is this the same error yeah still we get signal red before the observable emitted I don't know if we have to do um that's one thing I miss yeah yeah okay yeah I have never done it because you use it quite oftenly in like a bigger project I've never done it in a pretty good project just for like single file editing but yeah also git tools I will for sure miss like the git tools um but I want to do a stream where I create a small application just using Vim but let's see um so I'm not sure if we then basically when we do this and it do HTTP calls and it's from observable do we have to basically I'm not sure if we have to start with something so that we don't get this error I am not I'm actually not sure maybe maybe ciao maybe you have an idea if this is the way to go when you do HTTP requests so you need a default value yeah okay so therefore basically the start wave right so yeah aha okay second argument of from observable so basically not we don't pipe here so we go like this okay that's cool I like it so yeah We have basically yeah so from yeah cool um Yeah so basically the signals so we have used a signal in a simple counter component we have seen how effect works we've seen how Setter Works how computed works we have converted thanks to the help of Chao and his repository we have copied this from observable over right which will probably be stable in the future so they are working on this and then we've used the HTTP client to basically convert a signal to an observable um I think there will also be the other way around right that you can convert signals um to observables so then I'm curious if you can also have signals as outputs probably you can then because or not so I'm thinking about the event emitter because now what you can do is if you have a subject right or observables you can also use that as event emitters and if you can convert signals to observables you should also be able to have I didn't copy the oh okay so you wrote it yourself okay cool I thought there was a comment somewhere that this was taken from a PR of angler or something and therefore I thought you copied it but then not okay okay so basically we could also provide the other way around signals to observables which would be something fun to do maybe for our next stream um but yeah so basically it's actually easier easier to use than I thought to be honest um yes there's something left to try I still wanted to see if I have let me quickly see if I have this computed value right so I have double count let me go up back again and just use the simple counter right um I want to see how many times because we call this right so I guess it's computed but this computer probably only gets called I'm a bit confused now with the because usually calling methods from a template is like an anti-pattern right because whenever your change detection runs this this gets called again but I guess with signals everything I I don't think that this should be a problem also ciao um I try to basically disable um Zone and this is not yet done right so this will be coming in the future but this is not yet possible so if you go like ends his own Loop then change detection doesn't work at all know right we go like this it's probably yeah it's broken so the change detection doesn't work so it's still using Zone because I I thought that this may already work but it doesn't seem to be the case okay let me also see so if I would have like some spam that gets like a number which one am I I'm in the wrong in the wrong component right so whenever we update the count this method gets called right so we see that we always get a new number right and I'm curious if I do something else like if I just do like click me and I don't really do anything on the click or I just lock something on the click right foreign number right because it's called in the template and I'm curious if our computation here is also called but I don't think so [Music] that's something but it doesn't get cold so that's all good right so we don't get double count cold we only get double count cold when really um when the signal changes so that's that's perfect good um we can remove that all right and I think we are actually already through so that's everything I wanted to try out for today's stream um yeah so let me quickly check so yeah I think that's everything so thanks everybody for joining for today and then yeah we will for sure see more of signals in the future it's pretty cool I like it is I also like how easy it is to use actually so this was the first time I used it and it was pretty straightforward and I hope it will soon also allow us to really um right soundless applications which doesn't seem to be the case yet but yeah really looking forward I think the future of angular is pretty cool pretty exciting stuff happening um they are doing pretty cool things so yeah excited excited for more right so thanks everybody for joining and hope to see you soon have a nice rest of the weekend bye foreign foreign foreign thank you

Channel: nivek

Views: 6,830

Keywords: twitch, Angular, Angular signals

Id: unA0GIPX6QU

Length: 69min 57sec (4197 seconds)

Published: Mon Feb 27 2023