Building a Netflix-Style Header in Angular: Best Practices, Renderer2 & Change Detection Explained

hey everyone welcome back to my YouTube channel so in this today's video I will be talking about how to create a header component something similar to what Netflix has so if I show you the Netflix website so that's how their header components look like if you see right the header is transparent at the moment and once I scroll down can you see the header got changed to a BG dark color okay so if I scroll down scroll up can you see the change in the header color so that's what I'm going to implement today in angular but in a very correct way so most you can have a question that why I'm trying to teach such a easy topic today in my video but trust me guys I have seen a lot of quotes where creating such a header component in angular they're not doing it in a correct way so I thought of I will demonstrate both the ways how this can be done I've also tried a chat jpt solution to do something similar but again the result was not that so good so I will be demonstrating everything in this video so so I will highly recommend each one of you to stick till the last so that you can know know how to create such a component in a very optimal way I know you all must be excited now so let's get started all right let me just show you what I have currently for now so here you can see I have this HTML which has the BG white and Border gray of 200 that's how this guy looks like this guy so now we have to change this okay so what I will do I will go in the header component. scss so I have to first create a two class the first class it will be the dark nav and in this dark nav I will have to create a background color and and the color of the text should be uh FFF so that it is white and I will just add a transition to it which will have a background color transition okay of 3 second and the second class I want to create here is my shadow okay so this will be my shadow nav so here I will make use of the background image and I will just add this particular linear gradient uh which I got it from the Netflix header and again I will add a transition to it and this will again have a background color transition of3 sorry background image of3 okay and let's save the changes so now I have these two classes ready and if I want to show you like how it look like so let me remove this guy which is the background white I will change this guy to dark nav save the changes and let's see on the browser how it looks can you see this becomes the black color and if I change this guy to a shadow then that's how it looks like okay I all I want to do is I just want to change this Shadow MD I don't want this Shadow to come to the header itself okay now this is much better so now what I want to do right whenever user Scrolls right I want this guy to be on the top sticky on the top so to make it sticky right what I will do I anyway I'm using Tailwind already so I'm using the sticky of tailwind and I want to make it as top zero okay so I just make top zero and it should work now if I scroll down can you see if I scroll still it is there on the top okay now what is the next change I want to do whenever I scroll right I want to change this guy from Shadow to dark nav okay so I know what most of you will do so you will just say that hey Shashi how about adding a NG class over here and that NG class will handle that okay so that's what I'm going to do for for now so to make use of the NG class you need a Boolean property correct like based on that Boolean property this will show Shadow nav or it will show dark nav okay so let me add that logic here so I will create a method is bottom or something like that you can create any method with a false and I will make use of a host listener now okay so I will make use of host listener uh Whenever there is a scroll happens this will listen to it and on that listen this will call this method on scroll okay and with this on scroll right we have this window do scroll y if it is greater than 10 okay if it is greater than 10 then make this guy as true okay so based on that if it is less than then this will become false okay so you can try to know like what this guy does you can do a console.log just to check what this guy does but this will return a true or false value if the scroll Y is greater than and 10 which means this becomes true and if this is true I want to apply a NG class over here which is dark nav okay so to use an NG class right here I have to import so anyway I have a common module here so I can make use of NG class so I'll just go here and let's use NG class so I add NG class and I will say is bottom okay if is bottom is true then what I want to show I want to show dark nav correct if this guy is false which means this is on the top so what I will show I will show Shadow nav okay and this guy I can remove now so no need of this so if I save the changes if I save all the changes yeah compile success let's go back here and now can you see if I scroll down can you see I get a black kind of a nav bar correct and see that's how easy it is to create such a header in angular okay and now this gives you something similar effect what uh Netflix has but do you guys really think that this is an optimal way to do it because here we are making use of a v uh we have a host listener which is always listening to the window event and this window event have this scroll every time this runs the scroll okay let me show you the profiler here I'm using the angular def tool here and inside this I have this profiler and this will actually triggers your change detection okay so let me just check like how what is the impact on change detection if I scroll right see the moment I scroll this is hitting my change detection every time can you see this every time it hits my change detection so what do you think if if this is a good solution or this is a bad solution you can decide by your own because this guide triggers your change detection every time I scroll okay and this was the solution what I got it from chat jpt as well and uh trust me I was not happy with this solution so what I did right I tried to improve it more a bit more and let me show you how I can improve this now so to improve this what I did the first thing I have installed angular / cdk so let me install that package okay this is angular / cdk hit enter and let it get installed okay so this got installed now let me import few things let me remove which is not used okay now let me import few things from import because I don't know the name so I will have to write it down this is angular SL cdk I guess okay let me just angular SL cdk SL something called as scrolling yes this is what I was talking about and in the scrolling I have something called as scroll dispatcher yeah this guy so I will be making use of this uh scroll dispatcher okay so in this scroll dispatcher we have something called as scrolled which returns an observable Whenever there scroll happens in your website also I have to use something called as uh there is something called as view let me just check for it there is some viewport yeah viewport scroller okay so I will be using these two guys to get this job done in a very optimal way let me create the private property for the both both of them basically let me do the dependency injection here so so this I will have to do and I will make use of the inject okay uh second property is nothing but your view scroll Port again so that's what my two properties are ready now I will be using a very big Trum card what I always say the renderer okay so now I will make use of the renderer to get my job done okay and let me inject the renderer as well okay let Quick Fix okay so now these three guys will help me to get my job done in a very correct way now let me make use of um on in it like after view in it because this is related to something called as view okay so I will have to import after view in it so that I can do the changes in the life cycle hook which is the wait let me just show you what is what I mean so I have to do the changes in the FG NG after view unit life cycle hook so let me take this in the bottom now what I will be doing I will be making use of renderer to attach the class okay on demand okay so rather than I'm doing it from here by using NG class what I will do right I I will make use of renderer to get this job done so let me remove this guy from here okay and now I will go here and I will make use of a template reference variable which is my header okay and I will make use of angular's New View child okay so what I say this is my header element okay so I will not be doing document dot okay this is wrong so I will make use of view child okay and this is my header okay this is what I'm targeting from here so this header and this should match here okay so that's that's how I Target and this is nothing but your new way of and new angular queries which was released in version 17.3 so that's what I'm using here if you are not using version 17.3 then you can make use of AD theate view child decorator or something like that okay so now I have this header element I will go here and let me remove this so whenever my page loads right I will make use of this header element sorry the renderer dot I will first add a class so add class and in this class I will make make use of this header element now this is my signal because this guy returns a signal so that's what you need to add okay so signal dot native element okay this is not able to access native element because I have to specify that this is my element ref okay element ref the moment I add this I will be able to use the native element now okay and once I add the native element what class I want to add whenever my page loads I want to use a shadow okay Shadow nav let me see if the changes and let me show you how things looks like on the browser so so now can you see whenever I reload the page right the first class which is attached to the header is my shadow nav and this has been done from this particular line okay now I want to access the scroll event okay so for that I will be using this dot uh what we have right on the top which is scroll dispatcher so this guy has something called as scrolled and this guy returns an observable so I can say do subscribe and what I can do right so whenever this is subscribed uh inside this particular we I can write my logic okay so whenever it the scroll happens right you can check it over here in the console that if it is happening the scroll or not so if I save the changes right you will see some uh some logic over here now let me go here and try to scroll can you see this is uh triggering the scroll okay so now what I want to do I want to write some logic over here so what I'll do let me create a method on scroll okay and I will call this method in this subscribe so whenever it subscribe I will call this on scroll okay so inside this on scroll uh first thing I want to get this scroll Y correct so but I cannot access the window now so I will have to get it by using viewport scroller so I will say scroll con scol Y is equals to no I don't want width now so I will say this do withd viewport which is my viewport scroller dot get scroll position and I want to get the Y position so if you see over on this right can you see it returns number comma number which is array of X comma y so I want the Y position so that's why I say I need the second element okay so now that's what you get scroll y now I will also create one more uh property which is my should add add dark class something like that and what I will do right if my scroll Y is greater than 10 then this becomes true okay so let me rename this this should be dark not Drake so this is my should add dark class and this will return like this will become true or false based on this condition now I have to uh remove an add class okay based on this condition so what I'll do right uh first of all I will check if I have the header element which is this. header element which is my signal so that's why I use this bracket now okay so just below this I will make use of this renderer dot I will first say remove class okay and can you see this is how my element is attached already so this is a remove class from this native element which one I want to remove I don't want to remove I want to check based on the condition okay so that's why I have this should add dark class okay if the dark class is true right then I have to remove the shadow n or else I have to remove the the dark okay and on the next line I will do the uh what we say the opposite of it which is this do header element which is my signal do Native element okay and now this one I will be doing the reverse okay so now this will remove and this will add okay based on the condition I hope this will be clear to everyone because this is just based on the the Boolean property you add and remove that's it okay so once you did till here now let's save the changes okay let's let's go back on the UI okay and now can you see now I already see a black color because my scroll position is still here if I go back on the top can you see now it becomes Shadow if I scroll down a bit can you see once I once it get the height of 10 this becomes dark same okay if I show you here can you see if I scroll down this becomes black and if I go up it becomes Shadow can you see we get the same effect but that's not the case right as I have promised that we will be doing this in optimal way so let's also check the angular profiler what it says okay now over here let me again choose this start recording and now let me try to scroll and let's see what happens can you see nothing happens because now it doesn't hits your change detection okay and that's why I called this as an optimal way to create such a Navar bar in angular so that's it from this today's video where we have learned how to create a Navar like Netflix in a correct way in angular if you guys find this video helpful then please give a thumbs up and consider subscribing to my channel for more such content around angular and.net if you want a Blog version of this video so that that you can find it on my let's program.in blog so here I will be writing a Blog soon about the same topic along with the code Snippets so over here you can read a lot of blogs about sha angular about Linux about JavaScript and whatnot if you have any suggestion for me that I should be start following on my YouTube so do let me know that in the comment section as well so till that time goodbye and keep learning guys

Channel: Let's Program

Views: 289

Keywords: AngularDevelopment, WebDevelopment, AngularTutorial, UIDesign, FrontEndDevelopment, NetflixUI, AngularComponents, CodingTutorial, LearnCoding, TechTutorials, SoftwareEngineering, WebDesignTips, DeveloperLife, ProgrammingBasics, AngularTips, Angular, Netflix Clone, Web Design, Responsive Design, User Interface, Angular Renderer2, Change Detection, Angular Guide, Modern Web Development, Interactive Web Components, Angular Best Practices, Angular for Beginners, Advanced Angular, UI Components

Id: YHZ6kdrOPK8

Length: 13min 53sec (833 seconds)

Published: Wed Mar 27 2024