Angular Life Cycle Conetent Projection Pipes

hey everyone welcome just just give me a few seconds i think there are two settings which are missing okay let's get started so uh if last time we discussed about few things and let's go ahead and see what was discussed so we discussed about content projection and now we have to talk about the after view it but i think we also left after contention so let's see what after content check is and then we will talk about after viewing it and uh before i move ahead actually uh we just wanted to thank you thanks everyone for like hundred followers on page so we just reached 100 followers last week so thanks a lot for that and this uh as i said this videos will be available i think this is the last week uh it will be available on youtube so sorry not on youtube but which but after that you can actually go ahead and find all the videos in case you want to actually recap or do something rewatch the videos you can just go to the youtube channel where these are available inside angular getting started and you can find all the videos here i think i have updated three initial three and next two is pending hey uh hey we love thanks for following thanks thanks thanks a lot means a lot to me so uh next two videos will be available i think i'll i'll upload tonight because i think i made sick while uploading the earlier videos there was a few minutes where we had actually taken a break and it doesn't make sense to actually upload those on youtube so i have to actually edit a little bit and then i will i'll update all those videos as well but uh in case you have anyone this three videos actually talks a lot about typescript so in case you have anyone any of your friend who is uh looking to get started again get started with angular or even he wants to he or she wants to learn typescript you can actually refer this videos to them as well and yes let's go ahead and get started and here we will be talking about uh first let's move on and see what we had done so far so if you remember we created containers and last time we used this content child and content children both and we'll discuss where we can use content so we have one instance of component we can use content child and in case we have multiple instances of context contain children you can go ahead and use uh sorry multiple instances of your component you can go ahead and use content children this is a really useful in case you are creating your own uh component and you want to actually take the com you have some content placeholders right for example here so we are placing some uh components here for example uh you have you want to create your own drop downs right and you want to create or you want to create your own uh multi select list something like that so you can actually go ahead and use the component content children there so that's one use case and up we have uh so krishna no actually i don't want to do anything for money i love doing for free i enjoy it i mean if you do something for money you have a lot of constraints so it's it's a lot of work and earning money is not not and actually my my motive so i just want to make my most of contents available for free so here so uh we discussed about after content in it and let's see here so what what happens uh after content in it right so let's say if you updated some properties here so here what we are doing is we are updating some properties of your order component right so component so of course there will be a change section which will run for each and every component and after content check this actually an event where all the life cycle looks uh sorry all the uh change direction has already run so in case you want to update few few other things which is related it is i have not used anywhere but because after content in it is more than enough for me in most of the cases but in case you get some issues where you have some strange error your views are not getting updated you can actually go ahead and implement this after content check and update the other contents which are actually causing some issues here after content check because this is a this is the life cycle looks where uh this is like life cycle look where all the uh previous change direction has already come has been already completed and then you can actually this is a safe place in case you want to update more content so in case you get error so as i said i have never used it in my use case but yeah so that's that's why we are not going to talk a lot a lot about this after content check we just going to talk about the important ones like after we unit so let's move on to the after we unit and in after the unit we will discuss about few more scenarios for example we will talk about how we can do component communication we by you by uh your child and we children we will talk about template references as well so let's go ahead and do that and see what we have here [Music] so let's take an example so here hey uh r2 i'm not sure what's your name but yeah thanks for following so yeah so let's go ahead and do after viewing it and here i am going to take an example let me think so let's create a new component so lmg c so it's a new component which we'll be creating and let me just name it as fetal component a small example and now in the center component uh what we will do is we will create a property i'll call it as header and we'll say this is of type string and it has empty value by default and then we'll just render the header here so let's say this is h1 header and now what i want to do is i want to use this header component into let's say product and order both but i i don't have any input property available here so you can see i don't have any input property of course i can make it input property because this this is a really small component which can work with input and output but that's not the idea the idea is to actually show you an example of using view child so let's go ahead and do that so here on product so we do have h1 title here right so what i am going to do is i am going to comment this out and rather than that i'm going to use header so we have ecom header right so this is our component name and let's go ahead and see how our application looks like so i am already running ng serve so let's see if it is completed yes it is completed so let me just zoom in okay so uh we have uh so let's go back to the application now and see what's happening here and just disable the breakpoints and nothing much right so we we cannot see any header information here but let's see if that element is available so we can see ecom product and h1 product information by this time let me just save it again so probably it's not compiled let's see ecom root and then we have a com container because we place the everything inside component and then this is product and this is your tip that is the button button toggle okay here it is right so you can see it's ecom header but we don't have anything available inside this header right so we don't have any values but element is available of course it doesn't display any uh content and now what i want to do is i want to actually take the i want to actually refer or take an instance of the c com header component in my code base and then i want to assign some title this is really useful in case you have some component uh for example in the third party component where you don't have any uh control but you want to actually change something programmatically so any component right so let's say some component which doesn't contain input and output property so uh and you want to access those component inside your code base that's totally allowed in case you are trying to access any third party component which you cannot control it you cannot update it or let's say some some component which is written by your team but they don't want to expose it via input and output probably for some reason and you want to access those programmatically in your code base so how you can do it that's that's what you can achieve using a view child and with children so let's go ahead and talk about we child first and then we will talk about we children so to get the access of this header component which we have already written what you can do is you can create a view child so we child is a decorator so we can use with child decorator and then you can pass the component here so right now we are trying to access header component so it can be any component in our example it is an header component and then i can say header component and then we can say this is type of header component and as we are using strict mode uh somehow we have to use this uh malleable operator so it will not cause any issues and now our we can access this header component but let's try to access the center component so here i'm going to do it first in ngon in it so i'm doing a console.log and i will say this dot header component right so we have this letter component and let's go ahead and see what's in our what's the um console so we have still uh this header component available here we got this h1 which is inside the header component and let's go back to see the console here so you can see product component layer ts line number 32 which is your header component why this header component is undefined so let's talk a little bit about this and then we will move ahead and assign the values right so earlier i think it was before angular 8 okay so uh remember at what time your this components which you are trying to access with uh which have which is actually available within your view will be available so there are two two scenarios to this one there might be possibility that your the component or the element you are trying to access using view child is still not initialized what uh what's what's that scenario i mean how it can not be initialized so every component has its own life cycle looks remember this so right now if i talk about life cycle hook of your product component because pure product component is your parent component right so let's go back to this uh diagram this list of life cycle looks so what will happen for product component is product component first so this component will go through this life cycle looks right so it will follow the same uh sequence so it will go to first ngo in it it will initialize i mean the component will be initialized it will see if there is any uh uh ng on changes it's it means if it has some input on our properties it checks if uh there is some some ng or a do check event which has been implemented it initializes its content and then it will go ahead and initialize the views uh so everything which is available on its view so this header component is right now available on the product component view so it at this point of time let's go back at this point of time all the contents all the components which is actually available inside view of product component will start getting initialized and then you have to also think about ecommerce ecom header also has the same lifecycle events right so now header component will also go through the same sequence so let's say your header component has some some asymptotes call some asymptotes call to get the data from back in and now considering both has its own lifecycle events can you guarantee this ngon in it will be initialized before your component is initialized the answer is of course no right we cannot guarantee so you have to always keep this in mind in case your child component sorry uh or it's a child component yeah so in case you are trying to access any component using view child and it it contains some code which can cause delay in the initializing initialization of that particular component you cannot access that within your engine in it i hope this is clear and now that's the same reason we we don't have access uh we do this component is not accessible here but do we have any synchronous call inside header component right now the answer is no is it i am not sure let me just see what's happening just checking if anything is running in background so let's see okay not anything which i can find but let's move on [Music] anything else okay you took this on so probably that might be causing an issue and apart from that okay just let me know if it happens okay uh probably youtube may be maybe called it because it was it was running in the background so yeah so uh so we we now know what what can be the issue accessing it is fine now yeah actually probably probably youtube might be an issue so yeah so let's see i mean this header component is what uh is can cause an issue but in this scenario current scenario we don't have any code inside letter component right so if i want to access this inside ng on in it is there any flag right maybe i want to access this because i know that okay header component will be available always uh whenever this product component is initialized so in that case there is a flag so if we can also pass this flag which is known as which one is static so i can make it as static true okay so by using uh the static true flag now this component is going to be available here so it's already running so let's go ahead and see and let's try to make sure that whatever i'm saying is right and here it is right so you can see product component line number 32 is it is available here but there might be some scenarios let's say you are trying to access any third party component by using a view child or you are trying to access any other component which is already written by your team members and you are trying to use view child and with static truth so what will happen is if you try to do that of course you will not get any instance so that's uh that's a way to verify okay this is something which i cannot access using static true so what i have to do is i have to make it static false which is default so if i don't give anything if i don't provide anything static is by default false so i don't have to pass anything here but uh make sure if you have if you are sure that you want to access it inside ngo unit and it's safe to use here make it static true now let's go back and talk about the after view in it right so let's let's make the static false by default and then let's implement after view init and here we can call it as ng after viewing it right so of course you can see this by using by referring to this and then you can press f12 and it will give you the function name so this is another way to verify or of course your visual studio gives you uh the intellisense so what's happening ideals after unit implement interface i already did that but probably i made a spelling mistake so ah yeah view view was wrong right so yep so here it is so after viewing it now i'm sure that okay whatever component uh i am trying to access using view child is safe to be accessible here so what i can do is i can just go ahead and do so i can say this dot header component dot i can access all the properties all the methods of any component which i am trying to access via view child here and then i can assign it as let's say uh product component i can assign a new header and you can also call the properties right so in case you want to trigger let's say another component some action on your components button click you can actually go ahead and do that so you just have to do header component dot whatever function that particular component has yeah so let's see and now you have this product component which is uh coming from ecom header this is as one and this is your value so this is what you can do using uh the future but let's see one thing so let's go back to console and this is something which you may have found and uh if you try to actually uh use com angular before you might have seen this error so this is something not new this is one of the most searched error which is available on internet for wrangler and good thing is now angular has a documentation to explain what this error is this uh what is this error and they have a video and they have a description as well so you can see this error commonly occurs when you have added template expression or begin to implement life cycle looks like after unit or ng on changes it is also common when dealing with loading status and a sinker sync operations or a child component changes its parent binding so these are the common use cases and uh there are multiple ways to actually debug this error so most important one to actually understand the life cycle looks so if you are actually calling some methods which is uh which should not be accessible within some of the lifecycle loops so it may cause an error but what about this this scenario right what what why why it is happening here in this case this error is actually something which is only available during development mode if i create a create a production build it will not occur so uh the reason being so the reason being it actually on development mode in such cases uh like this after viewing it after viewing it your life cycle uh life cycle you change direction runs twice causing this error but once you do production build this error won't be there in case you get such errors on your production it means there is something wrong there is something a wrong binding which is happening and you have to go ahead and fix this error and of course how to fix this error so they have given you how to how you can actually debug this so it's available on docs refer these docs in case you're getting issues generally as i said right so it happens when you try to actually do something which is not related to life cycle looks or you do some you call some different methods which should not be available in this life cycle look so those are common causes but if you follow the life cycle hooks i mean what what will be called after what so you will not get this error most of the time the only thing is you will get this error in your dev mode and there are ways to actually avoid this let's see how you can do that and the first way is of course using set timeout which should you shouldn't be doing it so you can do settimeout and then you can say uh comma 0 and sorry so let's see this uh first uh by using set timeout so what we have done here is let's see that's correct so you can see here so you can see the error is gone but set timeout is very uh i i you should not use that time or just to just to be frank because it it actually uh hang i mean uh because the problem with settimeout is actually it will cause your main thread to actually stop and this is one of the common causes of having a performance bottleneck in your application i have seen so many application using settimeout just to actually achieve something which could have been done using rxjs operators and something like this so just to just because you saw this error and you tried to uh look for some solution you will find one of the solution as using set timeout but never do that just let it be as it is and you will not face this issue in production anyway so you're safe but never use that timeout never use satan okay and another uh way of doing this is something like which is given on docs i mean it actually keeps track of previous value and current value and they update the value on something like this so let's see so i'll do one thing so here i'll implement another interface which is after view checked so let's implement this after we checked and here what i can do is i can say uh i can create another variable this is generally what this this is something you will find in docs as well so i can say this is previous value and then you can have current value as well and so i can say here this dot previous value is equal to this dot product product uh header product sorry header component dot header right so this is the previous value and then i can say here if previous and then i can assign a new value here for example let's say right now we have a single value but let's say this com this value is something which is coming based on your button click or let's say coming from something else right so uh you can say this dot current value is equal to i can say this is um header just an example right so and then i can compare if previous value is not equals to this dot current value and then i can say this dot header header component dot header is equals to this dot current value i mean whatever the new value is which is coming right and let's see if we get the same error again which we shouldn't but let's just to verify right so after view check i mean at this point of time the change section has already been done and let's see if you can okay we are still getting this error somehow ah the reason being same right so reason being same because you will uh this change direction will run twice causing this error which is of course com comes in development mode but in case you don't want to actually do something here you can also do it after fuel check just to be sure in case this is some if you are still getting some error on protection so try using this after content after you checked where probably you might be doing something wrong so you can do something like this just to avoid this error otherwise it's absolutely fine as i said you can do all thing uh everything here in after viewing it and uh this that's absolutely fine so this is this is error you will often get in your dev mode don't worry about it and don't try to use that time out in case you already have some application where some developers are using set timer just to avoid this error just go ahead and remove it it will just give you performances on your production application nothing else it has no advantages i would say just just causes lot of issues so this is your this is how you can actually uh do component communication using view child so what if you see this code clearly what we are doing here is we can actually go ahead and access the properties i mean i can assign the values by uh using view child and of course i can also this header component and you can see i can also call any events which is available on this particular component so okay so uh as you mentioned angular universal um and in angular universal remember so you have to always go ahead and check where you are running but it is absolutely fine to access native element properties the reason being so i'll just tell you the reason earlier if you might have used this renderer two surface right so okay i'm not sure why this search is taking down time but you might have actually used renderer to service in past uh with the introduction of iv actually iv makes this renderer too as absolute you can go ahead and use the native elements just make sure in case you are using angular universal you have a check whether it is running on your server or it is running or on your client but it is absolutely fine to use in a development you don't have to use render 2 anymore and angular material is actually already using negative elements so you can probably refer an example and i think there was a blog let me just share the link of course i had the same questions a few weeks ago and [Music] let me just check my threads and i think it should be available here yeah so this is a blog post from adam who is uh who works on angular 4t so he wrote this blog post in case uh you you want to handle what is i mean you want to handle the such scenarios in your universal so uh the uh this is this this is the typical way we do it right so this one so if it is running your so you always check if it is platform browser then you do browser stuff or you do server stuff here so what he did is actually he created a service so if you can see this is service a and then there is an api call and on components what is what he is doing here is so he's saying you can actually just inject this if it is running on browser so he took a simple link a simple example and then he said okay rather than actually checking everywhere if it is running on client or server you can actually do it via service itself so you don't have to do it in every every line of code so that's what the approach he took [Music] now let's take an example of you children i mean we are going to use the same header component so let's see so i'll do is i'll just add multiple instances of header component here and see yeah it's really useful i mean i i love the availability because uh if i have to implement ssr i have to duplicate lot of code which is of course not manageable right i mean doing it everywhere so now let's see here what we have done is we have placed multiple instances of header here and let's go back to our code sorry uh these elements right so you can see uh of course we have multiple ecomm header available here but i can just see this header only once so let's discuss about what view child does so if you uh use view child what it is going to do is it is going to take the first instance which is available on your template remember this it will it will always take the first instance which is available on your component and it will ignore the rest that's what view child is so to avoid this what you can do is in case you have multiple instances we have already seen this in past remember content child so yes content child is did the same and if you needed multiple instances what we had to do is we have to use content children it means i have multiple instances so same here so i am saying okay i have multiple instances and i want to access those so i will be using view children so here so i can see um children head component and i'll call it as header children component and which is type of query list of header component so let's see [Music] uh implicit has why is this okay view children okay probably um this is coming from correct with okay so krishna has but those are not children of federer no i'll remember we right now we are into product components so they are children of product component they are not children of header company so if i had to actually access the children's of header component i will write this code in the header component itself i will not write this here i think let me just change the my laptop will be performing smooth okay so what we have done is we now have the view children instance here and then we are using query list so this is important so query list has actually added few more properties over the years so if you try to use query list in like different version of angular you will find different properties as well so remember this keep this in your mind whatever properties we are going to see here it's not available in the previous version uh may sorry it's after like angular 9 so you will find some extra properties being added and view children by default has this static as false so static property as false so it means of course i cannot access this in inside ng on in it so what we have to do is either you have to access after uh inside after view in it or let's say after any action has been triggered right so in case you have button click or something like that you can also access this those ears this property is there so here let's do one thing so here i can say this dot at a children component and then you can see uh these are the properties which we have available so generally uh we use forage uh you have changes which is an observable i will not talk about this property right now because we have not introduced the concept of streams so far and i don't want to complicate because as soon as a new developer who starts learning rxjs everything goes for a toss right so all the concepts which you have learned this course it goes for a toss because rxjs is the difficult part understanding angular so i'll keep it separate so the idea is to actually introduce you to rss first and then talk about such properties where we have observables so right now i'm going to show you multiple properties so it has let's say it has first so in case you want to access the first instance of your uh header children component you can do it using first it also has last and i think recently it got this get property so you can also pass the index number to get the get the uh instance of one com of the component which is available at this particular uh location so you can also pass this in index so that's what that's what i'm saying right so you will find few extra property properties being added in each and every version of angular so make sure whatever version you are using you know what are the properties available for example changes it might not be available in case you are already on angular 6 or 7 it's not available there get is something which is recently added first and last which is i think again introduce after angular 8 so just just make sure so here we have uh so if you you what you mean by uh can we add new properties new properties is something which you cannot add but you can of course go ahead and uh like change the properties right that's what we are doing here so you can do last dot header so i can just say okay this is last property should have this is last component last letter component right so if i go back to our view and you will find okay this is the last header component so uh can we add new property to the last child using dynamically dynamically and how you will do that so that's what i am i mean you can access access the existing properties and methods which are available but probably i'm not sure i'm not sure okay and uh of course then you you have this dot header children component dot for each and then you can also do a for loop as a as uh i think uh previously we have seen an example of using far off in container component so in case you don't want to use forage but in use for off loop that's absolutely fine so what i will refer what i will suggest or what i will prefer is of course for a flu so rather than using forage i mean it's not like forage will be like slower or something but of course if i have access to far off loop i will keep it uh i'll use for offload because it's easier to read as well right so it's up to you but yeah this is what you can do using view children so if you have multiple components uh you will be using for uh children if you have single instance you will be using view child and in strict mode remember this a lot of developers don't use strict mode because they get some issues for example if i remove this right and then you start getting an issue okay now what to do i cannot assign and define value so this is something which is actually inside the angular code base so if you refer the angular code base you will find they use this operator in case of uh this view child with children or content child content children very well this value is undefined right but apart from that i mean of course all the properties which you define which is like of course string boolean you know the values you can actually define a default value in case it's an area of course you can just define an empty array the only difference of only problem comes when you try to use blue child or which children so uh this is so uh here i'll introduce you to one more thing which is known as template ref so let's go ahead and see what template ref is uh you will be this will be useful a lot of times in case you try to you are into some situation where you want to access any of your html tag which is available on your template itself remember this i'm talking about the template uh of your own component it's not i'm talking about it's ecom header and you want to access it so i'm talking about the product component itself and it has its own input property sorry not input property but it has its own some estimated template html tag which you want to access inside your ts file so let's see so let's uh define a a div example which i will take let's say you have i if we don't have an api call just as just uh assume that we have an api call and then that api call returns you the list of errors and what you have to do is you have to bind that list of errors on your template how you will do that so uh this is something which is really useful and you can use for example let's say i will define this div and i will say this is id is something known as let's say this is error or api error okay this is something which is going to come from backend and then i just leave it as it is i'm not adding anything here because all the all the values is something which we will which we will bind once i get all the values from your backend and then based on the error if it it has the error or not i will append those values so now i want i have to access this first inside my template of course so how we can do it of course we can take it take help of your child because this is something which is available on my view so i can say view child rather than actually passing the other the component name itself because we don't have a component but we have an element so you can just give a single quotes we are saying okay this is a string property and then we are passing the same name which we have defined here which is non which is called as template reference so we are passing this template reference to my view child and then i am saying this is a error div and it is type of what we do element ref of type any and again right so we are using strict mode so i will be using this one and of course i mean this is something which i can also use static as true so first let's try to access this using uh on ng on it let's see what we get actually so i can say this is console dot log and here i can say this is error diff so what i am expecting is i am expecting an element of type div or i am actually expecting a development so let's see here and very list this so we have an element ref and you can see it is a div and then it gives you native element and then all the properties or attributes of diff right which is available so you can see it has everything which is actually available in your div as an html element so of course we got this access now what i want to do is i want to bind some error to this so what we can do is let's say i on click of toggle button so on click of toggle button what i will do is i'll say this dot uh error div dot native element now here here is a catch before uh before like angular 9 before iv came in it was always advised to use the renderer or renderer 2 to do this dom manipulation it was always advised it was even in the docs that you shouldn't be doing dom manipulation directly now as i said renderer 2 is absolute because of iv coming into the picture so i can go ahead and directly assign in a text is equals to some some value right so uh so i can say uh there is an error making api call please retry right so i'm just directly using this inner text here which i know of course is a valued property and let's see and what you have to do is toggle right so i'm not sure which toggle is this toggle table okay so and toggle okay here so you can see there is an error making api call please redraw so we are getting this message because we of course clicked on this button and let's inspect this element and this is here right so we have diff ng content and this value which is actually we are binding here right so this is how you can actually make use of template ref there are of course lot of uh cases probably as we move ahead and we take start taking some advanced scenarios we will uh we will take some more example of using temperature but this is just to give you an idea that this is also possible you can also get the access of any element by using template ref so you have to just give up it's a property name by using hash and then you can access that this element inside your template by using view child and make sure that it is type of element ref or in case uh if it's multiple you can also go ahead and use query list probably so yeah this is this is what template ref does and let's see what else we have okay after view check we already spoke about where that message is going away it was clipped is it i don't think so it's going away it's already there right so if you click on toggle it it will be still there i mean it will just update the same div that's it it will not go away right so you have to probably do something i mean probably a refresh kind of stuff and then make this property in a text is equals to blank or empty whatever you want to okay so this is the template ref is done and what i wanted to add few things more um related to this content projection not content projection but related to the template so let's do that and we will move ahead and talk about the pipes which we have so there is a few things let's say i will uh i will take simple example because they have very huge use cases very uh advanced use cases as well but probably we will do that later on in case we do the streams for like advanced stuff but right now let's let's just use them so first example uh first we will talk about something known as ng container so ng container is very useful and uh let's see an example where i can use it okay [Music] rdn so i think we are already using ng bootstrap let's see which one we are using ng or ngx bootstrap okay we are using ng bootstrap so probably you can use the accordion from ng bootstrap itself and let's see the code so we have ngb accordion in gp panel and what is this okay let's take an example do we need to do anything else okay i will create a new ng gc and let's say i will call it as comment component uh probably you are your uh orders or let's say your products has some some feedbacks right so i'll call it as a comment component probably we can use it later on with some some dynamic data coming from back end but right now i'll just you copy the same thing which we have here ngb accordion and let's see and i'll place this comment component on app component.html okay so uh this is this is the same component which we copied right so fancy title okay it works so here let's try to do one thing let's try to repeat this uh entire comment component or accordion multiple times okay so how we can do it so i'll go to this component comment and here uh what i am going to do is i am going to have let's say an array so i will say this list comments right now i am just going to put some values like one two three okay and in our html i am going to use a div and here i can say star ng for is equals to let c of comments and here so if you are wondering what i am doing i am just repeating the same accordion three times so let's see so we got this same accordion three times which is available online ui but this is not what i going to show you i wanted to show you this so how many times uh we have divs so we have three times uh that is div is actually available three times did we actually needed a div here the answer is of course we don't need a div i mean what we just needed is we needed this accordion to be displayed three times so this div is actually useless and it is just adding an extra layer of element on your template can you avoid this this is where the ng con ng container comes into the picture so what i can do is i rather than using an element i can do ng container and until unless i have some content ah there won't be any extra div which will be displayed so let's go back go ahead and see this now ngc content with the eng container example and let's inspect this element now and you will see you just have ng of ngp accordion i mean you don't have an extra layer of element or any extra layer of div element which was available causing just just adding a an extra element for nothing so why it is important to actually use ng container in some cases because probably you don't want to actually uh you are you might be getting some issues while providing okay so probably uh you might be getting some issues while styling your elements because you just have an extra day with there uh you are getting uh you have to actually go ahead and access that development then inside that element you have to go ahead and access your components rather than that you can just re use ngcontainer and you don't have to worry about that extra element which we are getting into element so this is where you can use ngcontainer as i said there are lot of advanced uses for ng containers this is a smaller one this is something which you can always use in whenever you have a small application and you don't want to add any extra level of element into your account so you can just use ng content what else what else we have c so i think we uh saw an example of ng if i'm not if i'm not wrong where was that did we deleted that order okay so i think we have removed it normally product click toggle yeah we removed that but let's see an example of uh using ng template uh using ng if so here what we will do is i'll place this toggle table right so let's use this toggle table functional functionality again and what we did here is what we will do here is so i will do one thing so here i will use ng container and i will say this is a star ng if is equals to so on target table what we are doing is we are making this hidden so i will say okay this century fiden or i'll say else and let's see what i can do using lcls but let me just complete this ng container i'll place it here and what i want to do is i want to actually in case it is hidden i want to show and template saying uh this particular table is hidden or something like that so you can also do ng template okay and give it as a name give it a name let's say i am using template ref which we have already used and i will say this is hidden hidden table okay and inside this template i define a div and i can say okay this table is hidden click on toggle to see the content okay and now i can just use this hidden table template here so what will happen so if it is hidden this template will be shown here let's go ahead and verify so let's click on toggle table and you can see i'll just just let me make it as h1 so probably because it's too small right so and we have a lot of contents to show so i can just use h1 here toggle table and you can see this table is hidden click on toggle to see the content so this is how you can actually use ng if and else so generally a lot of developers are actually aware of ngif but they are not available or aware of else and how they can use it so this is the way this is the way you can actually create an ng template again if you cng template ng template is itself not visible i mean this ng template is not visible here the only thing is available is h1 same if you see the table of course this ng container is not visible the only thing which is available or and visible is your product list so these are some examples of using ng container and ng template and probably we can take advanced examples as well in future krishna so i am using for inline form edit yes that's something which we will discuss about uh when we go to forms not right now so yeah we as we said right i mean this is this entire uh angular getting started is going is going to be more than 20 hours so you have a lot of things coming on coming on sorry and this will continue until unless and i'm not getting more stops but yeah so uh let's take an exa break now and we will be uh back in few minutes so probably it's 7 p.m right now in my clock so 10 minutes and then we'll be back and we'll talk about the built-in pipes and if you are wondering where tng on destroy is gone yes we will discuss about it as well yeah so see you later sorry see you in 10 minutes and meanwhile in case you want to have some questions drop it or you want to discuss among yourself go ahead and do it or do it probably you can share your contacts on twitter and wherever you are available and you can make new friends right yeah so what i was saying is uh this is the repository in case you want to clone it and you can start it if you want to and you will be able to find all the course content on this repository itself so this is the link and apart from this uh in case you are interested in building and publishing your own libraries you can actually go to uh this youtube channel and you will be able to find two videos which is uh just a second this is angular libraries uh building and publishing angular libraries and then adding angular adding secondary entry points which is important in case you want to make your libraries three shakeable and we have few more videos angular best practices is one of the uh live stream which we did last year so in case you want to learn about the best practices you can actually watch this video as well and uh yes coming back to on destroy so on destroy life cycle look at is actually uh is get is something which will be which will be called once your dom element is removed from ah sorry when once your element is removed from the dom so what are the scenarios when when your tom will be removed from the element sorry when when your elements will be removed from the dom one example in case you have a routing so you move from one page to another page and you your doms your elements will be removed because you are transitioning from one component to another component another scenario is of course using ng if right so if you are using ng if your element gets removed from the dom itself so we took an example of product list and we added on destroy here to go and check when it is called so now let's go back to your view and here so we can see uh click on toggle table and your table is back and click on toggle table again and your component is destroyed because it is removed from the dom so it is important to understand when does your on destroy gets called so it will be always on uh once your elements gets removed or your component gets removed from the dom so at this point this will be called so this is ng on destroy and we we don't have anything to clear right now i mean we don't have we we don't have any observable as of now so if you are not doing any operation here but but as we talk about http and observables we will see how we can actually use ng on destroy to unsubscribe to the streams right so just to make uh make make sure that we don't have any memory leak so this is on destroy and uh the next thing probably uh yeah so probably we will be able to do this and you can start with the encapsulation as well so uh next thing which is really important angular gives you some built-in bytes in case you have used angularjs i think it was called something known as it was something called as filters i'm not i'm i think it's been some four to five years to me when i used angularjs last but i think they were called filters and now in angular you have pipes so pipes are actually useful let's let's talk about what pipes are so we have already used one pipe i think in our example so we use something known as pipe json yeah this one so we use this uh json pipe so far so what what those what pipes does basically so uh pipes are used to transform the data so remember transform and this word is really important because it tells you what you can do using pipe transform means you have the same object but while representing that object you are representing in a different way what are the examples of transforming for example let's say you have a date but on your ui you are displaying that date in a different format the actual data is as it is you are not modifying the actual data that's the whole concept of transformation right for example we use uh transformation in general as well for example uh i'm not sure how many of you from india but jungle movie right so amir amir khan actually transformed himself from a fat guy to actually uh like a muscular guy right but is amir khan a different guy no he's the same guy but he's transformed so that's the concept so your object your values are sorry your object remains same but while displaying those you are displaying that in a different format that's what you can achieve don't try to actually update something using pipes right so the whole concept is transformation you can do transformation using pipes not your data manipulation or something else so let's see a few built-in pipes which we have available and what we will do is we will take an exam we'll take a table because probably we'll find different values in this table so we can actually use transform here so let's see i'll go back to ecom product place and let's go to html and let's start using uh each and every type so we have lowercase uppercase and title this let's see so we have name so i can do pipe so here not here here right so we have name product name what i can do is i can use pipe symbol so this pipe which is available on top of enter key probably if you have the same keyword uh yeah so uh he applied that diet out as a pipe and then you can just do upper case right for example you want to convert everything to uppercase so you don't have to do anything else you just use uppercase pipe and everything is converted to uppercase similarly if i want to do it only if you want to convert in lower case i can just use lowercase pipe and everything will be converted to lowercase if i need title case so i can do title case and everything will be converted to title case so in title case the first character is capital and all the remaining characters are small so these are three uh initial uh right so initial pipes which we have used now we have date currency which is in percent and slice and a single so a sync pipe is something which we will use when we speak about observable so it's not going to be covered right now but let's talk about others so first let's use currency so here we already have price so i can use currency pipe here and by default the currency is a uh sorry your localization is e and us so you will find dollars in case i want to use something else you can just pass it as a parameter so in you have to pass the currency code so angular gets the data from i think uh some website where all the currency codes are mentioned and they just pull the data from that particular source so you may find that probably your currency code is not available and you can you will find you will find that okay rather than the currency code you are just getting the currency uh value for example inr right so for for example inr has a currency uh with course currency symbol which is available on that particular website and this is the rupees involved right so i can use rupee symbol without doing anything i have to just pass inf for example if i want to use euro so i know the currency code is euro so you are uh gbp which is great bitten pounds as now they are out of the euro so you can use pounds as well so but by default it's dollars so let's make it iron and and also uh okay i will talk about that later but we also we have already seen jason let's see percent so so remember one is 100 so if i see this uh one value which will be hundred percent two hundred percent three hundred percent so make sure that in case you have a numeric value and you want to convert it to percent then you are using it otherwise if you have just a value and then you will be converting into percent that will be a problematic uh value right i mean it will be incorrect value so percent is done and let's go back to date because of course uh this is really important and this is where we'll talk about few more things as well so by default date if i see uh we have the date was actually long date format right so if i just give a date it by default uses short date format so it's like this one is short date format and you can go to angular dot io and you will be able to find uh these uh different combinations for your date pipe so i can just go to date so did pipe and it will give you okay these are the values so there are two ways you can actually use uh date pipe you can all you can either pass a format for example dd mmm yfy so this is one of the date format [Music] right so you have 01 jan 2021 or you can also use short sorry options so for example if i want to use this format rather than actually giving the format i can just copy this and use this here can we pass custom formatter yes you can extend the date pipe itself so probably when we write our own pipe i can give you an example so this is this is an exam this is this date format medium date format which is available here so uh choose one in case uh which is if it is available do it format which you are looking at if it is available here you can just use it from here in case you want to write your own yes you can do that you can extend date pipe so probably for later on so and you can also do one more thing so here you can also chain multiple pipes so for example i can just use date and then i can say uppercase so all the strings which are available in date will be converted to uppercase for example jan right so if you see jan was small now it's jans in capitals and as well as am and pm so you can go ahead and do that as well so you can just pipe pipe multiple uh pipes for whatever you want to apply that's absolutely fine that's acceptable and most of the pipes also con like contains this properties you which you can pass after the colon so this is your this is your properties which you can pass and uh not all the pipes actually take those properties for example if i go to the implementation of percent let's see ah it it contains i think it uh takes the string digit in for how many uh digits you want to display so you can see an example i'm an implementation here so every pipe will have some some properties to show so for example date date has paid and then you can also pass string you can also pass number and then you can also pass the format time zone these are different properties which which your date time can take and you can build your own so ah now we have we are done with date currency json already seen percent slice so let's see an example of slice pipe so slice is something which uh we can use to actually render some specific rows right so in case you want to apply uh filters right so if you want to apply filters this is something where this can be very useful so let's right now we don't we are not writing your our own filter let's take an example by using slice sorry not here so how many records we have in our table zero one two three right so three records i can apply a pipe slice and then you can give uh the start index and then you can give uh an index so i'll say okay display uh the values from zero to one and now you will get only one record right so this is this is the first index which we are getting uh display from one sorry one two two so leave the first record and display the next record right so this is this is how you can also use slice pipe but always prefer actually sorting and filtering at the server side in case you have large database large data to work with so but of course slice pipe is also available in case you want to use it so you can pass start index and index and it will just slice uh the records and it will show only those records which are available or which comes within that particular index values so i'll just remove it okay so these are these are few built-in types which we have available as we said the sink is something which we will talk about later and the next thing uh which we have is view encapsulation so let's see that and two minutes added on okay let's see if i can use something from here yeah let's take our example of product component and we will try to use the different view encapsulation mechanism which is available here so uh let's go ahead and apply okay because it is really important to understand where uh and how it this will encapsulate different view encapsulation techniques can be used so first one is emulated so but how to change this property so let's talk about that first so every component has this property called view encapsulation encapsulation not view encapsulation and it takes three properties of three values sorry so you have none emulated and shadow numb by default it's emulated it's not none right now if you see none and it has star because it is vs code is saying that most of the developers use none as encapsulation i hope you understand this star so uh visual studio code actually uh take collects the data from github and it checks what many developers are using so if you see if you are if you have written even node.js code you will find that sometime when you do dot you will get a list of methods with star in it because it says okay these are the methods which are high which are most uh mostly used on the internet same for if you remember we did for few children then we said dot and we got for each uh changes so that's how it is uh i mean just to give you an idea about what that star is so by default the encapsulation is emulated what this simulated is so let me uh just make it default i mean it's already default but let's talk about the simulated first because it is the by default and uh most of the time we don't worry about the default values right because it's default value so why why do worry about it so so talk to talk about emulated encapsulation technique and this is for styling sorry the most important thing i have forgot to tell you that this encapsulation is for your styling and uh just to give an example what i will do is i have i have an h1 here right so if you see in app component.html i have h1 and i think i have h1 available in many places so what i'm going to do is i'm going to write a style for the h1 element which uh or h1 tag which is available which is not available here but let's let's make it available right so i have an h1 tag here so i'm i'll write a style for this so i can say h1 sorry right so i'll say h1 and here i can just give back i am not an expert in css or sas so i'll just play with the values which i which i know so here i'm going to use background color and i'm going to use background color as still blue because that's blue is my favorite one and then i can say color which is uh white right so still blue is background color and then we have font color as white so let's go ahead and see this okay so we have multiple h1 elements available on my entire view right now so if you see this is also h1 this new title is also h1 but why this styling is only applied to this h1 okay so let's go ahead and talk about this to understand the default emulated mode so whenever you create a new component here what angular is going to do is angular is going to attach a attribute to each and every component by default this is what happens in emulated mode so if you see this ecom product right so ecom product has this uh ng content wisc21 ecom header has different one the ng content wisc 19. so these are different attributes which you will find on each and every component even on your route you will find okay this is ng host the blu i c 21 and in in order eco model right so you can see it's ngc content wsc 21 and then uh ng host wisc 16 because it's like this in this is something which is dis rendered inside the same uh ng container right so you will find but you you'll find the different attributes on each and every component this is the magic which happens behind the scenes you don't have to worry about it and that's how your stylings are maintained as well so let's go ahead and see the style so if i inspect this h1 element you will find that okay this h1 is actually applied to this particular matching element so ng content w o i 7 19 so where is that ng content wos 719 so this is the h1 to this which to which it will be applied so if i see this h1 it has ng content w c17 so it won't be applied to this so that's why actually you can write different component and you can style the same element in a different way in a different component that's possible because of this dynamic attribute which gets added by default so that's also the reason that you are in angular you can have separate styling for each and every component by default they will never conflict in the emulated mode remember this so in case you have a global styling defined for example say here right so i can just use uh h1 also here and then i can just background color in case uh let's use tomato right and font color as white so you will find okay other all the other h1 right now because i am doing it in root right so this this ford is available inside root what happened to this okay it's compiling so this code is written in root so you will find that all other h1 tag has background color as tomato and text as a red or sorry white but only this element or this component has a different color because we have we have defined the different properties different h1 attributes to this particular element this particular component so that's how you can override i mean in case you want to in emulated mode this is something which is in humiliated mode and which is default by default default by default so i hope you understood the emulated mode and now let's talk about next one so uh you have none and shadow down so uh none is widely used by all the uh third party components who wants you to override the styling remember this earlier i think let's go back to angular materials because in angular material when it was created the default mode was emulated now if i go ahead and check so let's over and do what is that components src let's check one of the component which we have probably autocomplete and that's autocomplete.ts so we'll find okay uh this encapsulation right so you will find it as none and it has an advantage that now developers can go ahead and override this particular uh coin overwrite the styling for this particular component in case you have used angular material before the only way to actually overwrite the css was ng host how many of you have used ng most i'm sure many of you so now you can actually avoid using ng host by because it actually gives you encapsulation view encapsulation as none it means you can go ahead and overwrite the css itself so let's take an example and here the same product component which we have right so uh right now we have this h1 as background color still blue color white and then we have this encapsulation as emulated just make it none so let's make it none and see what happens now once you make your view encapsulation as none you actually add this particular property in your global score remember this so right now what we have done is we have added this particular property in your global scope so it is actually changing the background color for all the h1 elements and of as well as font how it gets managed in other reusable components let me just tell you that and then we can also see an example where we will override it right so here we can wrap this particular h1 element using so i can say okay there is an there are two ways so one is of course i can give as give it as [Music] the same example i mean post and then i can give a class name so if you see this uh i'm not actually something not i am actually doing it this time this is something which is actually available here so you can give an host selector to your component so i'm giving a post class name here so i'll say class and let's see what happens after this because that's really important to understand and then i can see this ecom product and now once we have done this let's go back to our view and see this what happened ah because it needs few more changes so i can say this is a host and then i can move to such one i hope i'm writing the correct syntax but yeah so let's see this example and then uh i'll show you one more example using b e m which we know which we call it as b e m so here what we have done is we uh here let's go back product information why it is different product product product yeah so you can see uh we actually have a class ecom product which is getting added on top of ecom product it is available right and now i don't understand why i think this i am confused with the syntax of sas because as i said i mean i'm not an expert into it but i think this should work so host h1 oh my god what's wrong here why it is taking the global one i should be able to actually wrap it inside this okay let's do the other way probably as i said i am not an expert in sas but click on product and let's see if this one say okay so this is uh this is what i wanted to achieve just to uh just to give you an idea so what we have done is rather than actually adding this sas or the styling remember with none what happened it will go ahead and add this styling into our global scope causing an issue that all the h1 elements actually were updated to background as still blue and color as white now what we have done is we are wrapping the h1 element with an extra class which we have applied on top of our component so if you see this here by using this host attribute post property we added and class called ecom product which is same as our selector and then we added into this and after that i wrapped the css or property of h1 with this particular class so it will say okay this ele this it will look for an element which has class property as ecom product and all the h1 inside this element by using it we will make sure that this particular styling is actually not leaking to other components but whatever new element which we add inside this component will inherit this h1 and let's see how to override it that because that's important right and you will find one interesting thing here if you remember earlier if you see h1 there was an dynamic property which was added here right so uh this ng content olm or whatever the dynamic property or attribute name was there it is not there anymore so it says ecom product and it the h1 inside ecom product will have this background color as still blue and this is the color and this is the default one this is the global one and this is getting overwritten by this particular properties this is what the styling thing here which is available is telling you so this is the default one and this is the one which we have written but this also is actually available once you compile your code this styling will be actually available in your global scope so it means once i create my component and i expose it to someone else they can also go ahead and overwrite this as css as well or css as well so let's try to do that inside this one command component.css so what i'm going to do is i'm going to access the property same this one because right now if you remember the product component is actually getting rendered inside the command component so let's see if i can make it work and let's see so i can say dot ecom product and now i will uh use different colors so i can say okay this is a blue one and this is white let's see let's hope it works okay it didn't let's see why so ecom container and then you have ecom product inside this okay so it has to be like this one so i can use host here same let's use class ecom comment and then you can use ecom comment i'm not sure if i'm doing it in correct way but as this is as it works so what we need more than this so i can uh i'm saying inside e comment ecom comment find an ecom product and still doesn't work so let's see what's wrong here so this is your container and why this ah sorry i'm actually applying it on wrong component itself so let's go back to our container component and let's get rid of this first and then if it's needed we will apply it let's see format document okay so uh we it's it's not working so let's see what we have ecom product and then the h1 and actually this is not getting considered and now let's use the same one right so i can just use host property here so and then you can use a class and wrap everything inside a class and then i'll just use the same name ecom container and within a css i can just go back and probably use same one let's see if it works so format okay let's see uh what it is so first it will look for an element uh which has class container and then it will look for a element which has class ecom product and then it will apply the h1 okay why still it is not working let's see this is strange so we have e com container then inside this we have a com product and then h1 okay i think child component is still taking the precedence why actually i can go ahead and strange i mean it should work but somehow as i said i am not good into sas this is something which is happening but you can actually do that so once you export uh expose this element to your users right so they can actually they don't have to use the ng uh deep right so sorry i earlier used the wrong name but it sends it deep which you might have used to actually overwrite the styling of angular material but you don't have to do it that anymore actually all the components all the angular material components they use view encapsulation as none so you can go ahead and overwrite just by using the class name so uh class name is generally your component tag name itself so if you see the selector property you will find the class name to be same as your selector property so you can just say dot your selector and then you can start applying the new styling which you want to so this is what happens in none i'm sure this is i couldn't make it work because of course some knowledge gap which i have due to sas but let's try to apply this in your global one and let's see what happens here so i just move the same sas into same css into global one strange probably hmm if i can do this one if i remove just right now okay okay okay so it will always take the precedence from like its own component that's that's might be an issue so right now if you see i'm able to actually provide a new styling to my h1 by using i mean so the syntax which i have used is here so ecom product h1 and then i'm applying this styles to my h1 tag which is available inside ecom product so this is something which you can use and let's go back to the shadow dom so have you seen any component using shadow dom so because there is there is one i know which is ionic framework so if i go to ionic framework capacitor so any framework actually uses the shadow dom by default so if you see this code base probably if we can refer angular and src directives providers type schematics navigation versus school it has three components as well i'm not sure where they have core so components let's see i think okay all the components are actually uh ta6 yeah so but uh ionic frameworks is something which uses shadow dom and shadow time has a different use case altogether let's go ahead and see that here what i will do is i will apply this apply the shadow dom to this right so let's see so encapsulation which is view encapsulation dot shadow dom so see and see what happens when we do or make it as shadow dom so you can see uh once we apply uh a shadow dom to an element you will find something strange not here but this styles so you can see ecom header and then it has shadow root and then all the stylings are actually applied inside this particular component itself so it won't be uh so it's like in case you have some components and you don't want anyone to actually override the styling you want this look and feel to be same you can go ahead and use shadow dom that's what i think ionic framework does because in ionic framework you won't be able to change the most of the stylings they you can do it they use they use i think uh css variables i think that that's the one way to actually override it but all these styling will be actually wrapped inside your own component so if i just apply some something here right so let's say h1 and let's use different color now background color which is let's say aqua and let's use color as black let's see this so you will find okay and now this header has this background color and this text color but let's this this is not the important one but the importance is this so you will find the styling will be wrapped inside its own component itself so if you see emulated mode it's like it's it's still available inside your global scope with some uh dynamic this uh attributes which are applied but in shadow dom you will find that everything is wrapped inside its own component which actually uh that's the use case in case you don't want to apply or don't want to override or don't want anyone to actually overwrite the look and feel of your component one way is actually i'm sure you can do that by using inline css variables are not in line but css variables is one way to override it and if you go to the angular document ionic documentation you will find there are few properties which are available and you can actually override it by using this so you'll see ionic framework and let's see docs angular but other frameworks other your ui library like for example angular material uses v encapsulation none uh your nzx bootstrap and g bootstrap they both use uh as encapsulation as none so here let's see i think we have some components available here where is the list of components react angular components ionic but ion button yeah css yeah this is this is the css custom properties so they allow you to actually override it and by using the css custom properties so one way to actually do this is by using this custom property css properties but remember css properties are actually not supported in the older browser but now no one is using the older browser so in case probably if you don't have requirement to use angular i support i11 you can go ahead and use css custom properties as well but a lot of angular application which we have which i have seen is they use sas i think uh what about this angular material what they use they also use sas looks like yeah they also use sas because they are using something from angular uh sorry material um right so material is uh which is which is by google itself so um so this is this is it for the day i think we encapsulation was the last point we wanted to discuss and then tomorrow we can start with dependency injection and we will talk with we will go through services and what are what are the different things which you can do using services so yep that's it for the day uh and we will meet again tomorrow same time and apart from that of course in case you find any value in the stream please go ahead and talk about it please share it with your uh colleagues your probably uh your juniors who whoever wants to actually learn about angular and yeah that's it that's it for today see you bye bye fun

Channel: Tech Talks With Santosh

Views: 210

Keywords: Angular Content Projection, ngcontainer, ngtemplate, angular pipes

Id: EoC_NVZpppk

Length: 100min 28sec (6028 seconds)

Published: Sun May 30 2021