Let's Clone Spotify in Angular | Clone Spotify Web App In 3 Hours | Frontend Development Project

so hi and welcome back so today we are going to build a Spotify clone using angular so let me just show you we have this angular and today using the angular features and on top of it we will using bootstrap we will be using the bootstrap and we will try to clone make a almost copy of Spotify app so let's start so in order to do this we will be reading angular bootstrap the node.js installed and pretty much this this would be I think fine for our clone app so now uh in my and also yeah vs code I will be utilizing Visual Studio code for making this clone possible I don't know how long will it take but let's definitely start this thing so we have uh so much of components over here if I click over here I go back okay so this thing is there all right so let's start in my visual studio code now I will be opening I will be opening a folder over here and we'll click a new folder that that says 45 or let's say projects let's go over here and click select this folder and now inside this folder let me just go to the terminal and hit on new terminal just like this and inside this terminal I would be now doing NG news 45 45 clone just like this now obviously this is going to ask me a few of the things I would like to have routing the CSS file would be there and over here I will have a brand new angular Spotify clone uh folder now we have to decide how many uh components we will be making so I think here we have let's say if we go to a home we have this home section we have the search section we have Library we have a create list and like storm but definitely uh we will be making the playlists section where you can add your playlist We will search from the available uh in general uh home we will be making uh and also there is a premium page so if we go to the premium there is something like this so for now this premium thing we won't be able we would be making we can do the support I think I guess we can go for this but we will keep it simple we will try to replicate uh the home page and the login as well and uh when we click on the show all we can see all the general we have all the parts created perfect so we can now do open folder and let's click on our projects and over here we can click on this particular clone and let's try to see what all things are available over here so if I go to the source and app and everything first of all uh I would like to have some components to inside this app I will now make a folder notice components and inside computers now I have to decide what all things are required so first of all they will one will the components um one will be the pages what all pages are required in my app so they will be our home page let's say there is going to be let's make the components for those things I go to terminal and over here we can have now excuse me all the things which are required to build now I guess let's go to the terminal and here I would now like to do something like this Ng generate component and component should go under the pages and first of all I need the Home page once told me done I want the search page just like this sorry it will be under Pages it will be a search page and then there will be a playlist page let's have a playlist pla y LISD playlist and there is going to be a sign up uh login page I guess yeah we will be in this I will be having a sign of s-a-g-n up sign up page and let's say a login page login to Pages you can see we have this home page we have the login page we have the playlist component we have the search component we have the sign up component and then inside the uh component section of this incentive components now I would require let's say components inside the components I would require a card where I won't need this card so let's say a storm card This is My Strong third component then after this I would be requiring a top navigation card so let's say I need a top nav card let's see top navigation card then I will be requiring the buttons for this okay so button will be required so I can have button by custom button and I think for now this will be pretty much it for this okay and uh logos will copy no need I will do all the stuff let's now clear everything the CLA are clear and now do more and you serve to open this app till then we have the energy serve let's see if this uh image we can just have some logos let's say spotty file logo let's go to the images let's go to the tool section to the color to the transparent and now let's have the logo let's save as let's do a save as in the save as type would be it's I want to save image as and now let's go to where we were building all the stuff related to this let's say it it was my projects fortify clone source and inside this asset folder now I will be doing let's say Spotify y f y light dot PNG and then I also need the green one let's save image as let's do Spotify mode by Green Dot so both of the things are almost ready with us and now we shall go to where we have this app https uh one to seven dot 0.0.1 slash 4200 will lead us to the background tab now let's go to uh app.html file clear everything and now we want bootstrap to be uh Incorporated to our application so let's just include this wire are links so I have copied this and in index.html file over here we'll be linking this uh style sheet just like this so I have the bootstrap available now and now in the artboard component HTML file we have this everything okay so first of all changing the title uh we'll do something like this Spotify Web Player let's hit save and now okay let's just reload we have the same thing like this Web Player now we have something uh known as this two sections are available over here so this thing this type of loop we can have y on uh first of all um this color so let's try to grab the color watercolor schemes are available over here so I think for now uh let's quickly go to another Google section say I have some pretty much Goods installed where I can have all the functionality needed so here is our app it is let me just check Google all those things yeah let's open the Spotify app let me know it's here and we can also do https uh selection openhost 4200 let's say it's 4200 and now we can see the Spotify web player app absolutely fine I have the color available and let's pick up the pillow of this background got it so let's use our and now let's we can do a div I can do div dot class uh div dot I won't make it uh let's say first of all we would like to add routings so over here let's make uh first of all the home page so the path to this will lead to the component home component Let's uh add this home component over here quickly fix this while importing this from the pages and now in this I need to add the router Outlet router Outlet just like this and now I can see the home components available over here let's go to the home component in the HTML file just like this and over here now I can make div Dot and what are the things we have we have this two sections you can see two sections are available like this so now I will be making one section with this let's say dim Dot 45 and in this home we have this uh uh 45 home container inside this I will be making div dot Spotify for E5 container it's uh two ways we have one sidebar so we can call it as sidebar okay and then we have something known as the playlist container so we can have the Spotify red Dev Dot 45 underscore home Dash container you know and we have the playlist a list container okay so two things are available over here that's absolutely fine so this I'm going to make a row and then we have a call let's say for this I need somewhere around three and the rest of the things will be aligned over here let's say call 9 will be available over here and now uh let's just simply try to style these things I will be going to take the sidebar and let's put the CSS section of this and here I want to give it a a background color of black and with the height of let's say height would be 100 VH just like this and if I go to this action where I have the this container let's go over here now I will be giving it a background of let's simply uh copy the background whatever background we have let's pick up the color we have picked it up place it over here give it a height of 100 V Edge Let's save this it's as so things are pretty much going fine and I also want one thing which is to be here in this where we have this uh Global Styles over here I would now do that overflow would be hidden so now you can see pretty much we are getting the same look and feel over here and if I go to the CSS section of this to the HTML section now I can do something like this that it should be 10 and 12. let's see so yeah absolutely it looks fine to my eyes now uh to this section to this uh we have this Spotify sidebar container now I will be using some uh flexbox properties to it so let's say I want to do it display of flags I want the flex direction of the items to Big column I want the justify contents to be Flex star and I want to align the items towards the center let's hit save and now inside the uh inside the assets folder we have this Spotify light uh logo so that we will be using in our component section if we if we now go to our pages here over the pages over this section over the HTML here now first of all I would be doing one div inside the div I will be using image source and I will be setting it to assets slash inside the assets you can see there's a 45 light dot PNG let's hit save and in the alternate I want to do something like this Spotify logo we can see something like this light low let's save and this is taking a bit long let's do one thing or let's give it a width of 100 hit save and now I can also give the width of 200 let's say okay and then I will be giving it a class of M2 give the values from all ends let's see M3 okay so you can see now uh both of the things are looking absolutely different Diaries I can also do it let's say m 150 okay and now I can also give it a text left so that this thing is absolutely towards the left so this thing is absolutely looking fine now and over here I can have a class of let's say s h c okay or we can have something like this or copy design things and inside this these are the items for this okay item hit save everything is looking absolutely fine now we need these things home the search your library so we can now you know corporate all those things as well over here so I write here I need let's say we need a home thing so I can put an a over here in right home let's hit save what is the problem let me check I'm going to try to what div over here and then place an a item with whom yeah now everything looks fine and perfect to my eyes and the another link was uh search and your library so it will be a search then we have your library just like this it's a home search your library and then create playlist we also have something known as create playlist let's do this as create late boots let's save this and for case so things are looking fine and yeah so now over here let's copy The Styling from this and inside this we are now inside this we have a a in this we are going to do text align towards left that will be important and the font size let's say I'm given 18 pixels color would be white let's hit save okay so now things are looking fine we can increase the size to 16 pixels and see okay so Excel it is not working I say display is flex direction of each and every item is rho I want to have the justify contents like Saran the line items let's start to the okay not it so something like this let's try to respect over this animal then just copy over here that's interesting this is our bird this is the thing and to this we give it a width of 100 percent and as soon as we give the width to 100 and that time we can create into this thing so inside each and everything I give every 100 let's save this okay uh not to this but if we do this something like this so now everything is just assigned and I want some margin to be there let's say I want a margin of 10. pixels okay and then uh the focus piercing is here okay and then from the left margin from the left is required let's say 10 pixels here we can have some padding from the left let's say it is there let's give it a trading of 18 I guess so okay icons are also required now and we have this uh let's say we have this top left now we can also incorporate for now I will be leaving this just like this and also we'll be doing one more thing in order to have this uh look and feel perfect uh we'll also try to incorporate few more styles to this let's say uh here I have the a n on a when I do a forward I want the cursor towards the pointer and if I see over here whenever we are doing those things so things are getting simply if I can do a color should be light light gray let's say like Gray if I hit save yeah we are getting that field okay so now we have the search we have your library we have the clean create playlist and with the home accident and definitely these things are looking good now we want this Focus section so you might have seen we have created a top nav inside components when we go to components we have this top name so over here now we will be creating one details with a class of Spotify or 45 top nav just like this and now we can copy this thing let's have just copied like this we give it a width of 100 we give it a let's say a height of let's see I will be giving it a height of 20 pixels for now and uh of the background we can select it over from here to this is the color for this so let's give it a background this one Let's uh like to save everything for now let's now let's uh copy the selector for this and in my home section over here I would then like to incorporate this thing uh within this tag so over here let's do this thing uh English thing is a little bit let's just try to wrap this thing now so let's select on this container what we have over here and we can now definitely decrease the width how much we want you just have a item from here okay so yeah now it's look absolutely fine your height will be 74 and over here this thing has a padding so this thing I want the padding from the left should be zero pixels so that I can add all things so this is also looking good to my eyes trust me so in the CSS section I will be doing it a 74 pixels for the height I will be now doing a position uh to be fixed and from Top I need the uh for it to be 0 and margin bottom margin from sorry margin bottom of each text or let me just save this and if I look over here everything looks to be perfect and we have okay we have some Shadow as well so for shadow I will be using CSS what shadow okay we will be using the CSL box shadow let me just try to have a cool shadow for this thing so if I go to my CSS section and uh on here I have an option of this no definitely it's looks really good to my eyes I can then have this denoting and over here let's quickly style this I want to have the padding from the left hand side to be absolutely zero pixels so now this happens look good and over here I can see a focus section is written so if I go to this top down here I can have uh the H2 element to be focused if I hit save now I have the spoken section written definitely things are not going to end like this inside the center I want let's say a class of focus underscore title let's hit save which says me Focus okay then we have a certain section where it says sign up and login so here I can have a div Dot authenticate oh sorry divot here inside this the classes name would be just like this and then I can have something like this it's a posters try to and here we have the Authentication continue where I have div Dot in authentication we have the silent page sign up and then we have another thing which is available to us and that is known as login a login page so if I hit save so now what I can do here all the things are available and let's do something where it says sign up login it says yes IGN sign up and then it saves me login let's see things and it's l o g l is capital with substancing and here are all the items available now let's also give it a cool style for this as well so over here now I can do inside this the elements will be display will be Flags blacks direction for this will be row justify contents will be a space between and align items will be Center let's hit save no I can see each and everything is available over here the focus section is here quickly see where our rest of the things we have things lined up original from left will be minus 100 pixels and see my things available let's do one thing in this top left let first of all comment this thing so that I can see a good view of all the things available and where is our let's just let me see let's go to the CSS section of this we have here we have this thing over here let me just try to remove this thing if it has been wrong anything not letting me know right now just you can login text cards this login text plan okay let me do one thing let's just change the color of the text inside this the color of the text should be white with click save so focus is Here sign up is here and let's do space around okay okay got it okay so first of all the things will go to flex start let's hit save everything is over here so this inside this we also had this thing available let's save okay so this is going to be installed but when we go to this section over here this section this section I want to align towards the end okay so display will be Flex Flex direction for this is going to be row but justify Contents I need it to be flexed and if I lose this much everything is fine and I can also do something like this that items should go to the end then they are going selects or I can do space evenly okay and then we need these items towards you please go I do a float towards the right okay but never mind because we are doing this and align items to be renter let's hit save uh Gap I need of 10 pixels I guess or let me make a 20 pixel here okay and then this login button oh let me just grab this okay now this login button I need the background color should be white let's add some padding of 20 pixels around I think 17 will hit five let's add a border of Border radius of 20 pixels the center of 40 pixels let's add the color to Black let's add the font wait we hold let's now add the width to be 200 pixels oh it should be 120 pixels inside this the text alignment should be Center here we can also give it 100 so I guess or let's say 110 pixel okay so the color of the text let's let me just now pick out the color for this become the page color okay it's somewhat really do uh okay we can have the text color over here to be light Gray the old bead will be bold the font size should be somewhere around 16 pixels also increase to 18 okay so now things are looking foreign language okay so okay let's respect on this click over here you need to grab this element this is my element justify cell all right just by item over this will be now to this element okay I can do a Plex this is 100 pixels and then Flex grow to 1. let's see 2 1 moreover we'll be doing something similar to let's just first of all see how much pieces I want let's do this do this do this and now it's fine so 550 for the flex pieces property so in my focus where I have this element in the title element over here now can do something similar with this let me just again try to grab this element over here guys just grabbing this thing pasting this thing over here Flex basis of 550 pixels I guess okay and now this Focus we can do a margin from left minus 400 pixels let's do this thing okay and then let's increase the basis to more of a extent all right so 750 prefixes um let's save this the chain so these two things are absolutely ready now we have this focus and should have on size of 20 pixels I guess it's a little big than that thing the focus is there and now we have these cards available so for this I will be doing something we'll be making this card and for this card we obviously need some quick songs APL so let's say we have something like this fake songs album API let's see if we get some free database for web service API for music okay this is the CPI is there check do we have this do we actually have let's suppose please let's go with this big music album API or for now we can just make a clone data Capital let me just make what we have in this so in this card we actually have a image a title and a description okay so we have the songs card just let's go over here and now uh let's take a div let's grab the div and now inside this div I want this let's say the name of this is class let's say spot E5 and score underscore from card just like this let's quickly grab this thing go to the CSS for this and now I would have something like this that the height of this should be 250 pixels the width it will be let's say 210 pixels okay this place should be reflex direction should be column inside this okay justify contents should be Center align items should be also Center okay and the background for this is a little bit of light gray so what I will do from the tab or top left we have the color of the top layer I guess uh okay this color then we'll be using the light of this color okay like some lighter color compared to this let's do a background hello this let's hit save and if I go towards the lighter shade then we will have the Spotify load of this thing so if I now save everything let's save this file as well so now you can see that we are we have successfully cloned most of things over here so if you see this thing in general just if we see this okay we have this thing this card thing so now uh if I now try to have this card from here some card just copy this selector and if we go inside this okay we have this thing now we want to show the section so I go to class then I will be using mt5 now let's use this let's see how this thing looks if I go over here so this is a card and here I want a container to be available container is now available and this disk I will have style down margin top or style Dot adding and this card should now receive a padding of let's say 10 pixels or let's say give it a sorry not padding it should have a margin margin of 20 pixels or for now I will have a padding at the top just hit G over here and now okay I'm finalizing the design by using the inspection tool over here let's grab r let's put this container I guess just tap something we have this thing just do we can have let me see the 48 pixels like this yeah no everything is fine and the card is generally a bit of a round thing so we can do we can go in over here and we can do a border radius so I have a radius set it to 12 pixels so I guess so now it's fine and again going to CSS shadow and copying the Shadow from over here now I can have is a shadow like this no no no not this one but definitely we will be taking the one which looks something like this okay so this thing is fine now uh this thing is also fine but this thing I want to make it uh like let's say inside this the first should be uh Spotify and underscore underscore this will be the thumbnail h u m b thumbnail section then once the thumbnail is available to us let's say IMG SRC and then I can have a width set to let's say 120 pixels the alternate set to let's say thumbnail and over here will require definitely some kind of source so we say playlist thumbnail thumv and your l YouTube MB thumb oops and this thing now can be utilized by angular feature which we known as input and now over here will be doing public okay and which thing should be a string then our input comes from at the rate in the code for you let's do something then we have the description and the final thing is so div class let's say it's a Spotify wrong card underscore description and finally we have 45 song card uh sorry it's the title the 92 and the description in the script now we can also have both of the things installed over here let's give the title let's give it up I guess and from this component can accept few more inputs say that's the title it's the description just like this and now my card can accept all those things over here so title and description from over here now here I have this home let's try to give it some thing so that you can also see in real how the things are passed I write title is equal to let's say I'm not understanding what title should I give let's give a piece full piano is let me spell this correct okay yeah no in the description for this should be equal to relax and relax and indulge with b a u t i a fuel hi and welcome back to a brand new video and now we will be continuing where we left off in our Spotify loan app so if I see over here uh because the video length is going to be so long so I have to build some things in the previous video we have created the card list like this and I've also created a Spotify playlist section over here let me show you how and rest everything looks pretty much same in our Spotify app we are also going to cook this login button over here so let's see first of all in our app where we were building so let me just show you in a songs card page over here everything is just the same in the previous video we were accepting three inputs from over here press the stylings look because this course is not for actually The Styling perspective this course is basically for the view of how angular can be utilized with such actions and also if you look at the pages over here the pages looks uh pretty much similar nothing has changed much and just few things are added where we were we added this bronze card piece some random dummy data so that we can purely interact with each and everything available over here just like this so some data is available towards randomly where I have some title and description over here and if we look on the app where we see this page there is Spotify playlist section like this Carousel how this thing is made I have just shown how this demo can be done okay so this thing is available over here definitely please look at this into the sections how this can be made so in order to make this thing up possible what I have done just on the home HTML where we are rendering this uh this curve okay focus stuff this one there is our apps on card okay and in that I am taking this in uh the taking these inputs on ng4 and this is none other than the things which we have over here and then thumbnail title and description are being rendered over here just like this and if you want this slider face what I have done it's purely CSS this is my playlist container I've given it background of black height is this much pattern is this much and I have set overflow property to go to so that this can have this slider effect and on the playlist part section I have this display flags with gap of 20 pixels matched width is 1500 pixels overflow access O2 for this height is 100 VH and position is absolute putting this property will definitely have this effect whatever if you can require over here definitely this thing is now absolutely working now I won't like when I go over the search I should get the search engine when I go over the uh your library so all these things should be here and in the play in the create playlist section I should have uh and adding program before that we should try to build this login page so we are in the top left we have this login page let's go over there in the HTML section when I come to this list section I should have this login page so first of all let me just go into this login button go to CSL file logins and over here whenever I hover on over this button let's say I have over I want the cursor should be pointer in my case let's hit save and now when the things get reload here you can see I practice there we can also provide effect over this let's say the background should be uh off-white I can set the white color but of different category let's give it a number of uh like this a little bit let's say this one will be a little bit black and then the color should be set to Green let's give it a color of green so that things can get replicated let me just go over little green hello I'm gonna hover over this you can see now this blocking work and just login button is absolutely working okay this thing is working and if I go if I uh click on this I should go to the login page we can see here is a login component and I want to uh go to this login page in order to go to this login page in my app component I need to register this login login uh path so let me copy this and if I go to the login the login should show me the login page let me just the login component hit save and now uh where our top nav is available over here I I write uh on navigate login okay this is my results and in the Constructor now I can import the angular Library which is router you it says like router and here I want the router now this router when you I could fix this I get this from angular router directly from here and in the inside this we have a method known as navigate like this and here I can do slash login and this will navigate me to login let's hit to login okay just one sec just let let's do like this where I see like uh the current route go to slash on it and then in the second element from the login thing let me just go to the routing file as well so that I can save all the things if I click on over the login let's prior to console look and see if some errors are available just click on this no errors are available okay I got what the issue is in in my top now I want to link this function while I click over this okay so I right click and now let's link this function over here let's hit save and when I now try to click on this function I am on the login page now let's see how the login page of uh 45 looks like let's click on the login here we have this buttons login to Facebook and everything we are not doing this that but we will be surely doing this username in the password field so in order to do that let's of course try to go into this login page over here we have a white background okay so we do a div and in the div let's say the class for this will be a login container and I will be giving it a container property okay there is a login container and the entire login container now will be wrapped inside the bootstrap class that is the containers p-o-n-t-a-t-a-i-n-e-r-t-a-i-l-e-r so this is my property and now inside this I want to Now link this thing like this so this thing is now done but inside this we want a form which have this uh login ping okay uh these two things are available so let's put that thing as well so we have let's take divs or actually uh we need first of all two names inside the div I will now be having something known as uh inputs for my username and my password field so definitely let's just try to input those things I write over here input type input type is equal to text so this is the case and the placeholder is the email address or username let me just write the placeholder as email address or username should be available and then there is a password field as well so let's just copy this thing and over here let's write password field is this one and no placeholder is available let me just take a placehold is there that says only password its right password field set save now if we go over here we have these two things but we want that this thing should be pretty much in the center so now in the CSS file for this I write display is set to Flags my Flex direction should be column I want the justify contents to be in Center I want to align my items for the center the height for this container is let's say 500 pixels let's hit save so we are now in complete Center and I want to style my inputs as well standing nine codes I want to give the padding of 10 pixels from inside and I want to make the Border as one pixels solid black let's hit save I want first of all I want to remove the Border from this it should do it something like this I want to maintain the space between my elements let's give it a gap of n pixels let's see gap of 10 pixels would be absolutely fine let's look over here okay so little bit of water radius is also there so I write border you know over here I have the foreign is now also available and now I want to align these two so for this I will be now I link this giving it a class or let's say ID of let's say uh remember me underscore underscore login Dash BTM let's use this ID to style this component now and I said just something like this I see it a display of to find just first of all try to set it away in line but I want to set relax box let's give it a flex I want to give it a flex Direction of row let's hit save now this is absolutely fine and I want to style me justify content should be spaced between okay and align items towards the center that is also absolutely fine and to this element where I have this input of type check box this element I would give it a class of let's say remember remember remember me let me give the class of this thing and now what I want to do inside this PSS let's give it a class of this and now after splitting this that yeah it needs to be there I can now write it as uh that the margin for this should be margin towards the left should be Auto and the merging towards the right can be also photo let's give it a one more thing that text align for this will be left this is coming over here and I want that this thing should be there let's first of all inside this div let's first of all the format of code hit save over here let's do this something like this random margin from the left should be Auto I think we should have walked by missing something first of all here we'll be removing this thing let's hit save now everything looks extreme to me this is also right we have this button over here in this this was there I'm inside this pin now both of the things should be kept inside this element or let's also try to make a few things like this let's say inside this only two elements are present let's hit save let's hit save okay and now in the CSS let's remove this thing okay now this should have been available but I don't know why I think this is because obviously of how things are being aligned over here is this thing I think these things are not working only because these are then inside one antenna I guess and if I remove this ID from here then we'll be getting absolutely okay the case is same inside this if I remove this if I commend this thing out the button is over here if I move this thing then it's like this if I try to here so let's do one thing we can do one more thing let's move over here let's place them over here oh first of all let's only try to design this login button and here I can have a class of login and this one is for vtn let's go to the CSS property for this and here to just log in I would say in the back view but this will be green green this one and over here the couple of the text would be black I want the link should be let's say 14 pixels I want the modern radius to be let's say 20 pixels of this should be 150 pixels let's get saved from both the end going please direct for this hello we can just have the color from here it send the color for this button we have picked up successfully let's replace the kernel okay we can reduce we can remove the border and set it to none the model is also removed and now we can just have the modern layers to let's set up 24 okay so it's 8 it is eight weight set to bold let's do it bold okay so now things are looking good and obviously to the input I can have the height set to 120 pixels let's say oh that's too much let's say 40 pixels so let's so much cells reduce it to 60 pixels it's about 40 pixels 48 pixels from here 50 pixels will be enough yeah okay so things are fine and to the Border I would now give it a color of a bit of Breeze there in the Stone okay let me just try to wait a minute a little bit of fresh okay and also we can have the color to the uh what we have this placeholder as well so in order to give the color to the placeholder here I do input like this placeholder item now give the column back to this is so fine and now we have this thing over here and if you really want you can also do one thing just if you do an inspect over here you can just try to click on this element and here you can see that this has uh what the things are required and inside this we have this uh entire thing okay and over here we have this uh cool what we have again in the select box and then we have the label for this and then inside those labels your things are being written and the together are joined here we also have display Flex all those things so absolutely that is fine and and this log in this entire Spotify is made on react now uh what I need over here I want to cook this inbox and if I do something like let's say if I try to do a input type of check box check box just like this and let's give it an idea of let's say remember me and now we can align a label to it with bring it for remember me just like this and inside this can have a span where I write remember me let's hit save um okay and now to this check box actually I want to do that if in this whatever I have written over here type this text or to all the input types where the type is let's say password I want to design only those fields so now you get this thing pretty much fine okay and now if I want to style this thing we have this input and all those things to get the club into a span I think will be fine and now these two elements will be installing these two elements let's say I give this style of action buttons let's copy this and go to the CSS for this and over here I do want display of blacks my Flex direction would be rho my justify content which should be space in between between and my align and my align alignment from the y-axis should be in Center let's hit save we have these two elements and we should have a line go to the effect for this you go over here whatever things are here we have these and to this I give it a little bit of let's say 100 percent now they are fine but I want to give it a let's say about 300 pixels let's now give them the those respective things so I think now this is fine we can give give it a bit though 401 pixels so let's go over here into this I give it a bit of 412 pixel let's hit save you know the things are much more better and now these things should be properly aligned only remember me was just like this over here we can now do something like this remember mean okay and both of the things align inside this so here only I can do style display is blacks here also we can assign the Styles in angular so it's showing you all the positive possible things which which we can do justify content is just like this but I want to justify the contents to click Start let's hit save okay so things are Justified style align items and that will be absolutely to the center hit save and the things are fine or we can do that align items to stretch okay let's give it a gap between both of them so style dot gas for this will be let's say five pixels of cap would be pretty much sufficient and the color or this input we can assign from over here style dot color and the color would be old we have this ID remember me if I go over here save the changes from there if I go over here let's say ID of this I want to give it a color of this let's hit save the thing this should be something so I do adding from left is 10 pixels it should be I think margin okay let's do this as it was 7 pixels four pixel can be fine yeah yes so these are looking good and over here you just remember I want to give it a bold so would it be using the strong tag after all so let's give it a something like this and now this remember B is absolutely fine we can obviously now style this as well we can give it a let's say font size of 20 pixels obviously we want to give it a height we can do find let just inspect on this element just over here no right just wanna increase if I do the font size no I think within those things are required over here the 15th width will be fine I give it a width of 15 pixels let's just save this already and on top of it we have this fortify logo so we can do that as well if we go to our login page over here we have this container and above the container we can now give a HR to give a line break this is a line break over here and below the line break you have this 45 logo so we can have something like this I give it a devops class of uh container and inside this I want to have the image source set to asset slash Images slash and now we need the logo that's the 45 and for now let's place the Green Dot PNG to check if this Thing Really Works so it pause not in images but it was directly inside this thing okay and let's give it a width of 100 I guess okay so let's give it a width of 300 I guess for now what I will be doing I'm grabbing this thing okay and removing this pairing let's give it a image over here and then this HR let's save this or you can also assign them inside this so that we have this Spotify logo and obviously for this HR let's try to remove this thing let's place this thing again and if I do this something like this I'll dot bit or I can do one more thing do it to HR let's go inside this file now to this CSS and over here I can do the width set to 100 and then the Border set to 1 pixels of solid of black one pixel story lag let's hit save and now we have this line as well and now you can see we have this login in the password we have the remember check as well and we have this login Button as well and Below we need one more line break and don't have a account so sign up for Spotify we can also place that thing as well over here so over here if I do uh write on this and now place a HR over here let's see if what we get over here okay so things are looking pretty much good to me and now uh what I need I will need to manage the style for this so I'll do that for this the style dot width width should be let's say 50 percent so if I hit save over here we can increase to 40 percent as well or let's say this is up to 20 percent let me increase the 30 of width now this thing is looking absolutely similar so we have don't have a account we can write the text over here now we write it inside strong tags inside the H3 tag we can now write don't have I think don't have an account do something like this okay and I think we can go with which five years old let's try to do this with a H5 okay and I think if I do something similar to this okay do something similar to this and in the CSS where we have this container now I think okay here we can also do it something like this to a 600 and you can go back to August file this strong tags now should be covered with H5 I guess so we have this don't have account and then we need this sign of post 45 button so that thing can also be put it over here so I write button and inside this button we will have s i g n sine of power and once that text let us check Spotify so we do something like this we have this button now and in the pages we'll increase the size to 670 here and to in order to style that button let's try to give that a class of login button the repeated side of this and now I can go over here and give it a style of width of let's say 30 election we have this sign up for Spotify and now we wanna remove the color so we can do we can now or we can do this as sign up button as a in sign up dtl copy this go to CSS file for this over here I am now going to do it I'm going to replicate this button let's simply go over here copying this thing I'm going over here let's first of all copy this entire button we place it over here into the HTML now we select this class and now I'm going to the CSS back to the CSS we place it over here in both of the changes and now we need the width we have settled so we don't need the width unless everything is fine and we need uh that it should be the background should be White and the Border should be one pixels solid solid and this should be I think lightweight hit save so things or give it a width of two pixels okay and the text should also go with this i3 let us give it a okay and I think okay the color is like darker we can have a degree in both of the ends hit save and now the page is done so we have successfully created this page and if we go back we can go back over here or if we click over here we are to this login page okay we have we have just signed up and everything if we go back we are again written over here and if inside this if we go back to uh sign up page we have this sign of form available okay so for now we won't be able doing that page as well but definitely you have seen how you can do all the stuffs in angular definitely you will write that thing on your own and here is our login page and also we can definitely have what all things we require but definitely for now I will be going back and now let's try to have the login cooked up so if I go to the login page enter login HTML let's quickly create some form controls into public user name form control form control is equal to let's see new form control just like this I can have public password form control is equal to new form control just like this now I can have public user form what we did in our classes as well so this is our type of form group form group now we can import each and everything from the angular world like this and things on the file on the NGO unit we can do this dot use a form in this dot user form is equal to new formula and now we can assign both the values over here I write that the username username username is equal to username is equal to this not username form control and then finally my password is equal to this is not possible so this is fine HTML page for this and where we have the entire form towards this login let's create a form angle please have a thing let's reboot this login form here now we can type the name okay that person login to this so let me show you how you can do that stuff as well over here so on this I and I want to give the form group and the form group will be as user form okay so I give the form group over here and now I can have NG submit Handler function to sum the form by write data submit just like this hit enter and now item have this form code up over here and in order to use this features onto angular module we wanna now import reactive forms module which comes from angular forms so I do reactive sorry it's reactive forms module just like this hit enter do a quick fix add it to the import section and now everything is done let me just quickly get there by awful when it was save all and now we have this thing now this form can be easily available if you write the name and you can now console on the results over here if I do this dot user form Dot well you you will get the value over here let's just try to do something like this hit on console.log just like this okay and here we can also add the validators by default the values will be null to this and then we can add the validations as well I write very data is not required and valid readers dot email support if I want to add the validation okay enter the password I can have that the validators dot minimum Min length and the minimum length should be let's say 4. let's save now if I open up my inspection tool and to make console section over here now what I can do I can try to type let's say Siddharth at the rate gmail.com and over here I can do one two three four five six if I click on this button now where this one if I click on the login you can see these are the things which are available now these things are not available so let's go to this input and we'll try to do form control is equal to this and then we can connect our password control as well to the template of this link so I write form control is equal to password form control hit save and now if I try to just to set at the read gmail.com gmail.com hit on the login button you can see now I get the data my data is purely available over here and now I can do whatever things I need so this is how you can uh do the form over here now let's try to go back to the page and here now as soon as we click now if we go to the uh if we go back on this and we go to the search we have a search grid over here the similar field we also wanted in our field so let's go to our top we have over here public is search field visible I don't have to Boolean in public let's pause just hit save its field f e l d like this let's hit save and now we want that this thing should be easily uh viewable if we go to the home this building is not there but here it is visible so in order to write this let's go to our top nav okay we have all this stuff let's go to the one another div we are going to have another div and where now we have input type is equal to search let's hit save and now you know apples you can see our field is available over here so I can do one more thing uh what we have we have what buttons the titles we need we have this title let me just try to give it a merging and like this so I need the spirit to be present there so what we can do now let's try to write this field here let's do a long one over here but let's see if I can input this as a list item over here okay when the search is also available over here you can see clearly over here I have this search field also now this search will can directly get the link with this and first of all we need to style this search bill as well okay so in order to style this thing let's simply go to the uh give it a class of let's say search list search playlist now let's simply copy this go to the CSS section and here we can do something like uh if you want to give it a style please give it a border we first of all set the Border let's see over here okay we give it the width of let's say 350 pixels just like this and then I give it a border radius of let's say 20 pixels over now let's hit everything let's see everything and see okay we want to give it a let's say height of 100 pixels which let's give it a fix here 50th pixels of height of klg 40 pixels of height I think now this is good okay and now inside this we want uh so it will be input Dot this and now inside this I want to style my placeholders so here I can do input dot search and for this the placeholder will be color will be Gray to gray color okay let's say go to the HTML and what is the placeholder we will now catch from over here the previous holder which is quoted over here is what do you want to listen to so I write what do you want to want to Sim 2 let's now hit save and I get this thing over here now we can also assign this thing with more Focus now let's go to this tag here to this placeholder we have the placeholder over here so if we go down down the pink some padding should be there and let's give it some things directly over here let's say the padding should be 10 pixels let's just save let's give it a recording results of adding okay so the font size should be let's say 14 pixels on where it should be bold okay let's say 400 500 okay the spacing should be I think one pixels but it should be not on Facebook 0.5 would be absolutely fine for my thank you okay so this is also visible to me now and once if I now go I can also do input search and then let me just open the color of this gray okay yeah so what do you want to listen to and now here comes the observable thing so this search icon will be integrating afterwards for me it's most important that this thing should be only available if we are on the search page so how we can do that let me show you this that thing as well uh for that I will be requiring a common service so over in the apps I will be now making services and here in the services I can now make a file toggle then I say toggle or let's say search bar dot service dot PS and now let's create a service explore class which bar service like this and because I want to provide that in root so I will be doing at the rate injectable injectable I like to now provide them inside the root provided in root and now can import this injectable as well this is done now I want to show public is search visible and now this will be a new Behavior subject Behavior subject Behavior of type Boolean and the default value will be false now let's also import this from RX GS Quick Fix add all missing Imports let's remove this hit save and now this is file now let's go to our home section let's go to our home section where we have the pages we have the home and we click on this home section here on the Constructor now I can have this as P stands for search bar service and now I can now import this over here and here now on the click of search when I click this thing search let's see I am now clicking on this on click of this search or navigate to you you will get to search I'm going to go over here so if I click over here now I can do something similar to this and here I do this dot SB dot is visible dot next to set it to true okay I think you are getting this thing and now this this subscription can be easily be subscribed by the top left component over here so let's go to the component and the component I have the top now let's go to the Ts for this let's also inject another dependency like this let's go over here hit save and now this SB can be utilized and the things this can be utilized is that I am now going to have a subscription over here I'm going to subscribe to the value here I'm going to get status and now I'm going to do this Dot is search visible is equal to status just like this and now this field can be stored in the NG if condition where I write if this is true then only be visible otherwise it won't be visible so let everything get what are the issues let me just check this over here property okay we are indeed okay so here also you need to assign the type as Boolean click save and now everything is fine as soon as I click on the search this thing says visible and now on each and every click what we can do let's go to this uh home.htable just like this and now uh we are over this home page click on this HTML path and now we can click on each and every page let's say search on navigation we can do something like this let's call this thing and inside this we are just calling the page name let's say this is home okay home search this will be library library and then this is going to be playlist hit save now everything is done we go to the TS section we give it on navigate we accept a page name over here let's say page name is of type spring and now we check if the page name is equal equal to search at that time we do something like this and whatever the page name is we send it as Falls so that I can find that thing let's save over here navigation is the function name let's save I click on search I get this I click on home press everything is gone but when I click on search I get the search bar so this is also quite visible so I will continue in the next one till then bye bye have a look on this do a play pause and get to know more about the angle of how we can create each and everything that is possible each and everything that is possible in the vanilla JavaScript and modular typescript that is also possible over here we'll see you definitely in the next one so now we are going to make the audio player for this so let's simply our app is running we have been left off in the last so here when we click on a home this is our home tab where we have these things and then we were having this uh playlist section we also made the login page which was similar to this and then we also had this search where we could type something and get things done just like this and we also have this clear button if you can see over here okay so everything was available with this search so I think everything is looking similar and now what I want that if I go to uh if I go to your library I should be able to have uh the song played so what uh I will do now if you go to your w3school section we have a type through which we can play our audio okay and here with this player we also have playback speeds and we can choose the playback speed as well there is a lot of playback speed also available so I will now see how I could do all the stuff in this let's copy this and let's go to for testing this purpose for testing purposes we will go to the uh let's see if we can place it anywhere let's say I am going to place this in your library section so let's just go simply to or what where we have this HTML file and let's just comment on this thing for now let's now everything will be reloaded actually let's check if everything is fine and working with Ruby file let's just have a look over here let's see let's scroll down and yeah everything is building first of all I remove this outlet and now let's see if this thing can work and for this we also need some songs so uh let's download one song Let's download a song let's say Michael Okay so it's it's dangerous song download let's try to download the MP3 for this let's download this and we can then try to have this thing played I click over download audio for this downloading the audio so we have this already downloaded let's go to the download section let's copy this and now we will try to uh paste this uh in our working directory where we are working currently so over here in our project section we have this modify clone under the source and under the Assets Now I will be placing this term and now let's link this to our songs menu where we were having that thing so in the SRC section I will be now doing this asset slash and when I put the effect flash let's just link and I will get back to you so what we can do now let's have this our app let's also go to our page okay so we were developing the site over here now what I need if I click on one of my page I should be redirected to another page first of all let's try to click on that let's try to go to the HTML file like this we can go to our Pages let's click on home let's click over here and now I want uh in this playlist I should navigate to this uh songs page let's create that component over here really quick so I am going uh going to make a NG generate component and I want to go to the pages and want a particular song page okay so this component will be treating a particular strong page so I think that's absolutely fine and now the strong speech I want to link it with the let's say I want to link this with something like this in my paths section I want to link it like this where I have uh let's say strong Flash and now I want to inject a dynamic route inside this so that I can place whatever song is available that song can be provided over here so I need that something some ID will be provided to me over here and the component rendering will be on Strong's component strong component let's quickly fix this at the input um do I have the input add import not importing let me import component from this let's hit everything save I think the save is now working and now now is right here that it will be your song ID looks absolutely fine now let's go to our home where we were having that all data we are having this song data over here now let's try to give a song ID song ID let's say the song ID is one similarly we can have another song we can give all the songs IDs let's say this is to let's say this is 3 okay and similarly we have some id4 just like this now let's give it a strong idea of file then I will say some ID of six that will be having a strong idea of seven in my case it's 7. then it will be some idea of E8 it finally it will have a strong idea nine the total nine songs are available over here so this thing is done okay so this thing is done now what I can do whenever I try to click click on a sound okay let's simply check where our song card is this is a song card okay and now when I now try to click on a song card let's do a click on this click this should now or I do router link and the router link now should be forwarded with or I can do something like this Auto Link let's say for now the router links goes to Clash and let's see what the routing was too strong we had this song we had this out as song and with this I want the ID so ID can you know easily be uh available when we do something like this inside this song Sound let's do a dynamic ID injection let's make it a dynamic thing something like this with a plus of okay I'm I think you are getting the point what I am trying to do and here I can now have this and here I can do SC Dot com ID let's hit save now on our URL we should know pretty much hit but let's see if I click on this it was over let's check this it wouldn't be just like this it should be like this okay let's do one thing make a click on this run click on navigate which song boom over here okay and I click on navigate to song let's do something like this and when I am trying to now go to the songs I will receive a strong object over here let's give it a type of any inside this I will be now receiving the song and now I want this dot router I want to inject the router over here now let's go to the Constructor section of this Constructor is available over here I do private router router and let's string the router from this thing router is now available let's go to the Quick Picks like this and here I can now do this dot strong for this dot router let's router dot navigate and now I want to navigate to let's say Flash and then it's song and then it's slash and then it's strong Dot com ID was it song ID because now click on this let's see if we have some errors click over here go to the toes inside the source to the room we have this home TS files like Lincoln home.ts just like it and let's do a debugging over here and now I try to is it going over there let me just check oh okay all right am I doing something like this okay Go slash one box okay so it should be like this okay why is this thing not working around let's check we are clicking on this account and then we should really warm because this has the entire iteration to it or let's say we can do one more thing let's remove this function from here let's remove this just like this uh let's also remove the router from this class let's move this and now what we can do we can supply the entire song ID over here we can do it something like this on or let's say ID is equal to song ID which will be sc.com ID now let's go over here and I'm now trying to have the input from here let's hit on public let's hit on the song ID or the it was ID or type string okay just like this and now I can do on navigate to install just like this okay now I can do private private router router let's import this router okay now I can do something like this this dot router dot navigate and where we want to indicate we can also make the URL for this and there URL is strong slash and we can do the dynamic thing over here just like this and now this will be this dot ID effective and now on the HTML part of this ID is available okay and if we go in the songs card songs card now ID is available I can have this ID as string a number now this is also working ability fine and now on the button section on the button section I'm gonna register a click event and on this click right now I wanna remove the function whatever is supposed to mean it's nothing we try to go back control section you can if I go now things are available but no I want to see what IDs are being forwarded we want to see what id is having converted this thing so this is the ID you know each iteration we are always sending up it's kind of term ID to this thing okay and for reference as well we can just try to print the ID with this so that we can have your ID is there we do ID in the IDS let's see if IDs are available no I can't see the ID I guess no ID is not visible let's see why the IDS are not getting distributed by the way I am passing the form ID so this form ID is here you know here we are also asking this already just like this ID we are passing this ID let's give it a song ID Name ID ID hit save now here it will be also a strong ID let's hit save go back do we see any numbers okay so this is over here okay that thing is locking okay got it so now what we're gonna do is over here and go to the HTML and actually for now let's simply do a comment for this thing to this but actually we want to pass the IDS over here yeah let's pass the song ID like this and it will be SC dot song ID just like this let's exhale we have the song id1 we have this Omega E2 and similarly to some ID3 so everything is available now here with strong one in the strong one card in the in this data where we have one data now we can have another thing tongue link okay so now here we are going to provide the link for this song and it's under assets slash we can get its d-a-l-g-e-r-o-u-s dot MP3 It's Dangerous slash MP3 now when we go to this file we have something like this now we want to make a div okay we want to make a div class in V MP3 player container and it will be a container fluid let's now simply select this class let's go to the CSS folder let's do a display is of flags with flex direction for this is defined by uh let's say column column justify contents toward this Center align items what is the center give it a height of 500 pixels let's save everything now and now we want to design this page okay so to this page I wanna give it a style of let's say the background if I do the background color let's say it's black below you can see everything is just fine graduate of 100 VH everything is fine let's go back and let's now take each color from over here I'm just gonna will be a preview point to me and hit save go to the song Two and now this is one thing you can also have gradient uses gradient now we can generate a CSS gradient so I take two colors let's say I'm now taking a black green let's say a green I'm taking green with a color of black like this okay and now I wanna repeat the degrees let's say the green is 180 degrees okay and the zero is also 180 let's do it as 0 now I wanna let's say the one is let's give it at 90. yeah this is looking fine and now you're going to some shared over this no let's uh feel free of this bedroom no over here I can paste this background now I have what I wanted now one more thing what you can do over here when we go back okay so you have this login page that looks absolutely interesting and now when you click on the song we have this page now the more this page now I can now give a call let's say it's a div of class and here I will be showing all the things which are required let's say I'm gonna have this MP3 player card it's a MP3 player column let's simply select this thing so the CSS for this thing now just like this and here I will be doing the display of x I will be doing Flex direction of column light gray and the background color will be background color to this would be some color which I have to get from over here okay let's grab that you know immediately yeah we'll be having this shade of tone through this let's go to the CSS point for this one will be over here I want the height should be let's say 400 pixels the width should be set underneath pixels the more videos just let's save everything and see what we get okay this is the thing let's remove the border from now I think okay and it should be just different contents to Center align items towards the center okay and on top I need it to be 40. here now we can have the shadow that's PSS should go we need now let's confidence and now over here quickly real quick this is also looking pointing eyes and inside this now inside this I can place my data whatever data in wire so when we are going over here now I can have a audio player on this let's say now we can have what we have in in real while we were doing all this stuff let's copy this of this thing again okay nothing over here and inside this I want the air to be available you can see some noise some available over here you can also Design This a bit for example here we have some which we can see clearly and you can do this now let's see inside this element so this I can have a color of red um which match to what the main thing I have let's say the page color and to this element I'm now giving a style dot background to this color okay let's hit save now this looks me clearly nice for now what else I need is now I'm going to this page okay whenever I'm going to this page now this thing should really grab the data so for this I can also utilize the feature of using the service because now the data is going to be available from our accounts card on the songs card we have this we have the data and we can send the data back to the strong cart page so here I will have a thing called a song data service not TS I can do export class strong data service just like this and I know now need a public data which is going to be of type subject and the subject is obtained any and that is equal to new subject and the default value for that will be absolutely blind let's say it will be a blank thing now in order to provide this to the entire class I would be requiring like this and will be providing it to the root of the class cells let's simply information at the angular form and now in the songs card I will be interacting with over here let's say this is private SD for strong card and strong data and we can now import this like this if I go to SD section of this then when I am clicking over here I can SD Dot next is the SD version of next I can now provide the data over here and the data is going to become nil come near the thumbnail is going to be this dot play list thumbnail then the title for this is going to be this Dot instruction code this is going to be uh the description this is not description and uh link I also will link now let's say input the public link and the link is going to be your type string and now this link is gonna transfer wireless link the dot link so now I'm using that subject from the rfgs um now doing a next that means please provide this data program so I will this song data will be subscribed to it so now I am sending this data to all the components who are interested in subscribing this before doing this from my home section now what I need I need to cover my link as well so you can see here I have this song link that we transferred we do a link is equal to SC box only just like this and if I go over here you can see link is available obtain a problem so I'd say that blue screen as spring oh you can do just click on this and this thing is a spring node let's say this is our language um it's a string single type strings and it will Spring okay what we can do now and where I'll say yeah this is the link Maybe the thing and now we are inside the data I have this thing let's grab this thing into all places we have this special no give it a blank instance where for now I don't know what the link would be let's give it a blank instance because that e should be present in all the available Fields that's absolutely fine and now uh the data is being provided is being sent to this now the same exact thing I need to take from where I'm going to subscribe to this let's go over here and now we can go to the with songs page just over here and now we can subscribe to this let's say public account data some data is applied any absolutely fine we are now subscribing to this let's say another private universe and now I can do this dot sd.com data dot subscribe and over here now I'm going to get the data and I want to sign this up song data is equal to data definitely this thing is absolutely fine now whenever I go to this here for this I am now going to get this file and file will now be available via song data or link let's hit save go back I click on this and what happens now I think this is pretty much ending the data let's go back and now try to Google all the things so that we can see how things are working here let's have a mi and SRC and this is going to be a link on data Dot some thumbnail let's see if we get this thing over here we're not providing the data correctly let me just check my subscription that is I think what we are doing considerably fine we've subscribing to the listing and if we go to our home section over here the things are thumbnails already and everything is available over here let's go to this section here we are on this we are doing a next to this thing we also find and then over here okay this thing we can check just by doing inspect on this let's do a inspect okay and on the source on the source section okay now we are going to check for this thing let's go our song DS over here and as soon as we click over here we see that we have some data or we can also do one more thing uh can you read properties often defined okay okay got it yeah I I would be now doing in the songs while oh yeah I have this HTML I can use this question mark so that I can know yeah whenever this thing is available to do let us know if we click on this we still have some problems section over here where we forward this thing you can now also do a console look towards the what the data we are getting so when the person stands the thing is there but when we do tribe remove this we get the data as follows so the first okay we are clicking the third one okay let's click on the first one so this is the first one let's now remove the install from here let's go back let it reload let's click on the first thing we'll get to this again let's remove this let's control log actually we wanna see the things available in the console click on this we get this thing okay let's go back and click on this we get the thing again definitely things are working things are being provided over here on a c but when I'm trying to place it over here things are not available for some reasons so let's just try to have some delay let's give it some delay let's say after a set amount of say one second proceed with the data right let's click on this it should be something like this then this should be available but we have the next this then navigate to that page we are doing the next to this thing but uh okay let's try one more thing let's go to the Our Song section here and now this link we can try to print it somewhere let's say we are we want to print this over here let's do print this song meet up rod let's try to print this okay let's click on this is okay we can also do uh something on it we don't need this variables okay we don't need this into nothing available from here what we can clearly do we can click it to a public and inside this we can access the data now something like that let me show I can do something like this sd.com data okay data Dot now I can access this thing is single and from this I can access the link and getting away this thing is not working let's click on this see what all things are going to move this thing remove remove this remove this thing and the suspect of file foreign here we can see we are getting this data let's just try to print the title from this over here it's a H1 and here I will there's some data thank you passing this thing from our songs we can see over here we are subscribing subscribing to this thing and when we click on this just like this you go on next to this thing okay we'll just we'll do one next and then we have this dot link data should be available over here level everything is going fine and on this song card over here if we definitely click if you go over here and we try to place the link like this it's under asset slash d a n g e r u s dot MP3 it says save now we have this thing okay so here we are getting that thing no problem so we can do another thing another approach is also available where we can then render all those things whatever we require let's save over here and now let's click over here let's also remove this thing as well and now here where we are just doing all the stuff another thing is like while we are sending the data through who are navigation we can also and our data as well so here here we have this and here we want to provide a state into the state you can provide the entire data so here let's say I'm I can now provide the data over here and let's commit the screen okay so the entire data knob can be sent or can be sent over the state just like this and now this data can be achieved the way we were getting that thing yeah over here we can now have private activated route you can have activate account here just grab this thing now this means that from my activity or whatever route is provided to me from that I want uh to get the data okay so from the parents now I can do a pipe on this and over the pipe I can know you the map here I get some data and I want to return window Dot history it was eight just like this I'm going to return this and now I can show you the data which is available when I do a subscribe over this and as blue or subscribe I do a data now I can do a console.data hit save and let me also work on solo so that you can see what I'm going to show you let's remove everything from over here when I click you see the data is available to us we have the navigation ID we have the description link thumbnail title everything what we require so from here also we can somewhere also use the data so here I do this Dot Song data is equal to data now I can do something like data is available then take the I link from that if I now click on this this is okay okay sorry this should be only let's see what key we were providing while we were clicking the data from here on card we were having this community so if we click on this and go over here to the HTML file we have this thumbnail key go back let's click on this so you get this thumbnail whose thumbnail over here okay so definitely we can have this thumbnail over here we can have the breadth as let's say 100 it will go back again click on this and you can see a thing over here let's go to the spelling section and into this we are doing everything else Plex so let's go to the HTML part of the inside this now I want different dependence inside div that this thing would be there then inside a div you'll be placing this thing let's hit save okay for now I am only interested in uh I'm only interested in playing this song Whatever the song is there so here I will be doing if this song data is available then I wanna have the link address let's click on the first and now I have the link and we can also do one more thing if I can show you here inside this I I will show this card only ngf based if the link is available and if the link is not available then I can show something like this let's do something like this where the link here I do if the link is not available sorry if the link is available I am going to show this card but the link is not available then I will be doing a conditional rendering where I will be showing this to my users H1 Northern I will no song data available you can show something like this I think you are understanding this thing or you can show you I can do something like this to show why all the people like this is the thing we have nothing to show okay so this thing can be done or you can truly do something like this or one more thing can be done we remove this thing over here just like this and we can do on init as only because not this is node which is not strong data dot link then we use this Dot and now from here you can have a private router round router or uter routed or a u t e r and from here we can do this router okay not navigate and then I want to navigate back to the page if I click on this I can do if there's no router is equal to null or this is not this is equal to undefined I can do something like this or operator let's click on this and another thing is instead of checking for entire thing you can do if this is equal to undefined then navigate to valence and this can be done after we have got the data just like this if the data is there then absolutely fine if this is if you can see and calls note here I can see dot link is blank okay so here the link is not blank but here also link is not linked but now we can check if the link is equal to this then the link then we are not going to that link but if the link is there then we can definitely go to that list thank you so this is definitely a thing so we can also show a window alone to users like window not follow it we can say no um available or selected we'll just selected although let's hit save and when we click on this no Song available for detected album no songs available for this acted album no song and then we can also do something like this and something like this selected album with and now we can show the ID for this so we drew this Dot Song data and we just need to forward the ID for this so we can go to the section viewer where we are providing the data here we can also give it an ID and this is not song ID just like this now this also has ID so I can do dot ID over here get the ID let's let's save to everything and when I click on this no song data available okay so with id2 and if the one is available then surely we are going to play the song that's also absolutely fine and the last thing what we want to do over here inside here I want to render SRC the Spotify icon we can see SRC is equal to assets slash 45 dot T5 underscore light ligst and now when I hit save I can get States let me spell this correct it sits okay and here we can have a width of let's say 200 totally fine notebooks thing should be placed inside so okay this thing is taking flexible should be on if you find this it should be justified content Center radius you play Flex plug Direction column justify content face around Oh weird reasons this thing is not taking here so this thing is creating it in the room this no I want it everything should be covered let's remove this thing this thing is a little just like this moving everything from this produce whatever images we are using see I'm using IMG background color should be set to hsl where I have zero zero percent actually save and then we would just have a manual and break and then get this thing done but I'm not getting my this thing is performing the way I wanted to be never mind I can do it something like this I can hit save and to the CSL for this now I can have be displaced it to um absolutely fine and here we're going to the image tag where I have this image tag in my songs section here I can also give it a term nucleophile and you can have some padding let's say turn off padding 20 would be fine or let's say I am having a merge of 20 pixels yeah we greatly can have 40 okay if this is fine we have all the things cooked to this thing now and if you want we can also have a H1 let's say let's play don't move under elements over here are taking so much of press I think that should be pretty much one um go back these wall doesn't have any song let's try to add one more song let's say we have something known as what song we can have let's say we have B suban with a download MP3 let's connect to the net I guess let's connect to the net it will download another one music okay let's now simply connect to this but definitely if also you don't require all the stuff completely we can now have this thing okay let's go right I think we are now connected let's go and search for the song what we require let's go to the site where we can have this thing downloaded let's download this thing and now we have this thing as well let's go to our download folder once again click this paste over here and the name is reasonable let's quickly copy this and this is the format of MP3 perfect so let's move to a file where we have to detox this let's go to home and let's say to the fifth item we are now providing this link it's under assets slash this dot MP3 no one two three four five we go over here okay so this was pretty much it regarding the thing now our apps covers the making of our user ID okay you can make a user ID just like this okay we can also go back we can also we also see how we can have a search bar like this we also see how we can have this section division we also looked on how we can have a conditional rendering like this we also see how we can have the looping we also see how we can have this uh style uh you can have this scroll bar section uh types style we also so if we click on this how we can have something like this okay and then we can obviously go back and also have this conditional check will we check for each and everything okay where we are clicking and direct all the things are available so I think we are done with this also while you want to have um sorting that sorry it's not some filtering that can also be done if you go to the search we write something uh using this names we can then store the things available over here so let me also show you how that filtering can also happen in our app now let me show you how you can Implement that as well so in the top nav okay the main data is available in our home.html file over here in this browse category section okay now I want to filter over this so how that can how that thing can happen let's see now you can see when we click on the search or we click on the home we get all the focus and all those things but when we go over the first section here is uh here we want to type and we want to filter over this so that thing is available inside this component section in the component section we have this top nav okay and in this top nav I want to put a event over here let's say I am putting the key down event key up we can also do key up we can also check on change let's do one change I say filter browse filter browsing list okay we do something like this and now what we are going to do we are going to supply input and outputs into this know what I need let's do a formatting on this and now I want to provide the fields data as output to this component so I write output output just like this I can have a public I I write input filter result which is of type event emitter is equal to new event emitter multiply given your meter is a is a angle is inbuilt class which helps us to and something whatever we require let's remove this undefined Mark over here okay and inside this uh if I go over here let's take the reference of this field as uh input search reps and moving inside this we are going to now pass this input search ref just like this and here I know that I am going to have the input element input element and now I am going to do something like this dot input on emit we are going to emit some value and I want that input element Dot value is going to be emitted from here now in order to catch the value we just want to have this thing and the top name is directly a child of this so here we can have something like this is equal to this I can move forward res Focus thing now here I can get each and every term whatever is provided to us here we are going to receive the event let me show you this event on window.onaut function whatever I type I will be now getting over here and this is going to be your type screen and here I'm going to receive an event let's hit save and now go to the search section I write whatever is available now I will be able to get this thing okay so one more thing let's give a console.com given now here from the top now we are getting this thing and over here we click this is our output here is the thing and this thing has been provided from the HTML itself on change of this input let's first of all see if we are getting some output or there is some problem with this let's go over here let's go to the first section I tried to write something I'm not getting that let's go to this here I have placed this touch element here let's try to do a console log let's check if we get over here input element okay let's go to the storage let's try to write okay let's do one thing go over here let's give it a type of text for now go to the search again let's try to write okay we are getting the things no problem let's again do a search over here hit save remove everything go to the search panel okay we are getting all the results but now I'm going to do it on key down I want to access the data all key down remove everything and you input so I'm getting the data that's absolutely fine install I'm getting the data but if I go to the HTML now if I show you on window.alert you can see we will be getting the data let's go to the search component and I write 100 then it's D and it's DS so we are getting everything and one more thing which we can do instead of key down I want to have the data on key up now this thing is also fine we are receiving the data over here via the output strategy and now we want to filter owner array now we can do something like this that this dot uh browse all is equal to and first of all I will be making a copy of this let's say browse All Copy is equal to this dot browse or not slice so this will make a copy of this now I can do this dot browse all is equals browse all filter f i l t you know I can use your filter on this and now this will accept the function okay this will get me the um then the index and I want to search if my item dot includes whatever I am writing let's say I am writing this even and that thing is available you can say item Dot title okay here we have let's now search EOD okay you see something was done but now what I'm gonna do uh here so I can call something like this 4 over here and now I can do this item includes this then this Dot then return that item else return me return V let's say I want to return the call let's hit save that's absolutely fine what we're doing here this dot this is equal to or we can also do something like this just copying this like this we can have the slice like this this is the thing if my item.title DOT includes this thing then written that item and also we can again check for this thing okay otherwise written me the entire slice of that okay so like this also we can do this stuff so the main purpose is whenever we are writing over here we want to filter and when we push it back like when we just return all the data like we don't want to do it at that time we can also have all the things based on that so let me show you one more thing let's say this is the stuff okay in the slice what this is slice two slice copies your entire element okay so uh also just let me show you one more thing I do this dot browse data dot slice okay I do the slice for this and now the slice contains the actual data which has which is need to be uh available so we had our login we had a search we had our everything done into this excuse me or there is another thing you can also check for the truthy thing as well let's say if I do this dot browse all dot includes and what it includes dollar event okay but actually we want to find on the actual array so we can do if the browse is all dot filter okay here we are going to get the elements and we want that if the elements element let's do this element knob element dot title we can also do something like this is equal to dollar event and here we can do that the entire element should be two lower case I mean let me show you this thing as well and then this will return me some result res and now I can now also lock this RDS console log res hit save let me um action tools you can go to the console section in the search I write EOD c a s t s okay no you can see here I got the detail okay so here my data is available now I can do made for you okay I again go into Data do I do live okay is this t r e a m s here as we can see this is available so this was if this thing is actually there or I can do from the title includes dollar event let's hit save now let's see what we get if we go to the search section I write a right now A is in all six elements and I do a back now on the back I again get all the elements okay what I do I write t a m i l okay nothing is there because that is finding the that thing is available okay if I do fold cost this thing doesn't include that but I want to check for the exact same thing I want to check if this thing is available to this only that I can find the perfect match so I do pod csts okay something like this you can do and make sure that both of the things which you are providing is too lower case and this thing the event is also too lower case two in your case and also use the trim function to trim extra wide Services if you have if I go to this this section I do pod pause so I got the data the data is available if I do something like live streams this space and then also those pairs will not be considered because still the data is available okay so this is how you can do all the steps available so this is how we have learned our Spotify app [Applause] of you being a perfect angry developer so definitely try all the things on your own and if you like and enjoy the journey of being and of being able to understand the angular with full capacity do definitely give it right and this was the entire Journey with this project how you can do things you can do with the frame how it's easy to maintain each and every component and all the things module or approach rxjs and how it is easy to download and install all the app whatever available like this you can do the entire thing whatever is required the same thing you can add subtract all the things are available while you do communication uh in between your apps so thanks for watching and I will see you now in the next course

Channel: Create Finders

Views: 27,328

Keywords: react spotify clone, spotify javascript clone, spotify js clone, react spotify app, spotify clone, rapid api react project, spotify 2.0 react, spotify reactjs, spotify javascript, react reausable components best practices, spotify auth, spotify 2.0 tutorial, developer, spotify js, frontend, webdevsimplified, react music player, rapid api react js, spotify, js mastery, react music app, react music application, javascript mastery react js, papareact, angular spotify clone

Id: FzlwWh5lLVU

Length: 193min 52sec (11632 seconds)

Published: Tue Feb 14 2023