Netflix Clone using Angular | Angular tutorial to build Netflix Clone | Angular with Tailwind CSS

hey everyone welcome back to my YouTube channel so in this today's video as I have promised that I will be coming up with a Netflix clone by using angular so this is what this video is all about so the first thing what you see on the website is that Netflix signin which is done by using Google authentication so this thing I have already completed it in my previous video where I have like you can find it on my YouTube channel that how to do Google authentication in angular project so once you are done with this video so you will have something like this what I just showcased it right now so once you till here so what we will do once we click on login and once the sign up is sign in is Success so this is what you will see that we will be creating this beautiful header on the top what you see something similar like Netflix and uh after this what we will do we will try to create this Banner component also and I'll show you what is the best way possible to create reusable components in angular okay so we will be demonstrating that also and just below that if you scroll right so you can see the list of movies based on their categories like for example popular on Netflix so you can see all the movie list here and these all are my corosal component what I have created by using a package swiper.js so I will showcase you how to use swiper JS in angular in a very effective way also not just that uh I will also demonstrate how do we use this CSS animation in Tailwind so that you can find this beautiful hover effect and also to fetch all these movies so this is all movies we are getting it from tmdb API so I will also show you how to create a account in tmdb and you can register it to get the authenticated token which is this header so once you have this I will show you how to set up this and how we can do a API call in angular to this tmdb okay and because this tmdb API provides lot of uh data to us like for example favorite movies then uh we can see the TV list the popular list uh people list what they like based on countries and all that so this is what we can do by using the this tmdb API so I will try to demonstrate that so that by using it we will get all these categories related movie like for example popular on Netflix trending TV shows now playing movies popular movies top red movies and what so get ready to be a coding visard and impress your friends okay so we'll keep this thing simple but also uh show you some fancy tricks to make your Netflix clone not just work great but also it should look awesome too correct so grab a snack and hit that subscribe button but and let's make a Netflix style website together okay so don't forget to like share and tell us what you think in the comments below all right so now let's start the coding and make your website look like as cool as Netflix okay so this is what we have completed in the last video where once you log in Successful by using the Google authentication so you get something like this and if you click on sign out and you will go to this page again so what I need to do right currently once my user is authenticated I will go to the browse page but in the browse page I need to create a header first so let's first Target the header component in angular so for that let's open up your vs code and let me open up this Source in the app so now what I will do right I'll try to create the folder structure first so what I will do let for that let me it will have my first folder as core where I will have all the core components uh then I will create my feature component or I can say page component so I can say pages and the last one will be the shared component so for that I will have this shared folder okay now what I can do right this login Bel belongs to this login page goes to the page okay and also this browse goes to the page as okay so now we have just changed few things here so now in the pages I have two page login page and browse page and now in the core component I will create two things that uh first thing I need is a header and in that I will have components and services so for that let's create components so folder so I will have components okay and also I can have some Services core services so let's create that also so open up this core folder and I can create a folder Services okay so that's how this looks like so in the core I can have component and services in the pages I have two already so it's fine at the moment and in the shared folder again I can create component so let me create a component folder okay and this shared can also have directives so let me create a directives folder okay so this is how the folder structure looks like at the moment so now if I remove everything that's how it is Source will have app in the app I have core I have page and then I have shared okay so what we can do right shared can also have services so let's create the services folder and now what the odd service we have created we can copy this odd service and place it in the services folder okay and this is done and I can delete the spec file because we are not doing any testing so let me delete so that's how my folder structure should look like for our Netflix clone all right so here I have core pages and shared all right so just one thing before that like whenever I was moving the folder right so one thing to note that uh this path was by default getting corrected by angular because it has asked me a question that do you you really want to replace the path Imports as well so I said yes so that's why I was not getting any error whenever I was moving the folder okay so make sure that whenever you change the folder structure so you need to also make it correct wherever you have imported it okay so once that that is done what we'll do we'll start with creating of the component creation of the component so first component we need to create inside this core and in this components folder so to do that let's open up a terminal and hit the command NG GC for component and we want to create component inside this core SL components and then the component name is header okay so that's what I want to do so let's hit enter and a header component will get created see here now I want to create one more component which is footer component or I can say a banner component so we can create as banner and if you hit enter so you see one more component got created here so now I can see I have two components inside this core folder okay why do I call it as scoree because if you see right if you see a header is only one time used so if you see any web application suppose it's a Facebook application the header is always constant okay so that's why that belongs to a core component okay and in future I will be creating some component inside shared so I will show you why I'm calling it as shared component okay so once I create those component for you okay so now let's go here in the header component and try to design it so right now it looks quite blank so as you already know that we have already installed and configured tailin CSS so I will be using the tailin CSS classes so first thing let me create the header and in this header let me add a class so the first class I'm adding it as BG meain I'll tell you what is this for I'll because I need to make it a black color so that's why so the header will be sticky and top will be zero okay now just below the header I will have my uh logo plus the nav items so let me just create that so this will be nothing but my logo okay so this is logo plus the navigation items okay so let's design the logo and nav items below so to do that I will create a div so let me create a div inside that I will have a image and after image I will have one more div and this div will nothing but my nav options for example home about us contact us and all that so this is my div and these are my two separate things okay so now let me just show you what image I will be using so for that uh I have already downloaded an image okay so that image I need to put into my asset folder so let me just grab that image so I have a image already so maybe I will share the link L it with you with the GitHub link so that you can find this asset folder from there so I will be using this uh Netflix logo so that uh it will be visible so let's do here that let's add it from the assets so to do it right so we can say slash assets slash and to get the name right so what you'll do you just rename it and you can copy the name of it so copy the name put it here and give the extension. PNG okay in the alt you can see that this is Netflix logo okay so that's how the image looks like and we can give a width to the image from here itself so let's give the width as 110 okay save the changes let's see on the browser how it looks like okay so right now see there is nothing visible because we have still this component there so that's why so let's go here in your code and the header is created right so we need to show it in the browse component so let's go in the browse component and import the header so to do that I say header component import so this is how it is so you just see on the top it is imported success F now I can make use of it by using it selector so I will go on the top so header is always on top so let's go on the top and here I can say app hyphen header just to see how it looks okay save the changes from here both the places and let's see if it is compile success yes now if you go back on the Chrome so that's how you see your Netflix logo on the right on the left hand side so as you can see there are two ways by which we can do it so first thing let me show you the way how we used to do in CSS so for BG right let me create a class BG me okay so BG mean is created and what we'll do we'll give it a height as 68 pixel and let's give it a z index Z index of 10 at the moment save the changes and now I had one more which is dark nav so I'll say dark nav so which is my black navigation panel that's why so let me give a background to it as # 141 1414 okay which is a black color okay and now you can add some acity or whatever you feel so you can do that so but let me save the changes and let me show it to you how it looks like so once you add that so it is not visible because we haven't use the classes there so we have BG main already but we also need to add dark nav so for that let's add it like this dark nav save the changes and it should be there now okay so can you see we have this dark nav created already now okay shash but we have a Tailwind configure then why are we using this CSS why are we writing the custom CS so I did that intens just to show you that a lot of people have a out like how to remember and how to recall all of this CSS because I'm quite good with scss and CSS but how do I add it is a class so what you can do right you can go on internet and you can just search for CSS to Tailwind class something like this Tailwind CSS okay so you can just go here and what you need to do right you just have to copy few things and just paste it here like for example here I have a class right like this so let me just go ahead and copy these two whatever I have created and I can paste it here okay so here you can see that you're getting a proper class how it should be okay so you can just copy paste and you can just use it directly so I can copy this okay so rather than putting it as BG main I can add it here okay I can save the changes and also for the dark nav we have something called as BG black I don't know maybe yeah BG gray okay and here you can see that I can apply any one of this CSS I can save the changes and now if you see right it's still the same correct so now we have this black color if if you want to make it more lighter so you can do that as well just by changing this numbers so if I save it so now it is little bit lighter but I think the dark one is quite good so let me keep that okay so you you don't need to add anything like this so I can remove this now okay so that's how you do with CSS if you don't know in the start so you can just make use of Google you can just convert it and you can start using it okay also once you're able to do this much right so now let's go ahead and try to create the nav items for here so I want to display the navigation items here so for that what I will do I will make use of array okay so I will make use of array here to display all the nav list so let me put here as nav list and this will have all the nav content for example I have home I have TV shows so that's how I have all this list of items here so let me make it GS okay all right so that's how I have my nav list so what I will do right I will make use of this op options and put it here so that I can display it in the list like for example U we have options right on the navigation menu to so that's what I will be doing so to display the nav list inside this div what I'll do right rather than div I can make use of UL Li okay and in this list right let me make use of ng4 ng4 okay and let's say that let item of nav list okay and in this you just need to do the string interpolation to display the items so I will just say here item okay save the changes and let's see how it looks like so as you can see I have all this list of items but I don't want to display it like that right so I need to add some bunch of tail vnd CS tail vnd classes so first thing I need to add it for here so I will add a class flex and flex okay Flex is fine so I need to make it item Center okay so item Center save the changes now h no change why let me just check that so to make some changes we need to put it here also something so let me add a class here again so the first class will be to make the colors and all so okay what I think right rather than doing changing this let's first change here because what I need to do what is my requirement currently this and this list are inside a div if you see this inside a div so this is the first one and this is the second one so what I will do right I will try to apply Flex here so if I say this as Flex so let's see what happens so once I added Flex so now it is side by side can you see I don't know because because of the black color you cannot say it but that's how it is right now this is side by side okay now let me add some colors to my list option so for that let me use that so I will add some neutral color to it so text neutral 200 okay cursor pointer and small text so for that I say text SM okay and we can save font extra extra light so that the font weight will be quite small okay and also I can add some hover effect to it like uh for example if I need to add some text color change so that I I can do by saying text Gray as 400 maybe and I can add some transition to it so for that what you just need to say transition okay so transition for how much second you can also specify that like for one second I want to specify the transition and save the change so once you do once you add all these classes so now you see so you will be able to see see if I hover the color also changes to little lighter okay now I don't just like it because I need some Gap so first of all I need gap between these two so I will put a gap by saying gap of five okay which is 1.25 remm and if I go here yeah that's how it looks like so now I have a pretty good gap between each of this okay and now I can see 50% of my nav bar is done okay now for rest of them again uh so this section is done which is logo plus nav list so not two things I have to do so let me just tell what is that so you need to show the usern name like welcome user and just after that you should have your user profile which is your profile image okay profile image and after that you need to implement a sign out button okay sign out button something like this so for that what we'll do right we'll again take a div okay a master div and inside that you will have a welcome user something like this a a tag uh which is fine at the moment like this and what you will say that with a span tag or yeah you'll have a span tag you will say welcome okay and just after that you can okay I can add a strong tag inside this pan itself and I'll say username which for me it's Sashi at the moment okay so that's what my expectation is and if I go here again it is coming down because uh I don't have that at the moment okay so welcome Shashi is there so I need it again Flex correct so now this is my master da and I want them also to be Flex so what I will do right this is one of my div and this is my another div okay so I will go here on the div and I will see it as Flex so let's see what happens so once I add Flex so this should be somewhere here if I'm not wrong let's see where is that guy oh maybe let me just change the color of it so that we this will be visible so if I change the class as text white to all of them so all of them will be visible okay so here it is now what I will do right uh I need it to be Center so I will say item Center save the changes so it should be in the center okay now once they are Center I need a gap between both of them that both of them should be between so I will say justify between okay save the changes and now they should be apart can add a padding X on both side uh maybe we can add it for about 10 pixel and so that they will maintain it a proper gap here and here okay so that's how my header looks like and now the next thing what I needed is that the profile image so for that I will let me add a image just below it the E IMG tag okay so for the source right currently I don't have it so I need to take it from my Google profile so oh that's good that I already have this URL correct so let me go here in this Banner oh sorry this header component. HTML oh no I think it's Banner let me just go in the banner and check if I have it sorry it's in the browse I'm so sorry so in the browse component we have already did a API call right where I have the user uh image profile something like that we are already maintaining it so we can get it from the session storage so if it is in my browser component what I can do right I can pass it to the child component here in the header so let me do something like that data sharing in component so what I need right I need a user profile so I'll make it as input so once I make it input this will be my required field that this is required or else it will throw error so let me say required as true and what I'll do right uh so this is my user profile image or I'll say user image user image this is of type string and I will initialize this as blank okay now what I'll do uh this you need to pass it here so let's go here and do it so this this is my user image user profile save the changes save the changes here as well and now if you go on the browser you should be able to see it once I will renter the image currently I haven't uh okay so the image is still not available because you need to put it here in the SRC okay so this is my user image save the changes after saving the changes as you can see I'm able to render the image on the top but I need to change the width of it so width I will make it as 42 and this is let's give that Al alternative this is user IMG save it and let's go and check so as you can see this is how it is at the moment and now after that I need to maintain a sign out button so let me add some space by using nbsp so there is something called as add the rate oh sorry and nbsp so this basically adds a space so that's what I'm just trying to be smart and use this let's see uh what it actually does just wanted to Showcase you something about uh the CSS uh the HTML things okay npsp so this basically adds a space okay that's what it does so if you go here and see it will just add a space with the line okay so we don't need to do this we can still do without it also but yeah it's up to you okay and then I can Implement a sign out button with uh this as a blank at the moment and this will be my sign out okay something like this now what is the problem at the moment it's all R1 below the other so how to fix them uh very easy just make it as Flex so once once you Flex them that's how they are I need to align all of them Center so I can say item center items Center and they will be Center and what is the next thing I need to do uh just add some uh Gap maybe so I can say Flex Gap okay Flex Gap okay this is not correct so Flex gap of oh sorry that's not Flex Gap it's Gap directly so I need a gap of four uh yeah just to check how it looks so this is better uh the thing is right I don't need gap between these two so I will wrap them inside a single div okay if you wrap them inside a single div so this to will be together and make this div as Flex okay and this will be items Center again so that's how they are and let me put a small Gap not a big gap a small gap of two so that's how they are and I already added a space here right so nbsp nbfc so I have two space here already and that's how it shows welcome the user sorry I have uh added the blank right the HF tag because of that it is going back okay let me log in Lo in and so that it will maintain the user image okay now that's how it is so now I have the welcome Shashi with my profile and I have nbsp space with aign okay that's how it looks like so I can say that my header is ready now my job is to make the banner component so let's see how to create the banner component so to create the banner component what we will do let's go in the SRC in the app and we will create that inside core okay so in the the core we have components this is Banner let's open up the HTML which is open here so to create the banner right we need two things okay so we'll first focus on creating the background video so that it will make so that what we will do that we'll make use of iframe with a YouTube video URL so that it will act as my trailer of videos or trailer of movie and after that we have to create a layer above it okay so that layer will act as like where I can showcase my title and description of the video okay description of the trailer something like that okay so do so right so first first let's create the iframe thing so I will have my iframe here and in this SRC I will make use of YouTube video URL so basically you will require something URL like this where you have http.www and after this you need to pass in the ID of a video like suppose you have a trailer so like for an example I can give an example right for example I want to show this trailer right so if you see on the top so on the top you can see that there is something called as uh the ID of that video so you can copy copy this and you can paste it here okay so that's what I did now once I did this right let's save the changes and let's see how the UI looks like so for that let me run the application so I did NG serve let me open up my browser and Here Local Host 420 let's click on sign in and now here I still see that because we haven't updated the what we say the component yet right so let's do one thing this is our Banner component which is created already so now what we'll do let's go inside your pages and the browse because here I want to display it so I will first goad and import the banner component so this is my banner component import so I imported successfully and now I don't require this right so what I have created previously the card I don't need this anymore so I can remove it okay so now just below that I will display the app hyphen Banner okay and now this should display something on the URL so let's save the changes now now can you see I'm getting a trailer here correct and I can also able to play this here see this is how I embedded the video okay so now what I will do right I'll have to make the like this should be like complete width and height it should take the complete width and height so for that what I'll do right I'll give some bunch of CSS classes basically of Tailwind so this will be my blue screen okay and aspect ratio I'll give it as Auto okay let's go here so now it takes the proper width of it so this is fine at the moment now what's next thing I will do right I need to uh specify the screen size also so I'll say Ed screen so Ed screen Mac so we have all these options right so we can say Ed screen so we should take all the height of this okay something like now what rather what I can do right maybe I don't need uh the I need some percentage not the viewport so what I'll say right view height so what I will do I'll just say here I frame okay and over here I'll give it as a width of 100% and I will give height of 100% okay and the position of this image will be absolute like the if frame will be absolute so that it will take the entire screen of it so now if I save it so I don't have any scroll bar here if you see right I don't have the the horizontal scroll bar anymore okay so now that's how this uh the page looks like now what I need right just below it I need that uh what do we say the the option where I can show the title somewhere here and description of this movie okay something like that so to do so right again let's take another div okay and in this div I will add the CSS or the Tailwind class which is Ed screen should take the complete height and BG white okay BG white you can add all right now just below this I will take the another div and in this div I will have have my H1 and just below it I will have my ptag which will be the overview of the movie so let me add some lurum of 50 okay some 50 uh words okay and then here I will have my title that uh animal I don't know this is correct yeah animal that's it okay save the changes now let's go and see how where is my data I still can't see it here right because I need to write some here some more classes so for that let me just put give some padding so padding I want to give as 20% so I can say padding 20% uh let me add some padding X of 6 and padding I think let's make it 24 okay uh padding six will not be enough so let me add 24 okay and then this will be absolute this will be absolute text I want to make it as white and let's apply a gradient color so by this this is the good thing where what I am teaching you right so here you can apply a gradient color so see there is some option gradient color two okay so I want to say two right okay two R means two right okay and after that you can specify the color from which color you want to say from black okay so that's what you can say here save the changes and let's see can you see now I have a black color kind of a gradient here and I can see a description oh sorry a title and a description let me specify some class to my title so let's make this as text 3 XEL or maybe 6 XEL a little bigger one okay and uh what else I can add I can add a font weight to it like font should be bold so font bold so that this is my title okay okay looks perfect and now for description correct let me add something okay let's add the class this should be inline block okay padding I can give it as padding one okay padding y six text I can give as extra large or text LG ex fine uh width I can specify as 1x4 okay which means 25% it will take BD and let's wrap the text so I can say Flex wrap so it will wrap all the T okay so that's how it is now so I have this title and I have a description over here okay now now you can see that you cannot click on this trailer and the trailer is not running correct because the problem is that what you need to do right so there are some bunch of configuration what you can add to your SRC okay okay I'll just show you one of them suppose for example you want to say it as autop play Okay so this will do autoplay so for that you just say here autop playay equals to one okay let me also mute it so mute should be one it should be muted and I can run the loop okay so to run the loop I will say Loop equals 1 okay save the changes is let's go here and now can you see the trailer is working on the behind Okay so the the trailer is working now now what I need right I just need two buttons here okay so let me add those two buttons also so just below this P tag right I will add those two buttons so for adding those button I will again take another div and this div will consist of those two buttons so button one button and one more button for let me tell you what is the description of it so this is my more info and this will be my play button okay so you can also add some icons or anything if you want so you can get that also let me add this at the moment so this will look like an icon for me okay so this is my play button and let's add some classes here so let's add a class so let's make it as PG white text should be black correct and let's give padding y as one py1 it's very small so let me add padding y let's add like padding on x axis should be 12 okay and let's make text as large okay rounded I want to create a rounded button so I will see it like this so let me just show you how it looks like see this is what I was talking about okay all I need to do is let me add some more hover effects on it so we can add some hover effect that whenever I'm hovering on it so the opacity will be little so just like uh Netflix so we will have this hover and on Hover I want to make the BG opacity to maybe 70% okay let's see so if I overr right so I'm changing the opacity okay if you wish to add transition so you can add transition also transition okay so you can add transition and you can specify it for how much seconds you need so that's how you can do so you can add some transition to it also that's it now what else you can do you need to do it for this one also let's again some uh we need to add some classes so for this one right let's first start with margin X okay so you need to specify the margin X so that there should be some gap between those two button uh let's add the background as BG gray so if it is gray then the text should be white correct uh padding X we can add as 12 okay let's add some padding y also padding y to 4 something and text should be large so text Excel same like the above okay and then BG we can add any opacity what you feel okay so for this one I will add a little less opacity so BG opacity because this is already gray so I will add opacity of 50 and this is my rounded button so rounded LG okay both are same so now if you see here right so that's how my play button and more info buttons look so now as you can see right now I'm able to see the trailer behind now I don't need this options to be enabled so that I cannot change all of this so to do that right because I should not be able to change those so what I will do right so again I can put here as one more and so this is what the configuration I'm trying to add so I can say controls okay so I can say controls equals to zero okay so maybe if I add that so I should not be able to use the control C I'm not be able to use the control now anymore all right so here if you see red our Banner component is ready and I just saw some small problem here if you if you have noticed so can see there is still there is a gap here where if I if I try to click here right so I'm able to do that so I should not allow it correct so to fix the issue right let's go in your code and what I'll do right in this div I will also add one more thing which is my height full which will give 100% if I over on this right I have height full which I need for this one right so save the changes and now if you go here and now you'll not be able to see that Gap even if I refresh the page when it was a white background you'll not be able to see so now that issue is gone so now you are not able to click it any okay now if you see right I did something similar here height full okay and I have added something similar class here as well for the I frame okay so you might be thinking why I have added like this so just to again recall few things right as I was telling you about the conversion so we have this CSS to Tailwind so what you can do right you can copy your CSS here and there it will help you to give this all the class name okay so that's why I always recommend if you are a beginner with Tailwind CSS and if you know CSS already then you should use this website and it will help you to do the transformation okay so now I can copy all these three name rather than using this if frame I can remove it I can go here in the HTML and I can put it here okay so now it has width full which is required it also has absolute and it also had hide full and save the Chang okay go back again and you will see the same okay so now it is working fine so now the next thing what we will focus right we will have to create the video corosal and to get those videos so we have to make use of the tmdb API so that is what we are going to do next so to get the tmdb API you just need to go on Google and Sear search for tmdb API and you have to hit the first link what you see get started okay so once you click here right you will have to create a free account your in tmdb and I have already created a new account so what I can do I just need to do login and once you do login right then you will have access to use all these API endpoints right here you can see whatever data you need right so you can access all of them from here okay so but before that you have to first sign up and then you have to log to this tmdb API so let me log in with my existing account so as you can see I have logged in successfully and this is my username and let me just go here on the API references now here if you see that all you need to do is you just have to pick your language you can see the header Valu is already selected and you can try it out all the apis okay whatever they have right you can check them here on this playground okay but what we will do right so now once we are logged in successful we have to do some configuration to use this API endpoints correct so what I will do right I will help you guys to how we can create this all this request right in angular so I will be helping you with those okay so let's go ahead in your angular and let's create a movie service all right so you're in the angular application uh let's open up your uh services in the Shar so let's go in the shared folder in the services and let's create our service uh the service name would be movie service so I'll give the name as movie Once the service is created let's open it up and now just inject the HTTP client so we have to inject the HTTP so let's inject that HTTP client okay so this is how it should be and and we need to do the import first on the top I think the intelligence is not working so let's say import import from adate angular okay/ common and we know that it is coming from HTTP so okay that's how it is and just write in the name of the class which is HTTP client okay now we can make use of this HTTP client here and that's it now we will be able to do API call but before that right uh to do the API call to this tmdb API we have to first create one option if you see here right so whenever we are doing the API call so here we are creating the API endpoint and we are creating an option okay and this option you know once you have logged in successful you will get this uh by default your token so that you can do the API call here so for me I have already did this so let me just show you how to do that so let's create a const with an option okay in this option we have to specify a few parms here so these are the parms what you can add for your movies and it all depends on you okay how you need it so this is what my parms are and now in this option I have to pass my headers and for this headers again we have to create an object and this header object we need to pass two things first is the accept property and another one should be our import so that's how the header should look like so this is my token provided by the tmdb and this is my except what I have what I was just saying that so this is how my header should look like we should have accept and authorization and in the authorization this is a be token so that's what you need to mention it here okay and now I can see your options is ready this options I have to use it whenever I'm doing the API call for example I'm doing a get call okay so I'm doing get movies all right and this get movies what I can do I can just say return okay just like how I do right uh in whenever I create API endpoint so we we have to say return this. http.get okay we can specify the type later on so let me put any at the moment and you know you need to pass your API URL okay and in this URL right once you have your URL and that you will get it from tmdb but but you need to pass this extra thing which is option okay so this option you need to pass with all the API call so now I need to add up this value here right this is empty so I need to add it up so what I will do right I'll go in discover and I'll go in this movie so once I click here right this is what the API URL is so I can just copy this everything okay I can copy till here okay movie and we can go here and paste it okay and now if you see right I am already passing the options right and I have this parms okay so that's what it is here showing so if you want to include some parents then you can do it from here also see you can add all the parms what you need so this is what I have added there already so you don't need to add all this include okay so this is what my option is with params and now I can do this API call so now what I will do right I have to call this API in my browse so let's go in the browse component and over here let's inject the service so the service name was movie service and we'll say inject and let's call the name of the class which is movie service okay and now what you will do right let's implement your on init and in this on init we have to definitely implement the NG on init okay but what I'll do I'll put it below because this is not good practice to keep it top I'll put it after all the property declaration okay and now I can do this dot okay I have movie service. get movies okay so I can subscribe to it so I can say do subscribe and I can check the response what I get from the API so I can just do console.log and respond okay so now once I save the changes save everything and let's see if the compile is Success yes now if I go here and now see it is it is failing because why we are using HTTP client right and maybe we haven't imported the HTTP client module okay so in the stand alone what you need to do right you have to go into your appc [Music] config.sys and now you will be able to use it okay so now see there is no issues let's sign in into your application so if I refresh the page let me do inspect element and let me detach put it below and now if I refresh the page I should be able to see that object okay so if I refresh I can see this page one and I have 20 results okay and here I can see right I have few data set here already and this data set I need to use it okay so I will be using this data set to create my uh movie list here okay so now to display the movie so as you know right we are using that corosal movie corosal something like that so I will be using some Library which is swiper.js okay so we can find it on npm okay so we will be using this swiper in angular so to use it right first we need to install it so let's go ahead and install this swiper so copy this and let's go in your project and open up your terminal and paste this npm install swiper okay so once this is installed what we will do right we will create a card corosal component in our shared in our shared component okay so I'll go in the shared folder in the component I will create that component for first so let's create the component and the component name is movie movie corosal I don't know if the spelling is correct or wrong but yeah let's see let's create that movie corosal component and again I need to make it as Standalone so let's say Standalone as true okay so that's what we have at the moment and also one thing I think I have created a different schematic so it is not creating scss file so let me change it with scss file rename it to sccss now this is perfect so now I have a component movie corosal with everything correct now what I will do right first to create that swiper thing that swiper has been added successfully first I need to create a container okay so let me have my code snippet and let me paste it here so that I can explain the code so here if you see right I have a container of a Dev and inside that I have added few padding and margin top with also a margin bottom of 20 okay so this is what I have a div and just below that I have my title okay so this will be basically the title of my movie and this is very important thing so this swiper container so I have created a template reference variable which is swiper container and I will be using the swiper container to do my job I will show you that how I will be doing it in the TS file okay but this is very important to add this template reference variable and I added this class as swiper container because I will be using lot of CSS for it to because I want to customize our existing swiper and this is how the how the code looks like for the swiper wrapper and inside this wrapper I will have a ng4 where I will Loop in all my data like for example the title The overview and the average of the movie and what let's save the changes and let's see if there is any issues in the compile Tye yes there is no such issue and let me go ahead and put it inside my browse component okay so as this is my component created so this is movie carousal so we can add movie corosal component and we can use the selector just below this Banner okay so I can say app hyphen movie corosal and save the changes okay let's save it everywhere and compile and now if you go here right so you should be able to to see something like this so what I'm doing right I'm trying to display a title okay something like this and putting some average and all So currently it is not looking like a swiper because we need to add a lot of CSS now okay so now before that let me add the scss already which I have created for it so let me copy it from my snippet and paste it here and here if you see that and don't worry guys I will be providing the GitHub link for you so that you can take a look this is a very basic CSS just to add some animations margin and stuff like that okay so so that's what I have did it nothing very major okay so as you can see I have this list of CSS added for the swiper okay let me save the changes and let me show it to you how it looks like here so if you see right currently I am getting this uh hover effect or something like that but this is not still correct because I need to uh load the data and do a lot of things here okay because these are all random data what I have added if you see here in the HTML file I'm just saying movie of 1 2 3 and it is only displaying three times okay that's now what I will do right right uh I will have to initialize my swiper okay so for that let me go in the swiper component Dot and this is very important part so what I will do right uh first of all I will have to grab that container so I will make use of view child okay in the view child I will uh take that swiper container so if you remember right I have added this template reference variable so copy this reference variable and put it here okay and once you add this right so we can create this swiper uh container so I can copy I can give the same name it's up to us so I can give the same name swiper container and this is of type element rep okay so we are using element rep for it now what I will do right so now we have to initialize our swiper so let me initialize the swiper by saying a private okay private initialize swiper okay and inside this right inside this what we can do right uh all I need to do is just need to say return return what return new swiper so I'm using this swiper class which is again imported from the Top If you see and inside that you have to provide a very important thing which is your CSS element okay so I already have this element ref right so what I will do I will say this do swiper container. native element okay so once you provide the native element and you need to pass options so the options is nothing but an object what you can pass okay and in this object what you will have you will have three important things for example not three it's four so first thing is slides per view okay how much slides you need per view what are the slides per group and do you want the slide to be centered and all that and you want an infinite Loop so that you can put mention it here okay and one more important object you can pass it here if you want to make it a little bit uh what do we say responsive that also you can do by adding a breakpoint okay so you can see you have a breakpoint axis here and you can make use of this breakpoint to uh change this configuration okay for example if the screen size is 600 then how you want to change the configuration so something like that so for example you can again change the above things like this okay so this is the by default one and if you want to change change it based on screen size that also you okay so I have bunch of uh configuration already done for some screens so I can just take them up and put it here so that you can just copy paste and you can check and you can change them as per your requirement okay so this is this is what the breakpoint is all about okay so you can change them as per your requirement okay how you want to do all right so now that's what the main uh configuration was so now as you can see right the swiper is initialized but we are not using it so what I will do right as this is all about view okay because the swiper belongs to the view of so because we are doing something in the Dom right so this is your Dom which you want to manipulate so you can initialize this swiper in NG after view init okay so let me take that uh interface NG after view init okay so once we have this so let's also implement the after VI unit life cycle hook and what I will do right I will just try to call this initialize so I'll say this do initialize the swiper okay and this will initialize the swiper for us and let's save the changes and let's see on the browser how it okay so this is how my swiper is at the moment I can see the Box looks quite good now so this is how the box is and if I hover and it gives me some information like that okay so the swiper initialization is also done now we have to style a bit so that we can see them like one after the other like it's it's all vertical right so we don't want to see vertical we want to make it horizontal so to make it horizontal right all we need to do is that as as we are using swiper already but uh the main thing what we have missed is that we need to import the CSS correct so let's import that CSS of swiper by saying import and from where you will import you will import it from node modules okay and inside node modules you will have a swiper now because you have installed it successfully and inside that you will have swiper do SC scss okay and if you save the changes right and now if you go back to your view okay so now you can see all of them horizontal all right so now let's use this API endpoint uh which we have already used it in the browse right in the browse component we are doing the API call and what we will do right we will make use of this data and we will display it it in the app corosal okay so what we will do now we will try to make it Dynamic so to do that right so we'll have to make use of adate input and we have to make this as child component so what we will do right so let's take go ahead and create a input property add theate input and let's give it a name as video content video contents and that's it and we can specify a type also so I will specify the type now let me show you how I can get the type of it so what I'll do right I'll go here inspect element okay get this object okay open up this result and what I will do right I'll just copy this whole object okay so I can copy the object go here I will convert TS or I can say Json to TS I will use this one okay let me go here and paste the object okay so once I paste the object I can see my interface is ready so I'll copy this interface go inside your shared component and let me create a model and in the models let me give the name as video content. interface dots paste it here and let's make this as I video content okay and now we can use this type so what I'll do right I'll go here and and change it with I video content okay because this will be an array so that's why I have have it as an array okay so this will be array of video content now what I'll do right I'll go here in the browse and if you know right so we have this response as an array so what we can do right I can pass it here okay so rather than what I'll say pass the movie so video content okay video content and what I'll pass I'll pass it here as as the response correct so we are getting it in the response so I will create that first so this I can say it as popular movie so popular movies I give the name as that and this will be of type I video content of an array and uh what I'll do right uh here in the console.log I'll say this. popular movies equals to response. result okay that's it because if you remember right uh this is what I'm getting in the response so I have an object and inside that I have result so thank God I have seen it because this is s result okay so I can change change it to S so now I will get this aray inside also what I can do right I want to also display the title of that movie so I will again take one more input I'll take one more input so I'll take input here I'll give it as title well it depends like uh what is the title of that particular corosal right we have can have different different corosal so that's why so I'll have it as a title of type string and that also I can pass it from here itself so again let's go component in the HTML and here first of all let's pass the popular movies and then I can pass the title so by saying square bracket and the title of this will be uh popular movies something like this and save the change okay so once I save the changes it will still not display because as you know right in the child component I have this video content but now I'll have to use it so what I'll do rather than this list I will remove it and I will use video content okay if you remember right I have a title of the movie so let me open up this object again and from here this will help me to get those things done so I know that this is the title of the movie so the name is original title okay so anyway if we are using the types right types of the video so this will help me for sure I can say movie dot see I'm getting the help so this is the title of the movie so here I need the overview of the movie so I can just say here that movie dot there should be overview yes overview then we have average rating so we can put average rating also so movie dot should be some rating or popularity I don't know let me we have vote count or vote average any any is fine so we can use what average is sound more more specific and over here title right so we can render the title like this so This Is My Title which is coming from the input okay and save the changes okay so once I save the changes now I should be able to render some some Dynamic value so here it breaks because I think we have it let's go here and save all the changes so after saving the changes you should be able to see it let's go in the Chrome and now if I go in the popular movies see I'm able to see the name of the movie yes or no so I'm able to see the name that trolls brand together and and what okay so now this works fine okay so I can see it is rendering the movie along with the average okay I can swipe here also all right so that's how it works I know there are some fields are going outside of it but we'll try to fix it no worry okay so now this works fine now what we will do right to display the images so we have something in that API also so let me show you the API and in the API right we have a backdrop or something like that backdrop path okay or we have a poster path so here if you see right if I'm trying to access this poster path okay this will not work because why right we need an initial URL to to use this like for example this is the URL right and now if I show you right so we need to uh so this URLs are provided by IMDb right tmdb so what we will do right so let me just copy the URL from here and paste it here okay so that's how it will be so we have to use this initial uh what we say the domain of that so we can specify the width of the image by saying w500 and this is the key okay so this is the key of that image and now if I hit enter so I should be able to get the particular uh backdrop of that movie okay or you can say the poster okay so which means right uh we have to append we have to append this URL to all the images okay so if I go here okay if I go here and if I try to directly put or if I try to directly say here as for example movie dot where is that image backdrop that was the poster path yeah poster path so this will not work okay why because we have to initialize it first okay we have to initialize it first uh with this URL okay so I need to copy this URL copy this and paste it here okay save the changes okay save the changes and now I should be able to see so now can you see right if I show you on the top I am able to get so now I can see all the images as well okay I can see all the images and how beautiful it looks so now if you see right now I have images I have titles I have average I have everything but the thing is right it's still not looking good because this is all black and we have all this white background this is because I wanted something in dark mode okay so what I'll do right I'll go back in my uh HTML of the app component do yeah app compon HTML and what I will do right I will will wrap this router Outlet inside a main tag okay and inside the main I will have this router outlet and I will provide some CSS by Tailwind okay so let me use the tail bin classes here so first thing I will give it a height as full okay uh text should be neutral so that it should be all white color okay and I want to apply a BG color so I'll say BG I want to specify my own color so that's how you specify your own custom color in Tailwind CSS okay bg1 141 1414 and overflow overflow X should be hidden okay and once I do all this thing let me save the changes and you will see something very interesting now so see now everything is in black color and now you can see all your title and the overview all are coming like proper right in in white color and you can read them as well now they all are readable but I see one problem here that here if you see right the contents are going outside of it okay so which I don't need that correct so they are going outside the card so what I can do right uh I can be smart enough and I can uh create a substring so I can remove the extra content like I should only allow 140 characters or something like that okay if you want to see more then he should click on this movie and he can see in view detail page okay so what we'll do right let's create that so how do we create that in angular right so rather than doing it one by one for all the for each Loop like looping into it so we will create a pipe okay so let's create a pipe inside the shared folder okay let me create a folder first pipes and in the pipes I will create the pipe name let me give it as description okay so let's create a pipe here generate pipe give name it as description pipe hit enter and here you can see the pipe is created all you need to do just make it as Standalone true because this is a standalone pipe okay if you don't know how to create a pipe you can make use of CLI angular CLI NG generate pipe and give the pipe name as description and it will create a standalone pipe for you because you're using angular version 16 so stand alone is by default so now let's go here in the pipe and now what we will do right rather than returning null what we will do we will return so whatever value I'm getting right so value okay so value do substring so I will make use of substring because value is of type string so let me change it to string okay and now I can make use of do substring okay so in the substring you will specify the start number it should start from zero and it should end till 140 so it will only take 140 okay and after that character right you can add something like this so after the character ends after 140 character it should give dot dot dot okay so rather than doing like this we can also make use of string interpolation so that is a another good practice that you should use so let's make use of string interpolation by adding a back Teck paste what I have already added and now what you can see you can just say okay now after this is done so you can come outside of it and you can say dot dot okay so now what you will do you will pass a value to this which is the pipe value what you will get and you will convert that into only 140 okay 140 and once that is done let's save the changes now and where you want to use the pipe you want to use it in browse okay browse so go here and import that the pipe name was description pipe okay and where you want to use it you want to use it on the overview of it correct wherever you have overview so there you will use okay I did a mistake right I don't want it to use it in browse component so let me remove it sorry uh we'll have to use it in the actual movie corrosion okay so that is present inside your component oh sorry it's in it's in our Shar so let's go in the shared component and in the movie component. HTML here you need to import the description pipe okay so your description pipe imported and let's go here and put it here on the overview by saying description so once you add this description save the changes and now you will see the magic of angular pipe okay okay so now it is throwing error because again I think I haven't saved the changes so let me save all the changes okay now let me open up my terminal also see if there is any yeah it's fine now let's open up your Chrome and now can you see right after 140 character I can see there is a dot dot dot okay so if you want to change it so you can change it suppose if you want to make it Dynamic right right for example uh I don't want to say it's always 140 so you can pass in your own argument by saying okay uh make this as of 200 okay so what you will do right so now you are passing a argument correct so go into your pipe now you have a AR Arc Value okay so what you can do right you can all you can do so this is of type string again so this is coming as a string from there so rather than sending a string uh you can send a number directly right so let me change it to number and this should throw error now because now you should pass how much character you want so I'll say 200 and after saying 200 right so after saying 200 let me save the changes and now go inside your pipe now you can pass your argument here so I can pass your a and a is of type number save the changes and now you will see the magic okay so here if you see right now you can change it based on how many character you want so now it takes 200 character okay but you see right still for some of them it is going out so that's why I think I have made it as 140 okay so it all depends on you now you have made it configurable based on your preference okay you want 150 or you want 140 so you can do okay and that's how you can make use of pipe in angular okay so now you guys know what pipe is in angular and as you can see we have already created our pipe So based on that let me also try to refactor this code and what I'm doing here right so this is not good so I'm putting this as static right so what I can do right rather than doing it like this I can create a pipe for this Al so let's go again in the pipe create a new pipe okay so the pipe name will be image let's go in the pipe and make it Standalone now what I need to do right so rather than doing it manually so I'll go here cut this thing okay so now here what I will return return I will return the value right so again let me do the string concatenation okay paste the changes here okay so what I need to do how I need to do right I will paste this so this is the image what I will be getting and now I will pass in the value here okay so I can pass the value like this and now this will transform all my images into this complete URL so now rather than passing it like that now I'll go here and import the pipe here first so let me import put it here so the pipe name is image pipe go in the HTML replace this with a pipe so I can say pipe and give it a name as image okay so once I did this save all changes so compile success go back on the browser and you should be able to see okay so now this is failing right so this is failing let me see why what is the problem that it is failing so you can check that in compile so if I check here in the compilation and now if I check in the console what is the error if I refresh the changes okay so can you see now it's it give me that it is a unsafe URL yes or no it gives me that this is an unsafe URL and because of that I think this is adding some slash or something like that okay so let's go back here I think we are missing something so let me fix that so go in the image pipe okay you don't need to do this sorry you don't need to do this because this is already uh we have added a back take okay so no need to add our own uh codes there so now you do that let me see if if it is still fine now so now if I go here and I can see all the images again okay so now that fix your issues because I have added codes that's fine so now you can see that now you can create your own pipes and you can see what are the use cases of pipe in angular okay so now what last thing I need to do right so currently if you see we have only one movie okay so any one movie which is rendered here which is popular movie so what I can do right I can do different different API calls in the movie services and I can call all of them in the browse company okay so in the browse company I can do multiple API calls so let me first create all the services in the movies so here if you see right now I will be pasting a lot of API endpoint already which I have created so I'm pasting it here okay okay so you can find the link of everything in my GitHub URL which I will be giving you guys and make sure to give it a star guys if you love that uh if you love this project right I will be pushing up everything on GitHub and you can access that code as well if you love that code then please make sure to give it a GitHub star all right so now here if you see right we have already created get movies so now I have created different different endpoints like get TV shows get rated movies get Banner image you remember right we are showing a image there okay Banner image so that also you can get it from here then we have the banner video that you can get it from here you can get Banner detail okay so you can get now playing movies popular movies top rated movies and upcoming movies so now we have list of services created these are our get call okay so now what I'll do right I'll call all of them inside my browse component okay so where is my browse component it's in the pages and so now here I will be doing a API call so now if you know right I want to do multiple API calls so what I will use I will make use of a fog joint okay so to use a join right I will have to first create a source of observables okay so let me create a source of observable first so let me do it below here so I'll say here sources okay and inside that I will put all the list of movies like uh the service what I have created so here if you see right I have all the sources like get movies get TV shows top rated movies and all okay so let's make use of this source so now what this will be this is array of observable okay and now I can subscribe to it by using a fog join so let me go in any on in it so now I don't need to do one by one so let me remove this and now what I'll do I'll make use of folk join this is coming from if you see on the top I have imported it from rxjs okay in the folk joint this requires an array of observable so I'll pass this do sources okay and now I can make use of uh if I do subscribe right I will get list of all the movies okay I will get list of all the movies so now what I will do right uh I will make use of pipe now so let me use of pipe again coming from RX say yes and here I will make use of map okay so in the map right uh what I'll do I will get all the all the values okay so the first thing I will have is as movies okay then I will get the TV shows so whatever uh the array value I have called right on the top so for example movies TV shows rated movies and all this so I will get them inside this so what I'm doing right I'm mapping them all of them into this array okay because I'll get array of responses correct so I'll map them inside this and what I'll do right so let's go ahead ahead and create a property so that I can store all of this information okay so now to create the property right so what I'll do so over here I have created one property Which is popular movies so let me remove this and let me add it with my own separate property okay so here if you see right I have created about uh seven properties okay and all of them are type I video content okay and if you go in this video content right I'll have to slightly modify it with some new changes okay which I'll show it to you later if I get any error then I'll show it to you what are the new changes but that's how this looks like so I have created the seven properties and now all of these seven properties will uh all of them will be returned so now what I'll say this is mapped right so whatever I have mapped it I will just say return okay so I'll just return them okay I'll have to just return them as an object so let me create this an as an object okay and inside this object I'm I'm returning all of them okay so once you return them right now I will get the data inside the subscribe so I'll say subscribe and in the Subscribe okay make type any and now what you will do right you'll have to just store like all of them the response you have to just store it like this what I'm doing right so that's how you'll store all of them so now in this movies you'll get rest. movies because response. mov which is this object okay response. movies. result and this is of type I video content and that's how you are storing all the other properties here okay so now your properties are updated success correct and now what you will do right now you'll go back back go back in the browse component. HTM so here if you see that again you have to so you will have about seven app corosal okay so you'll have to create seven app corosal based on different different titles okay so that you can create it correct so let me just show it to you how you should do that so now you will have seven movie titles here app corosal okay so this is how that it looks like so I have put it here as movie corosal so I just need to change it ASR F change it with app so let me just check what is the actual name what we have given so app app movie corosal so I'll change all of them with because I have copied it my snipper code snipper so that's why let me replace all of them with app and yeah that's it so now if you see right so this is what our selector what I'm using so in the selector I have this app movie corosal I need to provide a title popular on Netflix that's why I have it and I added the movie video content okay so now as this is done save all the changes and you should see that okay it is failing for some of the for some of the component because because I haven't saved the changes so let me save all the changes and I can see compile okay so now if I go back here so as you can see I'm displaying the title and I'm displaying the different different content based on whatever I have fed okay so as you can see right I'm able to see all the data from here so now let me teach you a very important thing in this whole video okay so nothing thing is right so now I don't like this title to be visible all the time okay on this on this video corosal so this is not good so what I'll do right whenever I will hover on them at that time only I want to see the title and the overview and all this vote average and whatnot okay so how I can do that okay so let's see how to implement that in angular okay so what I'll do right first thing so I'll go here and I will create a property first okay so let me create a property here and I will see here selected content and this is of type string or null okay and we'll assign it value as null initial okay save the changes so you have a property now correct so now what you will do right so first of all whenever you will enter the mouse okay so you have to set the hover movie so that you can say that okay so this movie is hovered at the moment correct so for that you'll have to create a method just below this and what you will say you will say set set what over movie okay and you will pass the movie over here okay movie of Ty I video content okay and over here right what you'll do you'll say okay this do selected content if it is equal to okay so here you will pass it right so you will you're setting the value correct so you'll say selected content is uh movie. title okay or or if this is null right so for example at sometimes the API gives title as null okay so what we can do right we can create an interface so you have one more property which you can add from the API which is name okay so you will check for two things so let so that's what I was talking about the change in the interface so let me add this name property Al so now what I will do if the movie do title is null okay then what I will take I will say that okay then please set the property with me okay so that what I will be doing okay so set hover movie so hover movie is set right this so I got the content so now also I need to clear it so I'll say clear clear hover movie okay and what how do you clear this you'll just say this do selected content and you will make it this as null so now my method is done my method is created okay so now I need to use it in the HTML okay so where I will use it exactly so over here right you have this div so whenever you hover on that okay so I will say right whenever the my mouse is entering okay whenever the mouse enter you will set the hover movie so set hover movie and you will just pass in the movie value from okay and whenever you leave the movie right so you'll say mouse mouse uh leave see you have this then you will clear the hover movie okay so this is done now what you need to do right so now you have to put it on the image image right so let's go in the image and just below that right you have the content to display so this is what you want to hide it from the user so whenever you hover then only want to show that correct so for that I will make use of Ng okay so as you can see right now this is stand alone so you'll have to import the NG if also so that you want to use NG NG if okay so that's how you have imported and now you can make use of ngf so ngf and this will be your condition so now if you say movie. title okay is if it is equal to equal to this dot okay this do selected content or or I have one more right so or what if the movie do name okay if it is equal to equal to my selected content if they both are same right then what I will do I will ask them to show the show the image show the show the description basically so let me save all the changes okay so the changes are saved and now let's see if that works so now if you see right I cannot see the title and I cannot see the overview and I cannot see the movie average so once I H on it right then only I will be able to see it once I H I'm able to see it yes or no so now this is also done so see how beautiful this looks but I see there is one small problem that it is quite Snappy okay I want to add some animation Okay so I can add animation from CSS but let me uh teach you something very interesting that how to use animation in CSS animation in angular not CSS angular so here right so I have something called as animation here okay if you see that I've already added this so now you you see we have an animations array and inside that I want to create a fade animation okay so I can see it as trigger and I give the animation name as fade okay and inside this you can add all the transition and animate like this is all my method right so in this transition you can say it as continuous like void go and end so start and end and you provide the style here so the style will be your opacity that opacity is zero initially and then whenever you like like when you are doing the fade that whenever you are opening up that so you are adding the 300 Ms delay and now you are changing the style opacity to one so from 0er to 1 so that's how it will be something like fade and that's how you create animations in angular okay so this is how you create animation in angler this is one of the small example where I have show you how to create a fade animation okay but this is not done right we have created the animation and we have to make use of it to use it right so you'll do here you'll go here and you'll make use of add the rate fade okay see the see you see the name as well the fade once you save the changes and now if you overwrite still you see it is Snappy why because whenever you make use of animation of angular you need to import a very important thing which is browser animation import from uh what I remember last time it is from angular SL platform browser okay and uh what we can see that the name was provide browser animation okay so this is still half so let me change it to animations yes so now there will be something called as provide animations yes and this is what I want to use it in the array so I'll say provide animations this save all the changes and the compile should be success and now if you go right so now can you see there is some fade so it is a faded a little bit faded okay so if you want to see the faded effect more then you can increase the duration from 300 to 1 second and you can see that but as you can see right once I H I'm getting this faded okay so now most of our things are done but all we need to do is just change uh the title and this overview of our Banner okay because this is currently static okay to make the changes what I'm thinking right so what we will do we'll pass the title and overview from the first movie what we see here right so we'll try to send it this uh title and this thing to the user to that particular Banner component so to do so right we will have to create the two inputs so let's go in the banner component.ts and let's create our input so this is our first input and this input will have okay let's give it a name as title or let's be specific Banner title and initialize is as empty and again I will have one more input and this input will be for Banner overview okay anyway this it's up to you if you want to prefix it with Banner or not because any you are in a banner component so that really makes sense but just for your guys to for your understanding I put it as a prefix as Banner okay save the changes now I'll have to provide this data let's go in your browse component. HTML and here if you want right if you want to make this as uh what we say compulsory so that it should throw error something like that so we have a new feature in angular that you can make them uh required so if you see here required as true and now you will see the magic of that so if you say required true that it should definitely have a tit title see now I'm getting error here so to fix the error for the selector you need to provide the banner title so here I need to provide some title here so what I will do right I want to make it Dynamic right so as you know that I have created the API service so I will be doing those API call here in the browse component.ts okay so what I will do right so whenever I am doing the folk join in that I have this map right and what I will do right I will make use of this movies and I'll make use of the first right so in every movies have its own ID title and everything correct but what I will do I'll make use of the API call okay to to get the details of the movie okay so what I will do right uh I have this something called as movie service. get the banner detail okay so I need an ID here to get the ID I will make use of the movies okay movies and then I have movies. results and in the results I will use the first movie and from that first movie I need ID okay so now it will take the ID of it correct so now this becomes my this is my observable correct so this is my observable of type object so what I will do right I'll create one observable here Banner detail observable okay and now I will say new observable of type any okay and now I will assign this observable to this guy so I I will say this do Banner observable equals to this and now this is an observable right so we can make use of a sync pipe here so what I will do I'll make use of async pipe to get the title so for using the async pipe it's easy all you need to do is put your banner detail and make use of this async okay and this async is coming because I have imported something called as common module yeah see the common module is here so I can make use of async pipe or if you are not using a common module then you have to specifically import async okay so now this is my Asing pipe and in this I will have my original title okay so that I can put it here original hyphen title okay and now this should be able to so this should be working so let me just make it as nullable save the changes and now I should be able to see the title here so let's go on the browser and go down as I can see the title is here freelance okay now in the same way I need the overview so what I'll do again go back in the browse here and I'll copy the same paste it here so this will change to Banner overview and this should change to overview okay save the changes and let's go back and see if it is working so can you see now I have a beautiful title and also I have this okay the overview now this is done now I I want to make it Dynamic right so this uh title no not the title The Tailor should also be dynamic to make that Dynamic again we have to do the API call so let's go in the browse component.ts again I need the title right so I will do one more thing let me create the observable stream first so I'll copy something like this copy the same paste it here so this becomes my banner video okay Banner video and uh now what I'll do let's go down and in this right I'll do one more API call here copy this paste it and this should become my banner video okay as an observable over here I'll change it to get Banner video and I'm sending the ID okay so now if you see right if I'm doing this observable call let me sa if the changes let me show you the network call First okay let's go here and show you the network call let's go in the network refresh the page and now you should be able to see the network call okay let me play this yes in the network so here you can see I have this network call videos if I open up this and here you can see the result okay so in the result for this video ID I have two trailers here okay so what I will do right I will make use of the first trailer only okay so here you can see that I have a type trailer and if I open up this like that see I have these two trailer right now I want to use the first trailer or I can just check for if the type is trailer then I will use that particular key okay so this is what the important thing is I need this key right now so from this if you remember I just only need to pass the key value because if you go in the banner compony on TS I just need to make this guy Dynamic correct this will will be my key value so to do the key value again let's go in the TS file and from here this is my observable so let's go in the banner. TS and I need a key so I'll say add theate input and this will be my key okay so this key is nothing but empty for now and now here I will pass the key here like key and again this is my banner video I'll make use of async let me do like this now I'll make this as async and now let's open up this bracket okay after bracket I know that I will get a result results and in the results I'll take the first result and then from that I have a key okay so now I will be able to send the key to the child component okay let's save all the changes all right now uh I make use of NG on changes so I'll have to implement the interface on changes and inside that on changes let me quick fix and yeah import this on changes and let me put it below okay over here right uh what I'll do I'll first check if if changes is of key okay if it is coming from Key then only it should come inside this then I'll have to create the video URL okay I have to create the video URL so the video URL will be like this video URL okay and I can copy the URL from here from the HTML in the banner copy everything paste it here okay and now this guy has to be dynamic so what I will do I'll cut everything I'll make use of back tick okay back tick the string literal past here and you can change this so I will make use of dynamic so let's make this as key okay so this will be my key okay so once the key changes the trailer will also change and this video URL I can apply it on the HTML so no need of this so let's make this uh property binding and remove this and add your video URL okay save the changes okay save here as well so that the compile is so now what I'll do right whenever I'm getting a key okay whenever someone is changing the key in the input so I will use to uh update my video URL okay but there is one issue right if I show you that issue if you if I go back on the browser okay so I will not be able to see the trailer see the trailer is blank and I will be getting an error that this is not a safe URL okay and for that this is a very important thing right in angular we have to always sanitize our URL external URL so to do the sanitization I will require something called as sanitizer okay so let's use this Dom sanitizer and now let's change this name to let me just put only Santi all right so now what I will do I will have to provide this link with sanitization so I will say this dot okay sanitizer dot then you have this bypass security and Trust resource URL and in that you need to provide your url okay now once you provide the URL and you will have to define the key also so what I will do so that's how you have initialized it so if you want right you can uh assign a initial value to it okay so as you were assigning it right previously so let me just go here and assign the initial value to this so this is my key right so I'll copy this key and I can put it here save the changes and now go back and you should be able to see a trailer okay behind so now you can see this is freelance movie and you can see the trailer as well be but now if somebody changes that trailer ID so that also you can update it here if you need so you can update it by so like something like that so you can do here this do. video URL okay and if someone is changing it right so what you will do you'll again say this do sanitize do bypass ENT resource URL and you will again copy the same thing below if someone is updating the URL then only you will have to do this so that's why just to be on safer side I have did this okay and now in this way right after doing all of this now you will be having everything Dynamic okay you will have everything Dynamic here so for example if I want to change the trailer ID so let's go here okay and from the browse component.ts if I change everything to okay so let me go here and change it to one and also change this to one save the changes go back and now you will be able to see a different title different overview and a different trailer okay so that's how you can make all of them Dynamic So based on your need you can do the changes okay and after doing all of this now I can say that your Netflix clone is ready okay so at least you have your homepage ready here as you can see right I have a beautiful looking header on the top okay and I have this profile who logs in by using Google Au I have this sign out option as well and then you can see a beautiful trailer title overview scroll down as you can see the list of movies as well okay so now we can say that your Netflix loan is ready okay and if you still have any doubt or any issue related to this video so you can mention them in the comment section I will be happy to answer each and every questions whatever you have for this video and also I will provide the link of GitHub in the in the source so let let me just do one more thing let me do the last part of this by actually publishing it to the GitHub in front of you so now I can just give this feed that completed Netflix Netflix clone and commit the changes so publish the branch let me allow the credentials okay let me do it in front of you because a lot of people complain you're not uploading it and all that so let me make it public okay now it is publishing the branch and now this branch is ready so now you can find all the changes whatever I have made okay and you can play around with this Netflix clone all right and now also if you need any more uh video about some different topics so you can also mention them or you can connect with me on Instagram or telegram you can you can have a chat over there based on whatever requirement you have and also you can follow me on LinkedIn because I try to post a lot of new things like for example there is change in angular and how things are changing in web development and all that so I try to post something very interesting about it so you can follow me there to get updated about web development also you have any sort of improvement for me to do in this video so I can do that as well for you guys okay so do let me know in the comment section for that all right so till that time bye-bye guys and keep learning

Channel: Let's Program

Views: 7,035

Keywords: AngularTutorial, TailwindCSS, NetflixClone, WebDevelopment, AngularProject, FrontendDevelopment, CodingTutorial, WebDesign, AngularFramework, TailwindStyling, AngularRouting, APIIntegration, AngularComponents, UIUXDesign, LearnToCode, ProgrammingTutorial, CodeWithMe, TechExplained, OpenSource, GitHubRepo, CodingTips, SoftwareDevelopment, AngularBeginner, AngularTailwindCombo, StepByStepGuide, DevelopmentTips, CodingSkills, CSSStyling, AngularTips, CodingForBeginners, BuildWithAngular, CSSFramework, NetflixAppClone

Id: x22dcRnYRAM

Length: 81min 6sec (4866 seconds)

Published: Thu Dec 14 2023