Angular Anti-Patterns

when i looked at a variety of different companies where i've worked in um they usually i start spotting some anti-patterns in a code and you know the more you do them the more you see starts to collect sort of um you know a list of things that people do not optimal and then i have those lists i'm gonna share it with you today um the list is pretty long i'm gonna stick to like the most common ones and it really depends on you so i'd like to keep it a little bit more workshop-like and interactive where you can actually ask me questions and we can move to um more advanced topics as we go um just for you to know some of those topics um are sort of controversial it's because you don't see the gain or you don't see so think about it this way when you do the when you have a design pattern the design pattern is meant to help you code help you maintain your code and and you know allow it to scale your code base um an anti-pattern is opposite of that this is something that with scale will actually harm your code base so um actually it's also pretty funny because a lot of uh design patterns become anti patterns like singleton usually is one of those considered um so generally think about it when you look so it's really hard for me to show you excuse me greg yes sorry are you sharing a screen no actually i'm just talking for now and then i'm going to move oh okay okay no worries taking thing so sure so it's really hard to show anti-pattern how it actually harms you without having a big code base and usually in a session like this it's pretty small code base right so it's really important that you just trust me on this one and it's just an experience um okay let's just get into it let me show you some of these um entry patterns uh okay i have to do like this just a second all right now i'm sharing so let's get a code on screen so let's just let's just imagine um maybe let's close all these things okay so let's start with the first first things first so one of the very most and i think like the most important uh principle when you write an angular app is reactive programming so when you code something in angular and you have to learn things like rxjs it's it's pretty steep curve of learning process it's because it's quite hard to be honest rxjs is one of those things that actually sort of like it got me thinking a lot and it got me it took me time to actually understand it and the reason why it's so hard one of the reasons is because it's changed the paradigm of the programming it's leaning towards the functional programming not the object oriented so you have a pipe of operators and stuff like this but generally there is also one more thing called subscription so let's have a look let's uh let's build an component real quick so what i can do is to say nx generate library and then let's call it enterprise example cool so reactive programming is really important is because if you don't do it right it will actually harm your code base big time and you will not even know what happens because an idea is it creates it might create the memory leaks in application so memory leaks is a is a problem that your browser is having a resource um you know taken in the in the computational power and in the memory and then eventually it will actually you know start to adapt so the longer users use your app the longer it will become visible and then eventually your whole app will stop down or slow down or even even crash on your users so this is this is a big problem so you want to keep an eye on you um on your memory leaks obviously there are ways to do it in the browser just hope we can have a look but generally let me explain a situation called a reactive programming and imperative program so there are two paradigms and in angular it generally is considered imperative programming is considered not the optimal way you shouldn't code this way so let's just give it a component and let's call it reactive oh here we go [Music] so i've created a reactive component so here we are so obviously i always want to get some data right output so this is my component super basic stuff um ideally i would have something from the from a service or something like that so i you know i could show it here um but let's just let's just use a service example it's always good practice to extract your business logic and you're like fetching the logic out of your components keep your components small in general but then i'm gonna have like uh data service that doesn't matter what it is so in order to get it done of course i have to have that injectable setup data service and here i would have like you know uh client http client maybe graphql apollo or whatever it doesn't really matter what i can do is to create a a public uh actually i can create a getter so let's say i say get all data and then as every service i should return an observable and then i'm going to return an observable string array it's not really important here and then in here i'm going to use the op operator just to return an observable and then i'm just going to return electric strings cool so now i need to plug it in in my component so i import my data service and then let's just have a look at what we could be doing so one way to go about it is the imperative way you can spot it so when i look at the code and i do a lot of code reviews i look at it and i say um i can already spot it i don't know what's exactly wrong and there could be a longer discussion about why this is it but i can definitely spot a pattern and say hey this is this is not optimal so let's say i want to have a vowels b for vowels and then it's going to be observable of string array as well but obviously i want to only have things like abc and and stuff so in this case i have only one vowel let's just not you know go too much into detail but how reactive programming looks like so oh sorry it wouldn't be a observable it would be already a sorry like that cool so how can i already spot it's not gonna be a reactive programming well first of all normal reactive programming would start with something assigned to it that's a big difference in this case i don't do it i go directly to the service i get all the data then obviously it's observable so i need to subscribe to it and here i get the data and then inside of my subscribe i would set my variable this v equals and then i want to filter data or maybe we can call it a so only a i want to filter only a data filter and then char you see this is imperfect programming why because you interactively say what's happening and it's pretty sequential so first you do the call and then you subscribe and then you sign things and then when you go to your template and you want to output it now let's just keep it as a list for example this is the ng4 thread like a light car of a this is yeah so let's have a look how it's actually done uh oh yeah and i have to i have to make sure it's supported and then inside the apps i want to just output it so i want to make sure my um reactive sorry anti-pattern module example is included and then all i have to do is put it uh here call obviously you know what's gonna happen you should output the ace but there will be some interesting twist to it let me show it to you so here we go we got the a right everything's so good and you see it's it is an empty pattern and then you can come to me say hey but it works right so what's what's the problem well the problem is that describing that's very important because if that module if that component hangs in for too long and it make those calls too many times it starts licking the memory another thing is it might stop working obviously it depends on the size of the data you have but as soon as you use change detection on push strategy which is a recommended way obviously this is a very basic example and it should work but if you start adding some more complicated structures not only strings the change detection can actually fail it can actually look and say hey i don't think anything changed but yes it did change so when you start doing like you know i click that and hide it and show it this will uh will cause an error because you know it's not an observable it you don't subscribe to it your template doesn't know about what has changed so you shouldn't do it let me actually see because i always wondered where is the where is the moment when things will stop actually blowing but trust me when you start adding more complex data structures and you know it's not as simple as this is suddenly you will realize things don't work and then you will scratch your head and think what is the thing then what you do you go to the stock overflow and you start googling this thing and the first thing you see people tell you to do the change detector and detect the reference that's a bad thing actually you shouldn't do it because what you do here you show me you don't understand how the detection change mechanism so it's either of two two ways either you're really really good and you know what you're doing because you want to maybe run things outside zone or maybe you have a zoneless application and you really know what you're doing or you don't know what you're doing and that's usually the case when i see the code like this then i say okay you don't know what you're doing because what's happening here very often obviously it's more complex than that you will actually start forcing clean detection on this and it's it leads to a lot of other troubles so that's that's really not recommended um again you have to trust me on this i've been done that got the t-shirt cool so that that's one so what should you do in this case well we have a rule for example that if i'm in a smart component and i am in a smart component because i don't have any inputs and i don't have any i have a service injected that means it's a smart component and i don't have any content projection because it's it's a smart component then um we always use observable so the good way to go about it would be to have observable here and obviously you want to use the finished notation and now this doesn't make any sense because you can't just assign things like this because it's reactive it's not imperative but don't worry it's actually very simple all you have to do is to do like this that will be observable first obviously there is a subscribe part you don't want to have you want to get rid of this because you want to make sure things get you know subscribed and unsubscribed for you in the template so you should use a sync pipe for this and here in order to do the filter what you can do is to use pipeable operator click on this map and copy that code boom that's all you have to do it's really literally a couple of lines of code but it makes a big difference there's also a lot of things with rxjs and it's very popular in rx java the idea is also that every of this pipeline operator will wait until you actually get the like the resources in your browser to process it so it's also pretty pretty cool um so all we have to do now obviously this is observable as i already said use a sink pipe you don't have to worry about unsubscribing that's really it let's have a look the result is the same but it's a lot different code so i hope that's clear do you guys have any questions for this so far so good anyone has a question cool you can always ask questions at the end okay awesome let's move to the next one so once i figured out um you know how to do the service the next thing is um this is a smart component right but there is another anti-pattern which is also it's also very funny actually but it's really really a big deal which is a hybrid components so a hybrid component is so you look at this and you think oh this is great this is a smart component right it's super clean i have my data and stuff and then eventually someone will come in and do the input here and then you just say you know maybe you want to use it to to filter on the car right so you can have car here which is a string and then in here you want to say this you might want to do it because from the position of this component here maybe you want to pass on and information how you actually want to do it and you might be for example using b right so now i want to filter only for b's here we go i get the beat so you might think of it and say hey this is great you know hey i have my inputs i can configure things and then i can i have my you know components which data well it's not really great to be honest because configuration like this or passing things like this you sort of you break the rules about separation of concerns so there is a saying that you know you have smart components and presentation components these are two different things and you should keep it like this because right now i have a hybrid i have both i have a uh i have uh inputs which represents its presentational component and then i have services it's not really good because it's usually not flexible usually you just solve the problem at hand and then eventually someone will come in and say hey i want to change the rules change the logic and use it somewhere else and then you realize your component is not reusable so this component is not reusable so an idea is like this i'll give you an example let's say um i have my uh my service right data service and let's say i would create something exactly the same i'm just gonna uh out service something different i mean it's still gonna return a strength and it's still gonna return the data and stuff like this but maybe it's slightly different maybe it provides me with different data maybe it has a double piece or something like this uh and maybe the method is different get these okay now i tell you hey can you can you use this service uh oh yeah this is all service can you use this service for the same component i mean it's exactly the same just use another service and stuff like this and then you come here and you can't really look it's closed so you actually break solid principles as well because one of them is open closed which means it should be open for extension clause for modification right now it's pretty much close closed you can't do much about it so you what people do they go ahead and create another component which looks just like this because even though you might this you might in your module you might provide different data service but they have a different interface so you can't really do it without affecting affecting code here and then you have this you know great piece of template obviously it's a lot more advanced in real life than this and then you cannot reuse it so you start having problems with that so what you should do instead is to change that into different different components one will be smart component including that service and the other one will be the presentational components let me show you how it could be done so we need to create a new component presentation or only and let's call it let's call it a list cool oh i made it inside of this one forgive me okay and here i would like to have that logic with the input i will not have any constructor for now uh actually actually sorry not not the car i would like to get the items which is a string array and then in my template i would like to have this one but instead of this i want to have my items then let's call it item so just a list so now i have my presentational list someone and then i have my data related stuff here so what i can do is yeah what i can do is to have one component the a i don't want to use this one i want to use my list believe with this one and then i need to provide the items and items on my a async part so that's pretty cool because now if i want to create another alternative reactive component i can do the same and reuse the same component in that template obviously you can ask why would i create another component for the same sort of purpose well yeah of course this is just an example the real life would look you have some headers and you have some other ui components here and only this one might be the reusable part right so i hope i hope you see the picture here generally if you look at the code just think about it this way if i have a component that has inputs and services injected i mean like a data services uh and i have all these you know observables it's a hybrid component you should split that into two because then you gain higher reusability so then you wanna reuse your presentational layer and then you wanna uh you know change your container kind of uh you know data fetching part does that make sense yep okay that leads me to another anti-pattern which is people tend to create list components or generally presentational components exactly like this so 99 of the time when people apply for our job they will have something like that so i say hey create a list for me and then they will go ahead create a component and then they will have a very empty class no logic at all just one input and then all the logic will be in the template that's also an antenna button why because you are creating uh template components so you think about your components in terms of templates not in terms of reusability let me let me show you an example an example could be um so so let's not like uh reuse this component in our reactive component so let's not worry so much about the data generally i can create two observables this is gonna be the b let me just show it um okay and then the b will be exactly the same as the issue that we're gonna filter on b obviously i can create another function for it and what not cool uh but let's just keep it super simple now so i go here and then i would like to create a new left right so i create a new list on the b and then the business comes in and they say okay i have one list for a one is for b great you know what i like this other bliss b but what i would like it to do is to add an extra button next to it just a button right okay so what would typical developer do well he would think hard and he would say okay let's add the button and it will look like this and then just click me or whatever you see let's have a look but now both lists have button right i would like to have it only one player so typically what people will do they will put an end rear and yes you can guess it's not a good way so ng has button or something like this right now okay how do i define the head button well the easiest thing is to do another input oh sorry it's a boolean and if you look at the ankle bob session i really believe in big time i mean he's changed my life as a developer um you see sure you can solve that problem by having asbot um uh you can bind it as well yes and then create that and it's equal to true see that will work now it's great but the problem is couple of things according to aquabob and what i also believe in first of all it's a boolean flag boolean flags are usually not good it's because it makes your code now so think about it this way whenever you create an if statement in your template or in your code you actually create complexity complexity is not good because more complex structures tend to be higher cognitive load and really difficult to understand for the reader so if i come in and start seeing multiple ng and this is a simple example iso switch statement with ifs and a single template like this could be like nested right you could have another list and then another list this will be different variables and you can see like oh my what's happening here right like what was the intention and you start like guessing maybe maybe this is false this should be true there is no documentation and stuff ideally i would believe your code should be so clean that you don't need to write in the documentation but remember whenever you add if you create complexity then you do one more thing but to your code base another thing is you need to now cover two test cases one with if and one with another if and this gives me the uh the two variants right one with if and one with another let's give it another button with another if and then it's gonna be uh has color button or whatever how many how many variants do i have now well one with zero buttons one with all the button that's two one with only this button and with that button so it's four you add one more button and you know what's happening right so you're adding a lot of complexity unnecessary complexity you should not do it so what can you do oh you can do many things actually but there is one really good way to go about it and it's called content projection but before we go to content projection i wanted to show you another uh issue that is very often caused by um by by this anti-pattern of templatic uh presentational layer so let's just forget a little bit about the ngif let's just say this is a template this is how it should be but what i need you to do is to add a click handler and then when you click you want to notify that in your you know upper component like in your top component right so what can you do well what you can do is you can create a handler and on clicked and then here you're in the in the in the presentational component so you you don't have a state you don't have a service you don't you don't have access to it because if i create if i create a constructor with my data service well that's gonna be a hybrid component right so you cannot do it so what people do they do id output so output is pretty cool and and it's how you should code things but in here you will have an new event emitter cool uh i believe it doesn't hurt all right anyway and here you want to emit this right so you want to say click and now you didn't so this is a very basic example and this is not breaking any rules for now but imagine a list component is part of another component maybe maybe a grid or maybe a layout component which is also presentational so what's happening is you will actually end up having a a meeting the event that will go to another service and emit the event there as well and that's that's not good because it's called even bubbling you shouldn't do it because very easily someone in between first of all you're pushing a lot of data that is not a concern of the parent component second of all you start adding a lot of logic just in order to push this event higher yeah sure you can use ui service in between those components and it's very often used in some cases but you have to be sure careful that it's ui component not the data component sorry it's ui service not the not the data service so it's easy to get it wrong and it's it's it's not good the event bubbling breaks things very easily for you so what can you do well as i already told you you should use a a content projection so remove all this move here and all you want to do is to have energy content this is awesome uh now you want to remove this part reactive component [Music] sorry yeah in here we don't have that input anymore so it's cleaner it's like one less thing to worry about and then you can just put things like this and then technically you don't need to pass on this data because you can just use it in a for loop yourself and then you can have in one case you can you might decide to have a button and the other case here and look i mean i mean a smart component right i already have data to the service imagine this data service would have things like uh like send uh data you know and then that would make all the calls um to the back end but generally sure you can just avoid and yeah you know the drill you know what happened i mean you build it many times so in here what you can do is to say service and data bank and you see you don't bubble on the event because you have direct access to it so now you gain a huge flexibility now you really can do whatever you want imagine that component as i created before for now it was only the button but imagine i don't know maybe i want to add extra thing maybe i want to say um i don't know maybe a link you know with the router link somewhere and that's one variant and then maybe i want to use another one actually we can use the normal but you get my point i mean yeah you have to include the router module [Music] okay but you see i in the other case this angular list would have to have a lot of things so now question 400 bugs how do you spot that pattern well first of all you look at the name the name says list whenever it says list button whenever it says things like item list item whenever it says like accordion whenever it says like card you know something that is represented in the ui like a ui only then it's a pro it should be presentational component and then you look if there is anything in between opening and a closing tag if there is not probably something is not right because if you look at the html element if i mean very rarely if you see something like this like an empty div usually a diff would contain something the same is here every penetration component should contain something can you do it for ng content when you look at the ul i mean very early you don't see this every ul has a link you know um or when you look look this is a natural way how how html is structured it's actually part of the format so you should also do it here so we have hey let me see what i did wrong oh yeah the router okay sorry let me just remove it um oh i think i missed this router somewhere when i imported it oh no now we're just fine cool so you see it's uh it's now now it's reusable now it's extensible obviously this example is super basic i mean it's just a list i wouldn't create a component just for it but you know this logic can go very easily you know a lot more advanced you know the list can have some i don't know styling or whatever um it can have some logic of what element did i actually click and what was selected and what not but technically i can give you a pro tip don't build a components yourself i mean style them but i would i would just go with angular material because 99 of the situation it already has what i need and everything more complex than angular material it's usually not just a permutation component it's usually some sort of a container or just the pieces of html and trust me there is nothing more nothing bad about coping because a lot of people will say hey but you know it doesn't look very good because when i have a component like this look look how nice it is i just copy this two lines of code one line really and i say yes you do but until the new requirement comes in with the button then you have to start understanding the api of this one and have some bully flies and whatnot and it actually leads to a lot of trouble it leads to more trouble than it is and that doesn't even look natural like html is done so this is flexible and reusable and this is why we create presentation components so we can reuse them not because they are easy to copy and this is as easy to copy as the other case just copy it it's a little bit more lines but you know it's not such a big deal if you gain the flexibility it's much much better does it make any sense okay cool so let me just check my list real quick um or if i have uh missed something so we have even bubbling we talked about hybrid components imperative input driven components the one when you actually put an input as a part of the when you put the data through an input and then just like sort of let it explode inside oh i i can give you one more uh this one is advanced though so my question is like who's not really impressed by what has happened for now because then i can give you like really really cool stuff all right i'm going to give you an away okay i'll give you cool stuff so this is this is you see what we're doing right now is angular pure angular thing right that that you can read in the tour of heroes and another thing to reuse pieces of ui is to use directives and try to understand these things obviously it's all helpful but it's still sort of like quote quote just angular right the next level is to create clean architecture and idea is with clean architecture is you wanna move away from angular and focus on typescript only classes that way you gain flexibility and it's easy to update your angular apps and you know do a lot of stuff like this but generally it also helps you to maintain your business logic so here comes the cool stuff so one way to do services so let's just say this is not just a data just a second okay so you normally wouldn't return strings right you would have actually some data let's get an example product okay product what what is product well product 99 of the people will write like this interface it's an interface and it's cool it's good if it's small but eventually you will start having some business rules where you're gonna fail so check check it out okay maybe maybe for here we're just gonna give strings let me create a new function so i'm gonna say create product okay and here i need to you know um send the product um so i would have a product of type product and then i would send it to the backend right now the problem is the back end comes in and they say you know what i need you to validate your product before i need you to make sure that the money you're sending me is not negative right so or it could be maybe maybe negative is pretty straightforward because you can create a phone validator for this but what people can go and say you know i want you to not send me a product that is um i don't know not older than two days or something like this so you will have a like a publish date published at or something like this and that would be a date it could be a strength of a day it doesn't matter and then you see you might have a string with the numbers so on and then obviously you might have a price so you see this is this is interfacing your domain model and this is okay i mean in most of the cases it's simple but as soon as someone comes in and starts giving you some rules 99 of the people will create those rules either in your services or inside the components that's not a good place because you're not doing the clean architecture you want to create them inside of your classes so what you really need to worry about is to create a class this is a proper modeling so interfaces are great to start but with more complex rules you will need to start creating classes this is where a lot of people struggle they they just don't get the concept and it's pretty powerful so what can you do with the modeling of this so this is like uh object-oriented programming one-on-one and it's touching upon things like uh domain driven design we might talk about it one day but look at it price is a string well probably it's not a string and if you ever work in any e-commerce project you will know that price is actually pretty interesting concept because what if something costs 9.99 well you might have a number let me create that for you so let's just let's just don't worry about it for now so let me create a product and the product is of that product and then what i want well i want to have an id with one i want to have a published ad i can maybe skip the publisher for now because it's not so important and then i have a 99.99 well you see one day if you do like this you're gonna be very bad place because there is a thing like um there is a thing like arithmetic overflow i've seen it many many times people who use floats for monetary values end up in a bad place end up miscalculating things computers are very funny thing and they actually if you use flows and you start multiplying them this number is represented with something more like this and there is a 1 9 on the end you don't see it normally but it's really how is represented and then when you when you multiply it enough times that 9 makes a difference in the sense and suddenly you start charging people ten dollars instead of 9.99 oh you know whatever variation of it but generally there is a miscalculation so when you do the price you should always use send values so actually 9.99 is 999. that's how it should be done so this is another anti-pattern i see when people actually call they create monetary values in as a float numbers and they should use incense values i hope it makes sense have you guys ever had a problem like this yeah yeah maybe you can repeat that again yeah yeah so if i have a lot of data right i have i have money i have money involved so what i want to do is if i have money [Music] i have so many ways to represent price like a money right obviously i can use string that's easy because hey that will look more like this right it's a nicely formatted money but this is usually useless for me because it's just a string it doesn't have any value if i want to add or do the sum or total or whatever i will start having having problems because you know i have to convert that remove the dollar and stuff like this so this is not the proper way to model it so another way people actually do it they use the float numbers right sorry so they turn that into the number and then they do 9.99 this is not good because when you have a lot of data and you do the sum and maybe do some vat calculations on top you event one time when you now start summing up things you will realize that when you multiply it it will actually turn into 10 because there is a concept called arithmetic overflow and this is how computers store the numbers so the key takeaway from this is do not ever use floats for your monetary values like something represents money always take the value and multiply by 100 so you do the value in cents so so if i want to have 9.99 it's gonna be 999 cents doesn't make sense so always use this value and therefore you want to store this in your memory of your computer or in the browser you want to store it as a values which is unsigned numbers and then eventually you know maybe someone what happens in some systems when you do minus 10 in some systems if you're not careful it will actually add the money to your bank account so you shouldn't do it you want to actually make validated inside your domain model and now it's a class so you can do it that this is not allowed so what i would like to do here is to throw error okay how can i do it well one and simple way is to click here so i can say if this price is bigger is smaller than zero then throw error and it has to be positive okay cool this is i think i have a typo oh incorrect money cool all right but that's also not the good way because you violate the principles of encapsulation of your models so look at this now if i wanna this is this is a product right but maybe i'm gonna have something called an offer offer is similar i'm gonna have id and the price and you see it's copy paste don't repeat yourself i repeated the code just to have this pieces of information so what i should do instead is to create new class for the price constructor and it's called value objects it's pretty powerful concept value in sense number and then i want to have this logic here oh and now instead of using the number i can use the type of price and i don't have to worry about it because this piece of code is no longer relevant i have it in a reusable place you see so i have a price and i can use it now in the product and then offer and obviously i would have muffins i would have a start date and so on so how do you actually create it well here i cannot put the number but what i can do is to put new price now the price will throw an error therefore whole function will from there does it make sense yeah it does yeah so this is something called a value object and in order to get there you need to have some business rules and then the good way is as soon as oh and another cool thing maybe maybe you know maybe it's a valid valid number and now you wanna console.log the value right so you wanna say product.price and now you wanna say formatted value formatted value well i don't have that function but there's no problem because what i can do is i can move here obviously this is private so i can have a getter for it oh sorry i can't name it the same so i can use underscore for this i do it because i don't want people to change my price and then inside the price i can have another getter formatted value and that can be a string and now i can use a great thing like dollars and put this value in sets divided by 100 and it's encapsulated in the price now i don't have to explain anyone that value needs to be in sends and stuff like this and just you know i can just say hey there is a class called price use it whenever you represent the money and that will be automatically formatted into the dollars and divided by 100 so i don't have to repeat that functionality all over the place so that's pretty cool wow yeah and with that being said i hope you learned something new today i gave a little bit of extra but please guys if you have any questions please do ask yeah thank you thank you for that um okay us also please guys if you have any questions please ask i think my first question would be so when do you choose to either go for class or interface yeah i usually start with an interface because it's easy but there are two cases a couple of cases where you start needing when you start to need a class one of it is rules like a business rules like the validation the price has to be you know positive or or the date cannot be in the past or or the it has to be a uid then obviously you cannot go with the with the interface because you would have to do the mapper around it and that doesn't make much sense so then you start benefiting from this another case is when you actually want to reuse it and when you reuse it you have so when i have it only in one place like in my single service that's okay because i just map it in that service but as soon as i need it in two different places and i might have some more sophisticated logic to actually construct that object maybe you know have some static constructor we can talk about it somewhere in the future but generally if i need to construct it in more advanced way then the class again plays very nicely and and lastly when i need to format the data for the ui so so you know like the getters i showed you you know like i don't want to have that in my component because that's not reusable class is reusable okay and and uh when it comes to content projection right um like what if uh for or you have uh of course let's say for example it's in a card right a card component right um is there like a limit to the number of lines of code you could use when it comes to content projection and by that i mean uh like of course in the presentational component right you just put whatever you want to put over there and then like put ng content in its corresponding template right so what if you have like a lot um or many lines of particular template yeah would it look ugly or would you still go with the same way you do it yeah it's a good question so cards are usually more sophisticated pieces of templates right because they might have some headers thai titles buttons and whatnot so actually what i really really would recommend is you focus on the cart only so it should be only the card and then what you can do you can use this slots in your ng content you know you can have a multiple ng contents maybe i can show it to you actually you know what i show you the best if i show you on an example from angular material because whenever in doubt go to angular material let me but it's a very good topic so if we go to angular components i have some drag and drop swing all right that's that's cool and now let me move to src material and then you have a card and let's look how they do it so in the template you see it's pretty straightforward you actually have ng content and then you have something called a slot here it's it the slot makes sure things get rendered in the right order or in the right place in your template right so actually you see you have two ng contents but one is specially reserved for an element that has a tag matte card footer but yeah you literally allow have a big energy content be inside you just let the people do but now it doesn't matter if so it doesn't mean that what is inside is not another presentation component with another ng content right it's pretty normal to actually contain multiple stack them all around okay so that means for example um if in this particular card.html let's say you had um a hundred lines of code right and then let's say the footer was about the last 20 right so when it comes to uh you putting it in terms of content projection you still put all those 100 lines of code inside the smart component containing these presentational components yeah so it sounds counterintuitive for people but yes you would do it it's because what you want to get you want to get templating or you want to get reusability right 100 lines of code it's a lot i do agree but it's you know each it takes only one of these lines from 100 to change and you're already locked you have to create another component okay you know you might have 10 different versions of this card and just having this because oh it's so nice i just reuse it you know yeah you know it doesn't benefit in the long run i know it's counterintuitive i know but it really makes sense okay okay um probably the last question that i have is so for example now in your presentational component right and let's say you still have your ng on in it but then it's empty uh by leaving it empty like does it have repercussions when it comes to let's say running your angular application or it is advisable to delete it because it has some uh i don't know some side effects i don't think it has a side effect it's more like visual think why would you have an empty function right um so i would remove it because if you don't have it and one argument can be yeah but maybe one day you will need it yeah but it's two lines of code implements ngo implements on init and ngon in it right just remove it i don't think you need it if you need it use it if you don't then right anyone else has a question can ask all right well but then thank you very much okay uh okay if anyone doesn't have a question yeah like to say thank you to greg for taking us through this session by the way greg has amazing content also on his youtube channel uh where he talks about uh sounds like the most the best practices with uh building angle applications uh personally i've learnt a lot from his youtube channel because i think after even learning uh or learning whatever he's teaching on the youtube channel makes me even uh be very very cautious of how i've been architects my application yes at some point it feels like oh my god am i doing something wrong or anything but it it really really helps like even trying to understand like what exactly are you building and for example is this a project that you are probably creating in five years time you're going to add something onto it does that mean i'll have to come back and change everything or it's just just a bit of moving things here and there and yeah even like working on my side projects i've really really learned a lot on especially when it comes to reusability because now i find myself like i don't really have to um to write the same thing over and over again and for example like learning about content production has really helped me uh whereby like if i have like uh i don't know three different um routes i mean or three different modules that probably require the same thing uh let's say it's a list of cards i don't really have to put let's say um i don't know postcard and then let's say message card i can just use one card and then use content projector to just change whatever i want to change which is pretty amazing in my uh my opinion but yeah um thank you uh yeah so if you want to learn more about uh what uh greg does you can definitely check out his youtube channel yeah alex had something to say yeah okay my niece thank you for that it was a quite uh informative and we learned nothing was true maybe the other thing i would also like to ask maybe in the near future we can you can you can maybe take us through something like a factory using factories like whereby you can have a token that is a common token that is passed around like let's say you have um like you have a what can i say like maybe you have a user token which is being passed around and you use the factory pattern to be able to you inject it into a module and you're able to pass it around so something like that i'm thinking around that okay yeah yeah because i encountered that in some work i was doing and i managed to get it working but the principle has not sunk in completely so it would it would be good to to have something like that again yeah thank you sure when just you know gather that and let me know we can even you know make one session just for you know stuff like this that you that you describe and then have more things uh and also what you said on the beginning you know looking five years ahead and stuff like this yeah sure yeah okay thank you okay um yeah thank you guys for joining us thank you greg for taking the time and as usual uh the video will be available on our youtube channel by tomorrow afternoon so yeah definitely check out our youtube channel for some of this content that we upload uh it will be really really beneficial to you um as someone for example who is who wants to continue improving their angular skills yeah greg do you have anything to just touch a parting shot no guys i mean thank you thank you for coming again i really i really think uh you guys you know either the future of angular in kenya and it's really important to know keep coming keep learning um you know time passes by verb shows that you're 90 of other developers because you actually strive for development for getting better so so keep it going you know no matter how much you have experience you have you know i still learn myself so you know this hunger for learning is very important and i believe and me and mishka minko sorry the guy from google as well we agree that you know this is the most important thing uh when it comes to be a successful developer totally agree with that yeah thank you again craig and thank you all for coming yeah i'd like to say have a good evening to everyone of you you too bye-bye bye

Channel: Angular Kenya

Views: 228

Keywords: angular for beginners, what is angular, angular intro, introduction to angular, angular for web development, angular, angular kenya, angular anti-patterns, dos and don'ts in angular, good coding practices in angular, cobiro, greg radzio, gregory radzio, how to write clean code, reusability in angular, content projection in angular

Id: cmBAMfzsY1I

Length: 66min 18sec (3978 seconds)

Published: Thu Jul 01 2021