Angular 14 News Application | Angular with Tailwind CSS | Angular Project for beginners

hello everyone welcome back to my channel so in this today's video we are going to create a news app in angular so for creating this application we will be using angular version 14 which is the latest one and for creating this toolbar and side nav we will be installing angular material and for designing this cards and header so we will be using tailwind css so this is the first time that i am using tailwind cases in angular project so i think this is the great time to you guys also to learn this how we can configure them in angular project and use it all right so without any wasting time let's just get into the demo so in this project so we will be having this home page where we can see top 10 trending news all right and here we can see we have all the news here with all these details like who is the author of this news at what time this news is published the title of the news and also the description if you are interested to like read more about this then there is a read more option you can click this and you can go to that source and you can read more about that news all right and here you can see we have one more option of this side nav and this side now we'll have the list of sources so currently we are getting top 10 trending news across the globe which are which are which are trending at the moment but here if you want some news related to from some specific sources for example if i want some news from bbc sports so we can click here on this source and can you see that the things got changed here so now we are able to see all the trending news for the sports okay so this is the option so we are here having around 80 plus sources here which we can make use of it to to see all this news all right and the one good part about this project is this is responsive okay so if if i just try to just show you the mobile view of this project so here you can see this is how it looks in in small devices so here you can see this is getting automatically responsible if i try to increase the screen so this automatically takes the screen size okay so this is the beauty of this project that we will be also working on how we can create a responsive website as well all right so without any wasting time let's get into the video first let's go in our folder and create our new project so let me go in my folder here and we can create a new project by opening the cmd so in this folder just press cmd and hit enter so a command window will be opened in your in your folder you can see in the my project okay let me zoom a bit so that you guys can see okay so the first command for running it so first let me just show you what is my angular versions for that we can just say your ng version and we can see the version the npm version the cli version and all the details here so we are on angular version 14 the node version is this and the npm version is this okay so let's first create the angular application so for that the command is ng new let's give our name as news app okay and hit enter yup so this is asking for angular routing say yes it is asking for css so i always go with scss and this will take some time to install all the required packages so you can see our application is installed so now we have to just go inside our projects say cd cd space and we can see the name of your app and hit enter so now we are into our application so we have to open this in visual studio code so for that just press code space dot okay and now this will open up visual studio code all right so now what is the first thing we will be doing let's first serve this application let's compile this application first so open up a terminal and hit the command ng serve okay so this will again take some time to compile your code so yeah the app is compiled successfully and we can say this is serving on localhost 4200 let's open this on the browser okay all right so this is how your application looks initially so we will remove all this thing and we will try to add our own things let's see if if things are compiling correct so let's add news app save and check just so our application is working correct so let's just try to install angular material so that we can have that toolbar and the side nav okay so for installing angular materials so we have few steps to do so i will always recommend going on this website to always see the correct steps how we can install the angular material so we have this angular material.io so let's go in this website so here we have this get started there and there you can see we get a proper command to install the angular material so let's copy this command and paste it here and hit enter so it will ask for a few questions there like what kind of theming you need so your it is first asking for installing the package i say yes it is asking for some choosing this so we can go with the purple green maybe you can choose any and it is asking for typography style so yes and it asking for include and enable an animation so i'll say yes and now it will update your package.json accordingly so again it will take few seconds to install all those packages and update few files as well in your angular so can you see this file got updated according to whatever settings we have selected so now we can see our angular material is also installed in your project okay and now we need to install tailwind css as well but before that i want to just check if the material installed is correct or not okay so for that what i will be doing i will be copying this toolbar so let's go in the component and copy this toolbar okay and let's take maybe this uh this one maybe this is cleaner so i'll go with here and i copy the first one okay and i will be pasting it in our html okay and now this throws error because we have to import so for that let's go in the api and import this first line copy this first line and let's go in your module and just put it here okay and we need to have this inside our imports array so matte toolbar module okay so this is added in the project and you can see the ergon and we can click on save all save the changes and let's see if our code is compiling success or not let's wait so i can see compiled successfully and let's see the changes okay so i see the css has not been applied successfully so let's just check it why okay so let's just stop the application and try to run it again so press ctrl c and again just run the command ng serve yeah so this compiles again success now let's go in the browser and see the changes let me save it and let's check the changes okay so i can see now this is how it shows it in black color so but we need uh some purple color here so what we can do is we can just make use of a color attribute here and we can just put here as primary okay once i save this so this color will change this to this color okay purple okay so i can see this material is working fine okay now i want to install mint in my project so for that let's go on this website tailwind css.com so here it we have a proper guide to install the stalemate css in our project okay so we have this already done so we don't need to do this so we have a project ready we need to ins run this to command this is the first one okay let's copy this and let's go here in the power shell and paste it hit enter okay so now this will install the tailwind css package okay and let me copy the second command as well and this will basically will create a config file so you can see this is installed now let's create this second command npx tl css init so this will actually initialize a tailwind css config file okay so for now we are not going to touch this file so because we want whatever is there by default okay but we need to import few things so that we can check it from here so we need to import these three things in your project okay so we have the style.css the global styling here so go inside this and you can import it here on the top okay now let's save it all right so once we save it now we can verify if tailwind css is installed correctly or not so let's copy this and paste it below or maybe we can replace it below this toolbar okay so we can just check if the css is applied correct or not all right so let's go on the browser and check it so i can see this is applying correctly if you try to change the text color so that you can do very easily just by saying here as text red and we can give some shades as well so i want to give shade of this 400 i can save it and i can check on the browser if that changes okay so let's save and check i see it is not working again so what we can do is we can again stop this compile so for this control c and again run the application okay and because we are adding some configs that's why we need to uh recompile your application again that's why so this doesn't works in that way that's why we need to stop the application and again start it to apply those changes okay so let's just wait for it to get ins compiled again so i can see my code is compiled but there is some warning here that content option is empty okay so what we need to do is open up your tailwind config.js so it is here so you can open this file and inside this you need to put some content here so what we can do is we can point that in the source in the src okay but all those paths okay because we need to apply this somewhere so what we will be targeting we will be targeting all the html dot html and ts files okay so we can just say your html comma css oh sorry the ts the typescript files and once we save this so i will not see this warning again okay and now if i go on the browser i can see the color is applied successfully okay so i can say this hello world in red color so now i can say my material and tailwind both of them are configured successfully in my application all right so now let's just try to create that card because we need to create a site nav and we need to create a card okay so let's just target with the site nav first and then we will come to the card all right okay so for the site now what we need to do is let's go here in your code okay and inside this we will be adding few lines of code for adding those site nav so let's first write those things let me remove this one okay and for the side nav first of all we need to have a matte side container so we say matte side nav container okay all right and inside this we need to have mad side nav okay so here we can create all right so this is the matte side nav and inside this we will have all our contents okay all right so first to fix this issue so we need to we need to have uh import or the site nav and this i guess the sitemap will work for us so first of all we need to import the site now all right so for importing the sitemap so there is some package so let me just go ahead and write it here so we have to import from okay we can say add the rate angular slash material so angular slash materials slash we have side nav okay so we have to import side nav site nav module okay and we also need to add it here in the import array mat site nav module okay so once we add it so we can see this error is gone all right okay let's save it and let's try to add the content in the matte side nav okay so the matte side now we will be having an image on the top okay for our logo or some author what we need to put so let's add the image okay and we will give a class as of star because this will be like a logo for us and we will be using matte elevation of zed index okay so image will have a source source we are not giving it at the moment we have this alt and these two has been added so this is your image which will be there on the top of your site map all right and below that we can give a heading to it we can just say h4 class we can say give any name so let me give the channel name its program and below that there is something called as matte divider so we will be adding that as well okay so for adding this matte divider again we need to import few things so for that so we you can just go on the website as well to check but if you are if you already know what thing to import so you can directly go in your module and write it down but if you're not sure so you can anytime go to the website and try to import but i know from where i need to import so i'm just directly writing it down here so it is coming from angular slash material slash divider okay and we can just put here matte divider module okay and again add it here as well mat divider module so that is also added okay and we can see no error here as well all right so what next we need to do is so after that we need to have all our sources okay so for having the sources so below this map divider we will add the list of source for that we will be having a button okay so we can click that source button and we can display them so what we will be doing we can add a button so for adding a button we will use a map button so let's add a button first okay and let's give a name to the button as let's have a span tag to give the name so this will be abc news okay so this is just a source i will be creating a single source and that will be repeated and i have to use matte button okay and i will give a class as menu button at the moment all right and let's add a icon as well so let's use a mat icon okay and for the mat icon we will use event note so there is something called as even node but here can you see it is not working so let me just tell you what i was trying to say so if you want don't know where to import so you can just go here okay search for icon go in the api and you can directly import but if you know what has to be imported then you can directly do that okay let me just paste it down and also put it here all right i can see the error is gone let's save this and let's try to review how the page looks like okay all right i don't see that at the moment because we will be need to style them okay a bit all right so now what we will be doing is so we need to create a button to open the side nav all right so for creating those button so what we will be doing so we need to add something on the on the header here somewhere here okay so for adding the button again let's go here and just put button okay and this is a matte icon button so we can put matte icon button so this is the attribute okay and let's give a class so i will be let's give an example icon or something like that okay all right and inside this i will have two icons okay so first icon will be okay so first for the first icon i will have a menu icon so i can just give here menu and for the second i can i will be having close something like this okay now let me just show you this changes on the ui can you see so we have two button so this is will be for opening and this will be for closing the side nav so now we need to make that thing clickable so we had those too many uh menu open and close buttons so for making it clickable we have to open a side nav so what we'll be doing we will be using a template reference variable which is site map so we can make use of like the hash site nav i'll create a and i'll initialize it with this value which is called as mat site tab okay okay so once we have this thing uh in our template so what we will do we will be using view child on your ts file so for using that let's go on the component.ts file and we need to import first view child okay so once we have the view child so inside the view channel we have to call that template reference so that we can make use of it to open and close the site nav okay so let's use the view child here we say add the rate view child okay and inside this we can inject matte side nav you can see this matte side left coming from angular material side nav so let's click here and we see on the top it is imported okay so once it is imported so what we're doing is let's give a variable name like side nav okay and we need to initialize it with like let's give a type of it as a side nav okay this should match these two okay so we have a side nav ready here and now we make we want to make it open and close by using this all right so what i will be doing now is so whenever whenever we are on a mobile screen so we want to open that side nav so for that what we can do is so we will be using something called as observer so this observer is basically observe your screen size and based on that condition it opens the side net for you okay so for having that we need to go inside your constructor and we need to inject observer like breakpoint observer so let's try to inject that so we will be using private yes this is the one breakpoint observer and we will be uh writing this logic of close and open inside your life cycle look called as uh after viewing it okay so for that we need to implement that interface after view init the second one okay and this will be imported on the top as well from angular okay and this complains to him implemented so let's go ahead and implement the interface and inside this we will be writing that logic okay that whenever your screen size is 800 then please open it and stuff like that all right so first what i will be doing is so i will be saying this dot okay can you say this sidenav when i click dot so i get option called as opened okay and this open takes some boolean so what i'll do is so i'll first make it open i'll make it as true i pass a value as true so that it should be open all the time but if the screen size changes so what we will do we'll be using this observer set this dot observer okay dot observe so it has a method called as observe all right and if i hover on this okay so can you see this is an observable of a breakpoint sheet can you see this so what we can do is we can make use of it and we can subscribe it so for that we need to put inside what is the observer state you are you are expecting so it accepts a string so what we will be doing is so we will be putting it as a string inside that we say max width all right so let's say max width inside the max width you can put your 787 which is the mobile screen size starts from and something like that so we can put here as a max weight of 77 pixel and it will observe that max width and based on that we can subscribe all right we can subscribe and inside that we have a response and this response we will be using here okay so if if our response matches if it matches that all right so what we will be doing is so we will be saying okay so this dot side nav dot we have a mode mode over so i'll explain that once i will be showing this in the code so we have three uh state here so over push and side so we'll say over okay and i'll say this dot side nav dot close so site now we will get close so i want to close the site now and it will be all your screen okay but if the condition doesn't matches so we have an else block and inside the else block we'll just say opposite let me copy and let me paste it here and i'll say side and say this one as open okay so this logic has been added instead of after viewing it all right and now what i will be doing now is so i want to hide and show that correct so i want to hide and show that whenever my whenever someone clicks that i want to hide and show so can you see at the moment i see my side nav okay but if i show you here let me just show you what about that break what does that breakpoint does okay now let's go in the mobile view and let me just show you can just have a look here if i increase it can you see once i close it once it is less than 787 so if i make it 787 so it gets closed if it is increase if it is greater than 77 so it opens so let me show the logic how it has been how it has been working here okay so whenever it is 787 so it checks that value and it closes that it closes that side map like for that response if it is greater than that and less than that okay and once i increase it or i decrease it so once i decrease it so what it it comes in this block it comes in this block and it closes that if i increase comes in this blocks and it opens the side nav so this was the logic which i put for the mobile view okay and this observes automatically and does the job for us okay all right so now let's go forward now but if you see we have two icons which is not good we need only one icon to open and to close okay so this is the conditional based thing so what we will be doing let's go in your html file and add those two condition so we will be using this template reference for for closing and opening that okay so on the mat icon we have a click okay and what we will be adding here is we can say your site nav dot open so we can say this dot side sidenav dot open because this is for opening your side nav menu and we have a close one for closing the side nav so let me put it here as close okay now so this will open and close the side name for us but still the icon is visible for us still i can see both the icons i can see both the icons okay so for that what i will be doing now let's put a condition here so we will have a ng if okay ng if what it will do so we have side nav right so we have side nav side nav or we can okay let's have it like this only and site nav dot open so we have sidenav dot open okay and let's copy it and paste it below as well because we just have to add a ternary to make it true or false so if it is opened then i don't want to see it so something like and if it close then i don't want to see this so if i put here as this this means side nav is closed when it is closed i want to see i don't want to see i don't want to see this menu icon if the site name is closed because we want to open it okay so if i save it and if the site name is opened okay then i want to show this close one close menu now let me just show you on the browser so you can see the side nav is open so i can only see one icon which is the closed one but if i click here so can you see that sidenav closes and it only shows your this icon open and close this works lecture okay now but i see one issue in the console and what is that let's see okay so this complains this is one of the famous error of angular okay so this makes it value true okay i got what is the problem is so we have to use something called last change detection because this is not detecting your change and the expression got changed from true to false and something like that all right so to fix that issue let's go inside your ts file and inside the ts we need to add a change detection okay because it is not detecting your change so for that what we will be doing let's import few things okay and inject something in the constructor and what is that something this is nothing but your change detection change detector ref so for that let's add a private okay why it is not working okay private change detection rev cdr change detector ref this is the one i was talking about this one let's import this can you see it is imported as well on the angular slash code from angular slash score okay and now we will be adding it in the last line that okay if this is happened then i'll say this dot cdr dot detect changes so it was not detecting a chain so now we make it to detect the change and if i save it and now if i go on the browser if i open and close i see no error now in the console okay that's how you deal with that kind of errors so this is done all right so what next we need to do is so now i see my side nav is ready so now let's try to make the cards and then we will focus on the apis okay so currently this is all static uh let's let's try to finish up the card and then we we proceed further okay so for adding the card let's go ahead in your html and add a few css sorry the htmls for it okay so i see i just have your uh this blog so for now we have a site nav and but we need a site nav content so whatever the content we will having inside our site nav content so for that let's write your as matte side nav content this is the one okay let's close it and now inside whatever you write it will be visible as your content for example let me add uh let's program rocks if i save and let me show you what is the beauty of having this okay and let's go on the browser and check can you see so now i see all my content here so whatever i write inside this block now so it will be acting as my content so let's now remove this for now and let's try to add the actual content which will be here inside this okay so what we will be adding so i have added a class here with uh with a class called as content and we have a matte elevation as z4 which is coming from your angular material so this is from there and we need to write some content here so what i will be doing is uh so i have a code snippet ready already for my tailwind so i have a section here so let me copy this section because statement involves all your classes and it can take lots of time to create this video so better let's have this uh ready out of the box okay so let me just explain you what what things i have copied so i have copied this section where we have this class is called as text gray 600 bg gray 100 and body phone so this is all your class is coming from your tailwind css okay so we have again this container just like your bootstrap so we have pics like px which means giving a padding on your horizontal padding of five and all these things everything is coming from your tailwind css now because we don't have any bootstrap and this classes belongs to bootstrap you have already seen lots of video of of prime where i'm using this container okay so we have all this code ready and now let me explain what what things i have so i'm having this selected news channel so whenever i select a news channel so that thing i want to display it here so i have it this content here selected news channel and if you go down so we have a div with the flex so that i can see all those in horizontal way so we have flex wrap here and now if you see here so we have a div here which will be having our content and we have all these classes there which says that for xlr screen let's have a width of one by three for medium screen let's have a width of one by two and we are giving a padding of four all around the card okay and we see again few classes for creating a card we have bg wide we have we are giving rounded lg like it will be around corner all those things and all those classes has been applied here if you see okay and if i save this thing let's save this thing and let's see how it looks on your browser okay so if i just show you on the browser let me just open it quickly and here so that's how it looks now so we have a bg right we have a background we have applied as a white color so that's all has been applied and this is the card how it looks so we we're not having the image at the moment once we have our image so image will be taking up the space and we have author we have published it we have title of the news description and the read more option okay so that's how your application will be looking now so so we have one car today let's try to uh add multiple cards and check if it takes the horizontal or how how it takes okay so let me just try to copy this and paste it four or five times to see the changes if i save them and let me just show you on the screen so yeah that's how it that's what the requirement is so i can see so this was the reason of having a flex and a flex wrap so this makes it like this so now we have all our cards in horizontal way manner okay and let me check the responsiveness how it responses for the mobile screen as you can see it's about the medium screen it is divided into two part for smaller screen we have only one single part and yeah that's how the card looks like and we have this open and close as well which is working fine okay so now whatever we have at the moment everything is static so now let's try to create our having that api so we need to have a api i have told you that i will be using an api from news.org okay so let me just show you what is our api will be like if you go on the news or website okay i'm not sure the website at the moment let me just search for it then yep so news api or so what you need to do is you just need to get your api key from here so you need to login inside this and you can click on here to get your api key okay so it will be like this so you need this api key all right so once you have this thing then we are easy to integrate them inside this application all right so for so now two things we need first thing is the left hand side the sources and on the right hand side we will need the news of that particular source all right so now let's try to create our service for doing those api calls all right so for creating the api call we will be creating a service okay so let's go in the app and create a folder called as service okay and inside this we have to create a service so let's go here so let's open up in the terminal okay so you need to be inside this folder service folder okay and just hit the command ng g s for service and service name is news news yeah let's take it as news new service okay and it will take few seconds to create that service so i see the service is created okay and now inside this service we will be doing our creating our apis to api calls all right all right so what we will be doing so first thing we need a api key okay so here you can have your api key okay let's create have your api key so i have my api key already so let's go on my on that website okay and let's copy my api key because this api key is required to do those api calls okay all right so now let's in the constructor have your http okay and to do the api call so we need to have a http client module that has to be there inside your app module okay so let's import http client module okay this one and you can see it is imported as well from std like common slash http okay now let's uh see what is the first api so firstly we will be uh initializing the sources so we have all the sources right so we will be initializing those sources so i say initialize sources so this is my method okay initialize sources so i want to return this dot http dot get it's a get call okay so we i have uh i have a link ready already with me so let me put that link so i will be pasting this link in the github as well so don't worry so you can copy them from there copy it from there okay so we have this http news api org slash sources we have a language as english okay and that's how we need to pass the api key okay so there is two way of using this i mean you can use interpolation way of also to doing the to do the skin string concatenation but i followed the old way of doing it so yeah that's how you can do so this api key is coming from here so we can pass this and this api is ready for initializing all the sources on the side nav okay all right so the second api will be for um getting the article by id so we need to get all the articles by id so what we can do we can create a method called as get articles by id okay and inside this we need to pass the source and source will be of type string we need to pass the source okay and what we will be doing we again we will be returning this so this is a get call so we say return this dot get http.com so sorry http dot get and inside that again we have a url so let me copy that url from my clipboard and paste it here so again this is again it will take the top headlines and the sources is what we pass here and with the api key okay so this is the get articles by id and then we have the articles all articles so i'll say initialize articles okay and inside this again this will be a get call so again we say return this dot http dot get and inside this we can let me again copy that link from clipboard and paste it here okay so this is the three api that i will be using and i will put them in github as well you can copy them from there and please make sure to have your api key okay so you can get this api key from this website i have already informed this website okay all right so we have our service ready and now we just need to call this service inside your your app component okay all right so in the app component the first thing we need to initialize those sources so we can say here get all source so for that let's create a method get sources okay and this get sources will help you to like initialize those values so what we can do is so we need to have that new service so let's copy let's inject the new service news api and news service so this was a service we created new service and we will be using this service so what i can do is i can i can implement on init and i can call directly inside that so i say on init life cycle hook and this will complain about having the ng on it method so yeah so inside the ng on in it i will be calling those two sources okay so the first thing is my articles and the second thing is my sources okay so let me create two properties a public property as sources of time any and it will be an empty array again public articles okay type any and again this is empty so i have initialized them as well and i will be putting those values which is coming from the api okay so we have this dot news api dot initialize the articles okay and this i can subscribe okay and inside the subscribe we can just put here okay they response of type any i can put like this and i can say this dot articles okay this dot articles is equals to response dot articles i'll tell you why i put response dot articles okay so i will be doing a console.log before it to show you how our response is coming from the api so i'll do console.log rest okay so i have initialized my articles and in the same way i'll just copy this method and paste it below and we just need to change it from [Music] to initialize sources we have the sources as well so first one for initialize article and second is for initialize sources and inside this i need to change this from articles to sources and again this will be response dot sources okay so these two are ready and now let me just show you in the so this is an ngrna method so i can just do a console.log to show you the response so if i go on the browser okay and let me show you the console how does it look so can you see the sources we have 81 sources and this is the response so that's why i did a response dot sources and response dot articles so we have total 10 articles okay so that's the reason i put as response dot articles and response.sources okay so i have initialized these two values now okay and now whatever you see in your html everything is static at the moment so let's now try to make them dynamic so i will start with the side nav okay so in the side now this is you can see this is static at the moment so here we will have i will have all the sources here the 81 sources as you can see here inside this response so i will put it here so for that again it's very easy that we just need to use a ng for and things are done for us so let's go inside your mat like below your mat divider so where it is written so it is on the top i guess yep this is the abc news inside the mac divider so we will be having a ng container okay so let's have a ng container let me copy this buttons let me cut this button for now and let me have a ng container and inside the ng container i will put paste that again we have this button and all those things here we just say ng for and say let source of sources and let me change the spelling s okay now what what things we have so we have the source name correct so i'll just copy this source i'll go so this was static so let's try to remove and make it dynamic so i'll say sources no no not sources source dot name okay if i save it and now if i go on the browser to check so yes that's what i needed so i can see all the sources here so we were having total 81 sources so all of them you can see on the left hand side okay the 81 source abc abc news so this is all now dynamic coming from the api okay so this part is done what is the second thing we need so we have our articles as well so currently if you see this is all static so we don't have any images as well so now i will make them dynamic again from the api okay so let me go down here and i see i have a section okay and this section in the section we have a div which is repetitive so this was the div which i need to target so this div i need to target let me remove the others static from here okay so i just need only one single div and we can loop the div by using ng4 okay we just need single div again let's have ng ng container so this is the one we need ng container and inside this you need to copy this div and cut and paste inside the cng container okay and we will loop this by using star ng for i select article of articles okay so we have these articles already initialized correct so now here you see we have a source right so for the source let me just show you how our api looks okay so that things will be easier for you to understand so if you go in the article so we have lots of information we have author we have content we have description we have published at then we have sources as well who is the source we have title we have url to to get more information about the news and we have url to image so this is the one which i will be using for displaying the image okay so i'll go here and i say article dot url to image okay so that's how we can make use of that images so if i just try to show you i have saved that only so i can see all the images will be dynamic now so let's go in the browser to see can you see we are getting all the dynamic images which is coming from the api i know the contents are still static but we will fix that all right and now we have something called as author as well inside our api again if i show you so we have authors let me show you the author so this is the author let's copy the software and paste it here so let me remove static and okay so we have article dot author then we have published date as well so let's try to go here and copy the published ad copied let's remove the static we use this is called a string interpolation which i am using at the moment so article dot control v okay then we have title of the new so again for that we have a title in the api so let's copy here and let's remove this let's use this something went wrong sorry so articles dot dot your title okay so we have description as well so description uh can be trickier as well some sometimes people use some html content sometimes people use normal description so it all depends so what we can make you so we can make use of inner html so there is something called as inner html attribute which we will be using to display the content okay so let's go here and bind this so let me remove this first the static one so this is static has been removed okay let me take it here on the top so static has been removed now i will be using the inner html okay so inner html and inside this i will be passing the description so we have again article article dot description all right and if i save the changes to see how it looks now okay all right let's go here and let's see the contents now so i can see we have a good title along with so we have the author we have the published date which is looking bad at the moment then we can see description we can see read more if i click on read more it is still the same so it is just loading the same page because we don't have the url so what we can do we can try to bind so let me just show you what i will be binding if i go in the console okay the articles so this is what i want to buy i want to bind the url so i'll just copy this url and we have a href here correct so what we can do is so again we can make use of uh interpolation to bind this okay so we can just say article article dot url okay and the target is blank so this is done all right and i see one more thing to be done which is the date so for uh making this date looks good so what we can make use of we can make use of something called as pipe pipe in angular so there is a pipe called as date pipe okay so that's how a pipe looks and we put here as date and we can give one more extra argument here as medium to this and now if i save the changes and go on the browser let me remove this yes exactly so that's how i wanted so i can see this looks pretty good now so we have the author we have the title we have description and we have read more option if i click here now okay so it opens in the next tab the more details about this about this article okay and we can see everything is dynamic here all right so i see here something again some static thing so let's try to remove this as well so what happens so whenever our application runs so we see a top 10 headlines from all the sources so we can change this text to top 10 headline or some some of our own own own one beautiful name so what i'll do here is i'll just change the name to top 10 news so i'll create one variable public this is selected news channel and why i did this because i want to change the uh the data here based on the selected so if i click on abc news i want to change this to abc news and the content should also change to abc news content okay all right so for that that's why i put here a selected news channel and this is of type string and i will initialize it by top 10 trending okay trending news i save it okay so i have saved this now so whenever i refresh my page my page is loaded okay let me check okay so it is not working because again i need to do the string interpolation i go here so this is static so let's remove this and add a string interpolation and paste this selected news channel so if i save it and show on the browser so first it will say top 10 trending news okay but as soon as i click on any of the sources so this should get changed based on the source which i have selected okay so for that so i will be needing a click event okay so whenever we click on the button or whenever we click on that source so based on that we need to call a method all right so let's create a method for let's try to uh create the click event then we'll create a method okay so on the button we have a click event okay so this click even will call a method called as search source and here we will pass the source value the source which is coming from here the source i have passed inside this and this is complaining because we have not created the method on the ts so we'll go ahead and create a method on the ts file so we know we donate this now anymore okay all right so now inside this we will be adding two things first of all we need to get articles by id so the for getting the article by id we need to pass the source id so you say this dot news api dot get articles by id and we need to pass so we have the source on the top dot id okay so once we pass this id now we can subscribe okay and inside the subscribe we can initial we can like change the articles now okay change the article so we can say this dot articles will be equals to response dot articles okay and also we need to change the selected news channel so whatever news i'll select so i'll change them as well so this is the on this dot selected news channel will be equals to my source dot name so whatever source i select i want to change the name based on that okay if i save these two changes click on save all i see compile is success yes it is and let's go here and see okay so now we see top 10 trending news which is coming from different different sources but if i click on abc news okay wow so i see all the news coming from abc so the data also got changed so we get all the 10 top 10 news from abc channel we have associate press so if i go on the top i see this again changed if i click on if i want to see some sports news then i click on bbc sports and now i see all the all the data related to the sports channel okay that's how we actually do all right i see this project has come almost complete we just need to change this as well so so i have one one thing already ready so we have a link of a source where we have this a jpg so let me let me copy and paste my clipboard and paste it in the this in this url of src so i see this src is empty so if i put it here okay so this is if you go on this link you can get what actually i'm talking so this is what i will be using this news alert now if i save this and let me show you in the browser yes so that's what i actually wanted so now this makes it complete okay so in this way we have seen how we can create a news application by by using angular so we have used angular 14 so i think it's great time for you to also create something on latest version and yeah you can customize this name as well so i don't like this my application so i go here and change it to the lp news and whatever you feel like you can can play around with this so we can just change the name to lp news okay all right so that's that's that's about it about this video if you have any question related to this then you can put them in the comment section i will be answering each and every questions and if you feel like this video has helped you in somewhat then please give it give it a thumbs up i will highly appreciate it alright and till then bye bye and keep learning guys

Channel: Let's Program

Views: 30,096

Keywords:

Id: cvdBjXsqLIQ

Length: 58min 59sec (3539 seconds)

Published: Mon Aug 01 2022