Ionic 4 Angular- Build Web App, Native Android, IOS App | RapidDev Pro | Skillshare

Ionic 4 Angular- Build Web App, Native Android, IOS App

RapidDev Pro, Full Stack Developer & Tech Entrepreneur

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
32 Lessons (3h 26m)
    • 1. Introduction

      1:54
    • 2. Tools used in this course

      0:23
    • 3. Install Nodejs and npm

      0:38
    • 4. Install Ionic CLI and Cordova

      0:36
    • 5. Promises Vs Async Await

      13:33
    • 6. Project Setup and Run App

      2:48
    • 7. Project Structure

      5:56
    • 8. Ionic Lab

      2:26
    • 9. Ionic Split Pane View

      2:29
    • 10. Toolbar Styling

      4:00
    • 11. News API Intro

      3:06
    • 12. Get Top Headline News API Service

      7:32
    • 13. News Card List UI

      9:44
    • 14. Ionic Spinner / Page Loader

      4:41
    • 15. Country Select Option

      9:50
    • 16. Category Selection Option

      11:33
    • 17. Ion Refresher Component / Pull down to Refresh

      2:31
    • 18. Toast Component

      3:47
    • 19. Angular Routing and Ionic Storage

      25:38
    • 20. News Detail Page

      11:50
    • 21. Publishers Page

      8:51
    • 22. Publisher News/Top Headline Page

      13:25
    • 23. Save Article Locally

      6:19
    • 24. List and Remove Saved Article

      16:15
    • 25. Avoid Saving Duplicate Articles

      8:02
    • 26. Build Ionic App as PWA in Production Mode

      5:26
    • 27. Android Studio Setup and Set Environment Variables

      4:09
    • 28. Deploy App to Real Android Device and Styling Native Status Bar

      4:22
    • 29. Customize App Icon and Splash Screen for Native Android, ios Platforms

      5:41
    • 30. Running App Inside Emulator

      2:13
    • 31. Build APK in Production, Release Mode and Sign APK with Keystore

      5:32
    • 32. SOURCE CODE

      0:34

About This Class

Write once, run anywhere: Ionic 4 With Angular Framework. Build PWA, Android, Ios Apps.

 

What is Angular?

Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop

 

What is Ionic Framework ?

Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies (HTML, CSS, and JavaScript).

Ionic Framework is focused on the frontend user experience, or UI interaction of an app (controls, interactions, gestures, animations). It’s easy to learn, and integrates nicely with other libraries or frameworks, such as Angular, or can be used standalone without a frontend framework using a simple script include. 

Advantages of Ionic Framework: 

♦  Cross-platform

Build and deploy apps that work across multiple platforms, such as native iOS, Android, desktop, and the web as a Progressive Web App - all with one code base. Write once, run anywhere. 

 Web Standards-based

Ionic Framework is built on top of reliable, standardized web technologies: HTML, CSS, and JavaScript, using modern Web APIs such as Custom Elements and Shadow DOM. Because of this, Ionic components have a stable API, and aren't at the whim of a single platform vendor.

 Beautiful Design

Clean, simple, and functional. Ionic Framework is designed to work and display beautifully out-of-the-box across all platforms. Start with pre-designed components, typography, interactive paradigms, and a gorgeous (yet extensible) base theme.

♦ Simplicity

Ionic Framework is built with simplicity in mind, so that creating Ionic apps is enjoyable, easy to learn, and accessible to just about anyone with web development skills. 

♦ Ionic CLI

The official Ionic CLI, or Command Line Interface, is a tool that quickly scaffolds Ionic apps and provides a number of helpful commands to Ionic developers. In addition to installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more .

You will learn the following things in course:

♦  Deploying Ionic App as a Web App To Standalone Server ( Node.js For example ) .

♦  Deploy Ionic App To Real Native Android Device.

♦  Add/Update/Change App Icon and Splash Screen.

♦  Change App Status Bar Color and Header Color in Multitask View.

♦  Change App Name, Package Name and Versioning of Native Apps.

♦  Running App Inside Android Emulator.

♦  Ionic CLI.

♦  Ionic Lab.

♦  Ionic Project Structure.

♦  Theming Ionic App.

♦  Ion Card Component.

♦  Angular HttpClient Module.

♦  API call using HttpClient Module.

♦  Integrate data from API with UI.

♦  Responsive design with Ionic Grid.

♦  Ionic Split Pane View.

♦  Ionic Spinner.

♦  Ionic Pull Down To Refresh.

♦  Ion Select Component.

♦  Applying ngModel and ngModelChange on ion select component.

♦  Angular LazyLoading, Routing, and Routing Params Explained.

♦  Generating new pages/component.

♦  Ionic Storage Module: ['sqlite', 'indexeddb', 'websql', 'localstorage'] .

♦  Storing, Fetching and removing data from Ionic Storage Module. 

♦  Ionic with REST API.

♦  Sign APK with Keystore.

♦  and more.

Transcripts

1. Introduction: Hello, everyone. And welcome to my course on I need four with Angula. My name is represents so and I'm going to be your instructor in the scores. So in these course, we're going to build the any application from scratch with just one core base and it is going to run on every platform such as Web, Rosa, Native Android and IOS. So in this course, we're going to bring the news application which is going to interact with the third party base there were on the user can get top headlines by country category as a Leslie Publishers. Okay, we're going to implement various you A components that is the guard selection drop down, pulled onto the fresh and more. And we're going to design all the components in a responsive way so that it is truly scalable, right from the well, the ways to develop and the beauty about the Ionic components is that they automatically adapt to the platform. For example, if you want to just create Obertan, so it is going to have different. You are on the android and IOS automatically. You don't have two minutes anything. So along the way off building the application. We're going to learn the I need regular concepts such as the routing pages, models, component services, injectables and more. And once we're done with building the application, we're going to deploy to the reality ways as well as the emulator. And we will also see how can you basically customize the Aiken and this splash screen. Fortunately, platform on. Once that is done, then we will build the A P K for the native Android platform. Okay, And we're going to sign this a PKV dickie stores. So we will see how can you create the key store and how can you sign it? And how can you basically optimize your a PK with people and don't? Okay, so this course is going to cover full and two and flow right from building the application for the Web on deploying toe the Realtor ways as well is building application for the native platforms that just endured. And I was So if you want to take your next skills to the next level, then I highly recommend that you check out the scores and thank you so much for watching this introduction 2. Tools used in this course: Hello, everyone. So in this will do I just quickly wanted to show you the tools that we will be using in our course. So for the quarterly that I'm using, the V s scored on for their criminal. I'm using this. Come under terminal for windows. Okay. And if you want to have the exact same set up as me and then you can download the stools. So you guys, that's it. Just wanted to give you a brief information regarding the same on. Thank you so much for watching this video. 3. Install Nodejs and npm: Hello, everyone on in this video, we're going to see how can you install nor Jess and NPM on your machine. So don't install it. You can simply visit, nor J start org. Then go with your download section on You can our downward according to an operating system . So as you can see, I have already downloaded all you have to really single double click an install. And once you're done with the installation you can head over to their terminal on. You can simply say Lord hyphen V to check the North version on NPM high friendly, protect the NP emergent. And then pin comes bundled with the Norges so you don't help. One started explicitly. So they're checked for this video. Andi, thank you so much for watching it. 4. Install Ionic CLI and Cordova: Hello, everyone on in this room, we will see. How can you install the Ionic, Scylla and Cordova on your machine? Sort of started simply on this common and AM stall Hyphens e unique on corridor on. Simply hurt. Enter on. It will install both the tools on my system. It is already installed. So let me show you. So one soon started completely. Simply check the an equation by running. I nick hyphen we and take the Cordova version by running this command. Cordova Hyphen B. Okay, so make sure you have the installation done on. That's it for this video on. Thank you so much for watching this. 5. Promises Vs Async Await: Hello, everyone on in this video, we are going to understand how they think of it. Differs with the promises. And how can you work with the single right? OK, so I'll just explain you by example. So let me this create a file over here called us is in Kobe. It okay? And you can name it whatever you want. So first of all word I'm going to do is I'm going toe create a promise which is going to guide result after three seconds. Okay, so those three second can be any icing task in the world. Example such as an a p A call to us over which is taking some time to get the response. Okay, but here, I'm just going to make it off the set time old method which is going toe simply return the result after three seconds. So, first of all, let's create the promise. Okay, on, we're going to work with this promise. First on, as soon as we're done with the promise than level one video. Single bit. So there you can clearly on the understand the difference between the think of it and the promises. Okay, so for stole here. I'm going to create a promise card as display message. Okay, so there's basically returns new promise, Okay? And the force argument is always result. And the 2nd 1 is Did eject. Okay on. I'm goingto make use off the September method over here, so I'm going to simply suspect emote. Okay, so this receives a call back, so this callback is going to run after three seconds. OK, so here we specify their timing milliseconds, hands 3000. So here I am going to simply it is all the promise. Okay, So I'll resolved with a message which we will get as a parameter toe this particular function. Okay, spaced it over here. Now, the way you can simply work with the promise is by calling this function okay on you will get it, then call back. Okay. On inside of that called callback. You will get the dessert as soon as this promise is fulfilled. Okay, So, in this desert, let us simply console log this popular dessert. Okay, on as far as the pedometer is concerned, let me just simply pass Hello. Okay. So hopefully this makes sense. Now let me open up terminal that I'm going to simply say North unsinkable torches so you wouldn't see it right? After three second, we will get out of my search and we just Hello? Okay, as you can see now let's assume that we want to bring more message. Let's say we want to make more vehicles, OK? Once we have this result. Okay, So the idea is to only make another promise, Saul, when the 1st 1 is the result. So the way you can do it is by running your task in this call back only. OK, right. If you do anything right after this, it is going toe ground radar. We write, for example, let me just simply print any log and let me just employed on this file, okay? So as you can see, this is printed right over here because this task is running a synchronously on. This is the callback which is executed when this task is done. Executing right? So when you took put our second card in this call back only Okay, so here I'm going to simply say again, display message. And this time I'm going to pass death. Okay. So again we will get it then called back. And then again, we'll get the dessert. Okay, so here also, I'm going to simply console log the results. OK, on in sort of this call back. I'm going to make another call to this function. Okay, Let me to simply the messages wassup on. We'll get the results over here. OK, so now what will happen is first of all this promise with lexical on after three seconds will get the hello. Then I get after three seconds, Will get did there. Okay. And then I'll get after three seconds, we'll get the What's up. Okay, so they destroyed with on this now, right? So we got all of this three message. OK, But the problem with this is that we are basically and bringing to the callback help problem. Okay, on this is one of the biggest problem when working with a singleness task in JavaScript. Okay, so you end up being in called back. Hell, right. So let's say you have five more calls, right? So just imagine what kind? Of course it would look like, right. And if any of the promise fails, then we need to up, like, catch, block, toe each and every promise, right? Because we never know which promises going to get rejected. Right. So what we need to do is we need to apply catch block. Okay, which receives the other object. Okay. And we need to bring this era right over here. Okay. ATM. It'll Buddhists for each and every promise called. Right. So let me this copies based on the well heeled and Mr Door here has been right. So now you can see that how are court is looking? It is basically ended up in the callback. Hell, right, so this is not a reliable court. Okay, so the a think of it, keyword basically allows you to work with the promises on it makes your court more readable by making your court look very cynical nuts. Okay, so this is off course looking isn't gonna score right, because we have a lot of call backs over here, but like to see how can you work with the think of it on, do the same thing over here. Ok, bring the same message is okay, so remember that the thing of it works with the promises only. Okay, so, first of all, I'm going to create a function. Okay, so for example Const my function. Okay, on in this function, I'm going to call this promise display. Miss it. Okay, so the way you can call the promise with the easing of it keyword is by first awful writing the overt keyword. Okay. And then you need to specify your promise, which is display message. Okay, on off course it is expecting an argument. So I'm going to pass the hello as well. Okay on. Always remember there to make use off off key word. Your function. It's to be a sink. OK, so wherever you're writing the await cable, your function, it's to basing. So I'm going toe put the sink people over here, okay? And I can simply get the result were here like this. Okay. In fact, what I'm going to do, I'm going to declare of it. Results over here, which is going to be empty. String is off. Now on. I just get saying this resort to this particular variable. Okay? Now, what I need to do is simply again called the display message, okay? And just passing the my sister. I want to pass. So here this time I want to pass there. Okay. And I can again simply assigned the desert. So this particular variable okay, on again, I can do the same thing with Newman. Said if it is wassup. Okay. Now, important thing to note here is that this is in call Will only exclude once this is fulfilled. Okay, so that's the beauty about the thing of it. So the of it is actually going toe stop the control flow moving forward until and unless this particular promise is either results or reject. So that is the most important thing about the thing of it. Hence we don't end up in the callbacks, right? Because this is basically waiting until and unless this problem promises resort. Okay, so our control flow is not going to move forward. And let me add the console log over here so that you can see properly those sequence off execution. So here I bring the result over here. Simply copy this, print it again and print it again. Okay. And let me simply commend the promise out so that you can, of course, see properly. So let me to save this on alleged go over their terminal. Okay, clear the console. and run this file. Okay? And I think I forgot to call this function. So let me just simply call dysfunction as well Over here at the bottom. Now, on this file on hit. Enter. So let's see, What do we get? We got the result as hello for civil over here. Then we got there and finally we got B. What's up? Okay, now you can yourself compare the court difference it brings. When we woke the promise and when we worked with the think of it, this court is extremely straightforward and readable to the developers as compared to this one. Okay, so you can imagine how easy and efficient it is to work with these. Think of it. Keyboard rather than the promises. Okay, on. Even if we talk about the error handling, it is so much better in case of a single bit as compared toa the promises. As you can see here, I have to apply the catch block to each and every promises, right? Okay. The reason is that any off this promise can get rejected, right, But in case office innovate, the overhead keyword throws theater as an exception. Remember, this promise is rejected. Okay, So what you can do is you can handle the exception using just single try gets block. Okay, So let me show you what it looks like. So let me. I did write gets blocked as well on. All I need to do is simply bring theater over here in the console log. Okay, so let me just do it on. Let me just take everything from here, okay? And pasted over here. So now if any off this promise is rejected than it can be simply handled over here in this sketch block, OK? So as you can see how good your core looks when you work videos, think of it as compared to the promises. Okay? And let just even try. Do it on a scenario to show you the other case. So let me just come in this out. So let me this even show you an example how this cage block will be executed. So let's on this particular promise. My number divorce up messages saying we need to basically reject the promise. So here I can simply say if the message is required. So what's up then? Simply rejected on simply Say something went, but all okay on here are also I'm going to our didn't statement so that the court blocks is not executed for that. Okay, So letting us embassy of this large garbage terminal on dry road on this fight, so you will see that force will get the hello message. Then they there. And as soon as the boss up, our task is as executed will get there. So, as you can see, we got there on it is here in the something went wrong. Okay? And we're able to do this bites in playing a single catch block, okay? And in case of promise, we had hoped, like edge, block to each and every promise called. Okay. And one more thing I would like to tell you about the think of it. Keep it. Is that the await keyword off course expects the promise. Okay, so in our case, it is returning a promise. So it is working. Fine. OK, so you can apply the orbit keyword on lee to do two things. The 1st 1 is if you're function, is returning a promise which, in our case, it is doing ok. So the display messages returning a promise or your function should be facing function if it is in order turning a promise. Okay, So remember these two cases, Either your function is returning a promise or your function is an amazing function. So let me show you by example. So let me There's declared a function over here quoted as greetings on, let me make this function as a sink. Okay? On it is going to simply there, done, for example. Hey. Okay. So now I can apply the await keyword toe this getting function because it has these in keyboard with it. Okay? And remember, I just told you right now that either the function has student and a promise or it has to be anything function. Okay, so let's just rightto apply the await keyword. So this greeting function okay on, let me simply get the result here and let me even console lobby. So now I'm going to execute this. But before that, let me just simply them comment about this court blocks so that we don't get any sort off better. Remember, this particular promise is executed. Okay, so let me just go be their dominant on on this fight. Says you can see we guard the hey my sexual here, which is printed over here, right? So now let's understand what special difference does the ace in keyword makes to a normal function. So animal you apply is in keyword toe a normal function, and it returns the value than this value is not return as a simple value. Instead, this value is returned as a promise. Okay, so what it will do is it will try to always result this particular value as a promise. And that's the reason why you are able to apply the orbit. Key word on the matter of the fact is, if you are using this hazing function, then you can also simply say great things. I thought. Then you can apply, then over here. Okay, so the reason you can do it is because this is basically resolving as a promise. Implicitly, you are not able to see it. But the Zinke what is doing that? Okay, so let me one show You Okay? So I'm going to simply quickly console log they deserved over here. Okay, Now let me go to their dominant and run this file. So as you can see, we got the value right away. So there is. This was all about these. Think of it. Keyboard on. I hope you were able to understand this on. Thank you so much for watching this video. 6. Project Setup and Run App: Hello, Everyone on in this video, we're going to set up the Ionic project using their necks Allah, and we're going to run it inside off the browser. OK, so don't create the Ionic Project using the sailor. Simply run this command, which is an IQ start than the name off your application. So alerts Collett newspaper I found unique four. OK, and then you have to basically specified the type of framework that you have to use. Okay, So Bill Yannick three, their default framework that was used waas angular. But now it is trying to become frame diagnostic. That means it is not dependent on single framework. So you have to basically specify the type of frame book that you have to use. So here you can simply say I have a different type equals angular. OK, but if you don't specify this than the default frame book, that will be truth where the Annick will be angler itself. So if you want specified, it will still be the same. But still, I just wanted to show you this. And if you're wondering what all framework does the antique works with So it works with all different books adjust, angler. Reactive. You okay? But as of now, we're going to use the angler on. I won't be simply hit. Enter. So here it is, asking the videos started template that I can choose from. So here we have the types side menu in the blank. So, as you can see on the screen, these are the kind off that will be generated for their topside. Many on the blank. And if you want to have some example project than they have given this my fourth step as well. Is the conference up there? They have basically shown some of the example of the Andy CAPP, but itself. No, I'm going to choose. Decide menu on simply hit. Enter. Okay. Okay. So as you can see, it is done setting up. I'll simply get inside of the fort that is just created. So you get into newspaper Haifa lining four and all you need to do now. It stood on this command with this I Nick. So Okay, so this is going to start the local developments over Okay, on it is basically hard, real ordered documents, Anything this you making dick or the base will be reflected on the fly. Okay, so just wait for the file periods. Basically, start this over. So, as you can see, it's always started Initially. Takes a while to basically lord the application, but let's wait for it. So, as you can see, here is the starter template that we asked for on if I go to their developer console by inspecting it. Okay, so if you're simply right, click inspect. And if you click on this icon Okay, so then you will see the mobile view. So, as you can see here is deciding. I knew that they basically asked for on here is this started and bread that the Annick tenders for you. Whenever you choose, decide many options. Okay, surveys there. Treat for basically setting of your project and starting this over on that. That's it for this video. And I hope you were able to follow along. And thank you so much for watching this video 7. Project Structure: Hello, everyone. So in this video, we're going to have a look at the project files and before lost that is honored by the salon. So let me open up the cord in the V A school. OK? So as you can see, these are the files and the folders. So let's start with the biggest audition. OK? So as usual, you have all your packages over here in this file, and then you also have your script for starting and building several on other scripts as well for the lending at Spectra Onda. Next, if you want to their DS conflict gorgeous. And so this file is used for typescript specific configuration. Then you have the DS link dot Jason file. So this well is used for checking the court for mate on the basis off the rules that are defined over here. So, as you can see, here are the rules that are defined and lending will give you warning or the error depending on the rules that are defined over here. Okay, Next, if you move one further than we have the I need God conflict artisans. So here we have basic enforce. It has the name of the application on their type of different accused. Okay, Next we have the angle Georgeson. So this is angler framework. Specific fight. Okay, that you get even if you Jenner simple angler project. So here you can do some English specific confections, such as putting your style or script things like that. Says agency here in this styles, we have some off the assistance file there representing the SRC folder included over here. Okay, so you can do a bunch of contribution over here If you want to add more styles or add more scripts than you can do it all here next. If you want to the SRC folder, then, as you can see here, be for some will have the F order. So instead of the air folder we have the Ionic pages are the memorials. So, as you can see, we have the home page less to pay as well. And each of these pages of Morial basically so they have their own a stable, competent file as well as the model file. Okay, Next, you have this roping file that is pretty fine. Okay, so now in the running for it basically follows the framework specific grouting, instead, off its own custom, be off roading. It used to be there in the previous version, such a Sinek tree. So we had never controller for never getting inside of our application. But now it tries to use the framework specific doubting. Okay, so you can still used in an controller, but it is duplicated. Okay, so I would suggest you to use the framework specific holding itself. Next, you have your route component at stable file than the crude, competent, peaceful as well as the root model. Says agency, The route model is basically bootstrapping the app competent, which is your root component. Okay, Next, if we move other than we have abhorred assistance file. So this is where you can put the global Stelling over here. Next, we have the asset for that as well, inside off which you can put your own images and static assets. Next. We have the involvement for that. So instead of this, you have to fails in woman tortillas and environment or two broad door piers. So whenever you run our bill, your application in the development more than environment tortillas will be used. But whenever you build or on your application in production, more than environment dot prod DOrtiz will be used even though you are referencing toe this particular file. Okay, so the sea level automatically override all the references to the development file the deplored Ortiez whenever you're on it or building using the production more. OK, so that's something that in it would take care whenever human is Dean Woman variable. Make sure you have the appropriate moment. Variable in the product es as well. Okay, people just put it here and forgot to place it over here. Okay, Next. Every move other than we have the team folder wherein we have the variable tortoises file. So here we have a bunch off ceases variable defined. Okay. So you can customize this, which will see in the upcoming video on. But we also have the global road assessors on here. Also, you can put your global styling all right on the main door. TS is the one which is both stopping the app model. OK, so this is the place. Your application is bootstrap on it. Basically, lords, the APP model, which is a road model which then basically lords the competent, which is your road competent. Okay, Next you have the PS conflict or that gorgeous and file, which basically extends the route. He s conflict gorgeous and filed, which is President in your root directory. Next, you have the TS Lynn Georgeson file. And this file also basically extends the PS Lynn Georges and file, which is president in the road Project directory. Okay, so these are the bunch of files and folders okay on, But there are a couple off other folders that will be generated at different times. So that's platforms which will hold the native plate from court weighs foreign Gordon s. Then you will also see the www folder which will hold the core base for running inside off the browser that you can serve it on any server. So all your types, ripcord and everything will compel down to native JavaScript with boundary days file on, you can basically put it on any Web server to run your web application. OK, so all of those really president in Triple a blue folder Next, you will also see the plug ins folder. So this plane for that is going to hold the native plug ins such as, for example, if you're using the Cordova than it will hold all the called up against information in this particular folder. Next, you will have another four letter Caldas Resources insert off which some of the platform resources will be president, such as the icon and this splash screen, which we're going to see in the upcoming videos. And you will also see another file called as conflict dot XML, so this well will be used for a bunch of things. So this file is a basically contribution filed for your native plate from teachers and organize so you can put your adverse Jenna's Villas the package idea in things like that. Okay? And you can also customize a bunch of things over there, so you will see this file being generated in the upcoming videos. As we move forward, surrogates there treat for the project structure of the anything app. I hope you were able to follow along, and thank you so much for watching this video 8. Ionic Lab: Hello? Everyone on in this room. We are going to have a look at the antique lab. So I, Nicolette basically allows you to view the user interface off your application on the multiple platforms instead of the browser. Okay, so you can simultaneously view how your application will look on multiple platforms. So don't on your application in sort of the an eclipse include on this command with just my neck space lab. Okay, on. If you're running this for the first time, it will ask you to install a package. Carla Sinek, lap on. Simply do it on. It is going to open up your application instead of the lab. So, as you can see here, it is asking for installing the package. Will simply say yes on let it install on. Once it is done, it will automatically open the application in the lab. Okay, So as against he hears the application inside of the lab on this is how our replication looks on the iris on this is how it basically looks on the android. So this is how you can compare the user interface off your application and you get also get feel off the various platform user interfaces outside of the Annick lab also, but it provides you kind of involvement. Very. And you can see the simultaneously. So if I had got the local host 81 double zero on the road, Doubles road will always open the unique lab. So whenever you're done in your project using any lab, make sure that you go to the 81 double zero for the view instead off opening this instead of the lab. Okay, so if I go to the 81 double zero, simply inspect this. Okay, on go to the mall will go simply refresher again. So, as you can see, with only a negligible so you can see how your application looks on the ice platform, As you can see now we have this IRS field, and if you select the end or device from here on, simply refresh. Then you will see the end or the way. Okay, so you can basically tested wherever you want. I just wanted to show you the only day said one did with walking with the Annick lab is that you cannot see the changes in the U Waddle globe very well. You navigate individuals. So, for example, if I navigate list, which then I think in this over here. Okay, but if you see properly, for example, if I never get to the list bitch than the you are in this change, okay? So if you want really book something related to the u R L, Then I would suggest you toe state outside of the lab, but even also make use off the lab that is provided by the neck. Okay, so that's it for the ant lab. And I hope you're able to follow along. And thank you so much for watching this video. 9. Ionic Split Pane View: Hello. Everyone on in. This producer will talk about this split pen view component in an IQ. So if you see properly, whenever I go to this Morley ways So let me open up the developer tools right on goto this morning. Ways then, As you can see, we can see the hamburger menu. Right? Okay. On Red Menace even show you by shrinking. So, for example, if I shrink two us a 10 point, then the hamburger menu appears. And if I expand this toast or 10 point then are basically hamburger menus spirited. So why is this happening? And how does this happening? So this is happening because off the spirit pen component President in the abduct company Nordeste email. Okay, on here is this split pan component that is being present over here because of it. Our view is basically splitting. Right. So let me just show you something about this company. So if you visit the ethnic frame but dot com slash dogs, then if you go to the u A. Competent on basic research for the split pen. Okay, so here is the information about this spirit pen component. So their default break point for the spirit pen component is lt Okay, So the size is 992 pixels Says you can see as soon as I crossed the 992 pixels than the U. S s plated. Right. As you can see, it is a spirited. All right, So if you want to change the break point, then you can specify Ah, then attribute or the property on this particular component and passing the appropriate break point. Okay, So you can positively princesses Extra small, small, medium and large. And you can pass the extra largest. Well, OK, so whatever electro do is tow, have the hamburger menu always on Never split the U Y. So for that, what I can do is I can basically remove this split pen view component from our application on you can even have. It s but you need by setting up different break points. So let me just remove this. All right, let me say this. Let's check in the browser. Okay, So now, no matter how big our screenings or how small our screenings three hamburger menu will always appear OK on. This is what I basically wanted. OK, so As you can see, this is how it looks. So that's it for this Brit pen view component. I just wanted to show you how the wise spreading So their trade for this video on Thank you so much for watching this. 10. Toolbar Styling: Hello, everyone. So, in this room, we are going to style little bar in our obligation. So as you can see, here is our goal bar. And since we're going to have many pages in that application, so insert off, you know, playing color to each and every toolbar. What we can do is we can make yourself a CSS variable toe globally. Teens there toolbar color selected me to show you. So, for example, if I go to the very well, though, this is filed in sort of the team folder. Okay, on here, I'm going to wear another Seasons video called as Hyphen. Hyphen iron. I find toolbar. Hi. Fun bag down. Okay. Now, for the culinary makers off, three differences is very well. We just primary with this president over here. Okay, so I'm going to make it off. The var ceases function on. I'm going to pass the prime medical. So here I'll say I am iPhone color hyphen primary. Okay, so let me see if this now, let's go to the browser and see How does it look? So as you can see now are toolbar color is blue. All right, throw up. Next. We want to also make the text Wait, because our full bodies basically dark. So what I'm gonna do is I'm going to simply say here if an iPhone I am Hi, frontal bar. Hi. Fun color on. I'll said it so white. Okay, so that missy of this and let's see, how does it look? Okay, so as you can see now, the next calories. Wait on. Let's go to the IRS and see How does it look? So I just open up the developer tools on going to select the iPhone from here, goingto the fresh it. So this is how it looks on the iris. And to be honest, it doesn't look good on the s. Right. So what we can do is we can only have this Primerica little war on Lee for the android and develop on not to have this color on the toolbar on the ice platform. So how can we do it? So the way you can win is by defining your styling according to platform in specific classes such as MD. Okay. And the IOS. Okay. No, no. Whatever. Eyes telling your defining the empty will be applicable to the android and they were visible. Okay, on whatever is telling you define in the IRS class will be only applicable on the ice platform. Okay, so just for the example, I'm going to move these two things in the MD only. Okay, so let me see if this now, let's go to the browser like the application, the fresh and save the prime medical. It has gone. So as you can see now it is gone. Now, if I see, like, the endured the West from here, and if I basically to flesh it, then as you can see the Primerica Larisa plate and even if I go to the lab and simply the fresh then as you can see, the prime medical still exist on the toolbar. Because, as I said, whatever you're defined over here will be applicable, own and good as well as develop. Okay, So basically, any platform that is neither android Nora's will follow the MD style, which is material designed style. Okay. And let me one show you by playing a separate toolbar color for the I spread from, so that you can clearly see the separation they're did brings. Okay. So for example, if I specific allowed. A secondary saved this school. Billy browser. Okay, on. Let's see what happens on the web. So, as you can see, it is still primary colors. Let me open up the developer console on check. On the end of the ways it is still primary nine. First, select the iPhone. Refresh the AB that, as you can see now declared its secondary. Okay, so this is how you can separately style the I spread form as well as the android platform. Okay, so I'm going to remove from here is off. Now, save this. Go to the closer and we're going to have this vital bar for the Ah, yes. OK, so the guys that sit force telling little war and I hope you're able to follow along. And thank you so much for watching this video. 11. News API Intro: Hello Everyone on in this You do. I just wanted to give you a brief information about the A p I That we will be using. So we are going to make use off the news kpk dot org Okay, so this website basically but where do the a p i wherein you can get the news blog's articles from various news sources. OK, so if you basically visit the documentation then you go to the top headlines then, as you can see here are the bunch off a pier that will be using So we're going to make use of their top headline sepia, wherein you can get their top headlines according to the country. Okay. And I show you in a bit what All countries are supported and you also need to pass the peaky as a query parameters on. We're going to gender Thisun. Next, we can also get date opulence from particular sources or the news publishers and I'll show you a little publishers are supported on. You can also get it by category along with the country. Okay, then you can also search for any sort off keyword to get the related articles. OK, so These are the pay that will be using. And if you talk about the country's and the publishers, So if you basically go to the new sources, the next agency, this many publishers are supported. All right, so there are a couple of them on if you go to the country's than this, many countries are supported. Okay, So, for example, if you want to get the news for the Argentina, then you need to pass the control 80 which is a are for the Argentina on. You need to pass it as a query parameters along with the bakkie. Okay. And if you want to get category specific top headlines, then you also need to pass the category along with the country. Okay, Now it's what is getting the baking is concerned. You need to basically sign up over here to get day picky. So let's do it now. So he just simply gonna get a picky and you need to sign up over here. So I'm going to add the name as John Doe. Okay? And I like the military's as John Doe 22 added your mail dot com. Okay, so I'm basically using the disposable email service on you can enter any sort of password over here on simply going toe Sinovel here. All right, on simply click on this and click on submit. So as you can see, the restoration is completed on here is the peaky. So simply copies on started in sort of the environment variables. So I'll go to the core base on then I'll go to the involvement file. So here, I'll declare a variable called as e p. A ki ok on going to pace the biggie over here on going to do the same in sort of the environment or product E assessable. Okay. And let's also store the base who are ill for the FBI. So if you basically go to the documentation on go to the top headlines so as you can see, the base you are ill will be in new zebra dot org slash veto. Okay, you can consider uproot opulence, but I'll just keep it till here. Okay, So going to simply copies. And I learned the base. You are a lower here as well. So I learned basic little all right on going to simply copies and window pasted over here as well right. So now we have all the information ready to work with the sepia on. That's it for the brief information about this EPA on. Thank you so much for watching this video. 12. Get Top Headline News API Service: Hello? Everyone on in this video, we're going to make any P call. Didn't use a pair dot org and get the data in several for application. OK, so to make the Baycol, we're going to basically make use off the service. OK, so we're going to write all the pickle logic in sort of this obvious so that it can be injected in any component on weaken. Basically, call that service So faceted data. OK, so for stolen basically generate this office. So let's go to their terminal. Okay, basically, stop this over. Okay? On here. I'm no dissembling. Say I, Nick, generate on. If you simply hit enter that, it will show you all sort of things that even the nerd with the Knicks. Ally. OK, so as you can see, you have various options over here. Beats components of this mortal class. Derek tips. Okay, so we basically want to generate this obvious, so I'll hit. Enter. So it basically asked for the name of the service and then depart. But I think this should be part slash name. Okay? Because whatever you space were forced, it will be considered as the folder where you want to create on. What would you specify after the slash will be considered as the name of this office? Ok, so I think they should abate this here in this Eli. But that's OK. So the four leather that want to create is the providers. Okay. And instead of this, I want to basically create off file called us News. Haifa Napier. Okay, so this will believe folder in third ofit the this particular service will be created, so simply hit. Enter on it is going to automatically gender this office for you. Okay, so let's go to the court base on. You will see that instead of the app. As you can see here, it has created deploy this folder on Instead of this, We have the news, a P s office file. All right, so now we'll write this office over here to fetch the data from the newspaper dot org. Okay, So to make this really be called using the angular, you basically have to festival Inject the assertive, declined portal, insert a few model. So let's go to the abroad model dot es file and I'm going to import the extra typically and model on added instead of the import. Sorry. Okay, so let me feel important. So here also import on going to specify it over here later. But let's get it from the right angle slash common slash a strictly be OK. So this is where you want to get on the name of the model early on to get is A Should it be planned model? Okay, so going to simply at this instead of the imports. Ok, so make sure you added instead of the imports today nor anywhere else. So once you have this actually declined bottle, you can make use of the X rated declined service toe basically make the call. So let me inject their service. So here, answer Private. That's 30 p on the name of the service is est ADP claimed all right. And as you considered especially or to imported it from edited angular slash Common slash a strategy. Now you basically create a function called us. Get top her length. Okay, on this function is going to take the country quarters off now, which will be off type string. All right on will simply make it off this country court on make any pickles alert Scored their documentation. So as you can see, this is how they can pass the country called. So we already have. We find the basically what? We're still here in the environment. Variable. So let's get from there to here. First of all, I would say based model. This will be of type string. Okay? And I'll get it from involvement dot base. You are all right. And as you can see, Canadian woman file is pointing to the disparate file nor deport. Okay, on. I'll also get Be picky, since we will need that. So simply going to copy this ongoing two teens the variable name as he pick you hear on, get it from a bakkie. All right, so now we have the basic model as well as the picky. So now let's right before the logic to get data. So here I am going to simply say this dot extra Debbie Don't get since this is going tobe a getter, Crist and I'm going to pass the back ticks. Okay, on insert off this. First of all, I'll basically include the basic or else so here I am going to simply they find this in their template variables so he rented this door. Based You are OK, then we basically want to visit top headlines. Okay, so let me just check if I'm right. So it's against your top her lens. Then we need to positive query parameters. OK, so question mark. No alerts. Festival past the picky, so he'll see bakkie equals on. I'll get it from this door. A picky. Next. We need to pass the additional parameters. We just country okay on this is going tobe equal toe the country court that we received as an perimeter dysfunction. All right, so this is all what we need. Okay on. Remember that this estate, very dark get matter with great returns. An observable. So we're going to simulate it on the observable. So whomsoever is calling this particular function, we'll have to subscribe to it to get the dessert. Okay, so now we're going to basically call this function audio service from the home page or the home company. Okay, So what I'm gonna do is really basically go to the home based RTs. Okay. On inside of this, I'm going to first of all, inject the news a P s office. So he also private news A B s service on going to get it from news EBS office. So, as you can see, it is injected over here. All right, so as soon as the constructor is initialized, I'm going to call a function called us, get top her lines. All right, on going to create this function over here, right? And this function is going to simply call the museum pay service. So he ran said this dark news. EBS always don't get top headlines. Okay, on, we need to basically passed the country code. So initially, just for example, let me pass something like, for example, admits its corporate from here, So let's colored us. Okay, so I'll pass the us Okay, then. Only basically subscribe to this, so I'll get the result. Okay, on here. I'm going to simply console lock the result. All right, on, if there is a matter, then I'll bring the era is well, so here in the second argument, you can get the other call back. Okay, so here I am going to simply parenti other itself, all right? And like me up there. Deacon. So long messages. Well on. Let me call it this door. top lines. OK, so I think our AP call is ready. So let's just test this. Now on. We're basically calling. The newsy pace of is in the home page. So as soon as that application Lord, we should see some sort off results in the console. Okay, so let me go to their terminal on start this over. So gonna say I think so. Look it. Let's go to the browser. Let's go to the app on it is automatically going toe open up the new instance off the up. Okay, so let's just wait for a while till this is restarted. So as you can see, I think it is already done. So going to close the old one? Okay, let's open up. The consul is well again and let's see, what do we get? Presidency. We got the desert on. We have this console locked from the home page. Okay, on here we have basically articles. OK, so these are our a off objects on. We have all the information such as the sources title. You are ready to image Aurthur content description. Everything okay? And this is the response that we want it on. What? We'll do is in the upcoming videos. They're going to basically use this data, and we're going to show this on the way. Okay, so that's it for this video for making an a p A call to the third party so over and getting the data insert off our application. OK, so I hope you were able to follow along on. Thank you so much for watching this video. 13. News Card List UI: Hello, everyone on in this video, we're going toe designed the news card y over here. So we're going to display all the articles that we get from the A P a in tow the cards over here. Okay, But before we start descending the way, I just want to show you the documentation for the responsive grade. So if you guys really visit the Anne Frank, But God comes less dogs on, if you basically go over here in the old section. Okay, on, then if you go to the responsive Good. So here you have all the information regarding the responsive layout on how to basically designed one. So the important concept here is the I in grade, which is continuing for the rose in the columns. Okay, so the i n great basically expands toe the full grit off the view size okay, or it will expand to the certain says, depending on the configuration that you make. Okay. So basically, if you specify the fixed attribute on the I integrate component, then what it will do is it will only expand to the fixed size. So let me show you. OK, so let's say you have a screen size greater than 100 pixels. So in that case, whatever the size be with whether it be 10,000, 20,000 pictures. How big this greenies, the iron Ingrid is only going to expand. 240 pixels okay on it for this greater than 992 pixels, but less than 200 pixels, then it is only going to expand gun and 60 pixels. Okay, so again, see all sort of information regarding the great says over here on if you move, other than you will also see how can you basically assigned this size to the column or the birth to the column so you can make itself the size that we built on you have really isn't information that you can take it out on, but more documentation that I want you to have a look at it is they see sensibilities. Okay, so before reading any customs seizes, make sure you check out this documentation because it provides a lot off seasons. Utilities for next modification eliminate placement element display content, space, flex properties. Okay, so you can make use off the pre defined classes in start off writing your own custom cheeses. For example, you have this class called iron text starts, so there's going to align the text to this start. Okay. Similar. You have various other classes as well. Okay, then you have, for example, text on for mission senses your religious, for example, I in text. Uppercase. So it is going to display their text in the upper case. Okay. So you can check out all sort off, she says, utilities that they have, and we're going to make it off a couple off them in the upcoming videos. So just wanted to give you heads up. Information regarding the responsively documentation as well as this year's is your abilities. Okay, so I highly recommend that you check out this recommendation. So now let's start building the U Y off our application. So the first thing that I will do is toe get it off existing temperate from here. So I'll basically go to the homepage tourist email and I'll remove everything from here in the iron content. All right, let me see this now. This should be blank. OK? So as you consider this blank now, So now let's start. Is ending the wife or the news card. So here, first of all, I would say I am great. Okay, Because it's and continued for and rose in the columns. And I'll also especially the fixed attribute. So this makes the I in great export only certain size, depending on the break point. Next, I'll add the eye. Andrew over here. All right. On inside of this island. Diane column. All right. Now what I want to do is to give this column a size oft well, so here and says Wise equals 12. Okay, on, I want to basically treat over each particles president over here. All right, so we have the article 30 but I only want those articles which has your will do image again . So sometimes you will see that some of the article object has your do emit as no. Okay, So what I'll do is I'll basically first of all, forget about those articles which has you are able to emit Andi, they're going to basically treat over those list and going to present it over here. Okay, so let's go to the homepage. Start. Yes. First of all, I'm going to the final variable over here. Cordes article list. OK, on this is going to be type off today. Okay? On the American hold, any sort of values. So going to define it over here. Okay. And I'll initially started to m theory. All right. Next. What I'll do is I'll basically treat over the article list present in the desert object. So here, as a result, Dordt articles. Okay, then I'm going to make it off the filter function. Okay? So instead of the call back, I'll get individual article, all right? And I'm going to fill out only those articles, which has the you are really doing it. So here, I'm going to simply say article dot You are image. Okay, So if this particular thing returns null documents, it is a false statement. So the filter function is not going to include that particular object in Putin. You are okay and has asserted the filter function is going to create a new era with the filtered out object. So going to store this in the article list? All right, on as of now, it is here saying that article doesn't exist on type objects, So let's make this desert off type any so that it doesn't get better. Okay, so I hear, Say, honey All right, so now we have the article list over here. Okay? On this article list is not going to hold those article which it doesn't have your to image or which has No, basically. Okay, so there's become false his treatment, so that integration object is not going to included in this new way. Okay, so now since we have this article list available, we can simply traded over here, So do it right over the list items in the Anglo. You can simply make use of the N G four directive. So here and let article off article list. OK, now, here in sort of this, I would like to have the iron card. Okay, Andi, if you want to have a look, idea and card company, then you can basically started over here. So if you go to the dogs, then if you go to the u. N. Competence, then as you can see here is the Iron Guard on. This is how the U. S. Looks like on here is the market for the same. So we're going to follow this. So let's go to the court base. So here, first of all, I would like to have the iron card header. Okay, in sort of this, I'll have the en garde. Okay. And insert off this. I'm going to make use of the biblical references to access the variable. Okay, on. I want to basically access their title from this particular article. Object. Okay, so let me see if this Now, let's see. How does it look? So let's go to the U A. Presidency. Now. I have the article title, okay, that I basically fetchit from individual object using their title property over here. All right, so we have this list of item over here. Okay? Next, we want to basically also show the image. So here, just below the and guard, I'll make yourself I an image competent. All right. On inside of the cell makers of the SRC, etc. Built so specified these source off the image. Okay. So again here, I'm going to make use of their welcome. Iblis is on here. Going to simply say article dot You are to image. All right, let me say this. Let's see. How does it look? Okay, So as you can see, this is how it looks. But what I would like to do is I would like to add more shadow toe the card, so I personally like to use some ceases for the guards. So basically, go to the Global Order Sisters file. Okay. On here. Going to make use off the CSS class on the iron card, competent. Okay. On simply going toe based, the box shared. OSI says Okay, it's quite big swells and blue carpet this. Okay? And let me say this and let's go to the browser again. And let's see. How does it look? All right. So, as you can see, this is how it looks on even if I go to the iPhone. So just to show you how does it look on the IOS device? Okay, so this is how are you? I looks on the ice. The ways on it is looking quite good. Now, let's also pride is in the web. Browser is Well, okay, so what I'm gonna do is I'm going to simply close this developer console. Okay, on As you can see on the Web browser, our cards are looking quite big, so let's make it small toe. Make it look more responsive. So here in the confessional estimate, OK, so as you can see by default, we have given all the 12 columns. But what we can do is for the larger screen size. We can give it a less number of columns. Okay, so I'll add various break points. Okay, so far. So let's move this over here late. So for the SM break point, I would like to give it six columns. All right, then, for the M D break point, I would like to give it four columns and finally, for the LZ break point, I would like to give it for column as well. OK, so now what I've done is I have basically added the videos break point on specified the size of the columns. Okay, so by default latest, well, but as soon as they screen says it is the SM break point, it will occupy the six column. Then, if the screen says break point is empty, then it will locate by six on in case of larger devices. It will occupy the for okay and let's go to the browser. Okay, and let's see, how does it look? OK, so there's look quite good. Okay, let's try this again in the mobile device and let's see. How does it look? OK, so as you can see in the mobile device, we are getting all the 12 columns, right? So let me one show you by shrinking. So let me just sharing this so that you couldn't see properly. So, as you can see, as soon as the screen says it is the same So we have basically two columns 12 divided by six is two column. So I guess I was gonna say we have no columns on the sides off Each column is six. OK, and as soon as we go to the extra small, then it gets through 12 column. Right? So this is how you basically responsively designed the Y in the antique on that shit for designing the home cards on. I hope you were able to follow along on. Thank you so much for watching this video 14. Ionic Spinner / Page Loader: Hello, everyone. So in this video, I would like to add the spinner on our homepage. So there is some delay by which we get the response from the A pacer work. So let me simply show you bite. Refreshing it. So, as you can see, there is some delay by which we get data. So build their time. We can basically show the Lord. Okay, so I'm going to make it off the iron spinner, competent on this is how it looks. So you have various options available, such as default lines, land small. So okay, we are going to make us off this particular spinner, which is lines OK, on the way you can get released by specifying the name property on the island spinner company. Okay, so what I'll do is I'll basically go to the court based on go to the home pissed artist email on Dhere just below this Andrew, I'm going toe. Add the iron spinner. Okay on. I'll give it a name off lines so that we have appropriate spinner. Okay on. I would have told with this place this in the center of a debate. So I'll add the custom CSS to work, so I define a class over here. Okay, let's call it page. Hyphen lorded. Okay, on going to add some ceases on this particular class. So let's go to the global Doris's file on here. Going toe, Add the base load. Oh, ceases. So he had eyes checked up as 45%. Okay, then I let the left as 45% as well. Okay. On by the position as fixed. All right, so this looks court OK, on. What I'll do is we basically want to show this spinner builder time. We are basically fighting the data, right? So I'm going to make yourself a boolean variable that we're really finding the home piss tortillas. Okay, so let me define and over here, show page in order. Okay, on this will be off a 1,000,000,000. Okay? Initially, outsider to falls on, what I'll do is and simply make it off this variable over here. So gonna say, and if on going to pass this video, okay, So as soon as this become true than this component will appear. All right? Now what I do is I loved it. This variable over here in the get top lands matter. So this means that we're basically fetching there later. So I get out of this dot show page in order as true. Okay, on as soon as we get inside of this call back, that means we have the result available. So I'll simply said it to fault. All right, on, even if there is a matter we still want to say to toe falls. Okay, So let me serious and let's see, How does the u I look? So let's go to the browser, OK, unlike many. Fresher it again. So now, as you saw that, we didn't even see this spinner even though we I did this winner in the home based on estimates. OK, eso The reason this is happening is because the I think sometimes has the cash problem where in whatever court in this that you make is north sometimes protected. So the solution is nor do we start this ever and start. What you can do is it's a kind of cricket solution. So whatever piece off court that is not reflected in our case, it is iron. Spin it. Okay, so what you can do is simply remove that particular court on save it on, do the changes again and save it again. OK, so this where you are forcing the Seelye to detect detainees. Okay, so nine figure, but the closer on. Let me refresh it again. Then. As you can see, we have this Spin it over here. Okay, so we have these in just infected. Okay? And you can follow this pretty little prick trolled your development, okay? Because you're going to encounter such things again and again. OK, so there tell you solve this problem on. Let's even try toe See this in the movie anyways, So let me simply refresh this. So, as you can see, it is looking quite good on, but I would like to do is tow said the color So this particular spinner OK, so I'm going to set a second regular over it. Okay, But currently, if you have a look at the video, Bernard assesses the second regular is kind off light blue. But I don't want this. I actually warned this greenish color for the secondary, so I'm simply going to copy this on going toe pestered over here. All right. On going to simplicity in this to secondary. Okay, on going to object over here as well. Okay, in all this basis late now, what I'm gonna do is I'll just goto this sign spinner and I'll add in and tribute called Less color. Okay, on 40 calories specified e Secondly. So let me see if this now and let's see. How does it look? So we will see. No, we have sort off green color that we just said in the variable daughter scissors. So now we have a green color spin a residency. All right, so is there chick for adding the loader toward application on? I hope you're able to follow along on. Thank you so much for putting this video. 15. Country Select Option: Hello, everyone. So in this video, we're going to add the option for user to select the country and get the news accordingly. OK, so it's off now. We're basically fetchingly news for just one country as we have hard coded the country code over here again. So now what do we want to do? Is stored and Emily get the country court from this election, trump down and we can basically show the new articles on the basis off new country selected . Okay, so first of all, let's descend the u Y for the same, so I'll just go to the homepage stressed email. Okay. On here, I'll have another iron column. Okay. On inside of this first. Awful. I'll have the Iron Guard OK on in sort of design card. We will hurt the u Y for the select option. But first of all, let me give this column or size off. Well, okay. Okay. So, no, let's have a look at the way for the selection problem. OK, so if you basically go to the eye and select documentation so they basically have different flavor as well as the U Y. For the i n select component is concerned. Okay, so you have this alert kind off you. Why, then you also have this Another kind of why this is called us Pop over on the 3rd 1 is the action shoot. OK, on this different kind of you, I can be defined on the Ansel a competent using the interface property. Okay, so you can basically past three values over here, which is action should Bob over and the alert. Okay, so let me just show you the court example for the pop over. Okay, So as you can see, here is the court example for the pop four. So I'm just going to simply copy this ongoing topia street over here. All right, Onda here. I did the label ass country. Okay. And I'll remove this interface options as off now, and I'll keep the interface as popular. Okay. And I also remove this place holder as well. Okay, let's see. How does the u I look now? Okay, so let's go to the closer. Okay. On. As you can see, this is how are you? Looks on. As you can see, we have various options over here. All right, so the first thing that I would like to do is to actually have the list off option that we want to show, which are the list of country. So let's defined this in the court base. So I'll just go to the providers folder on going to create a new file called as mark countries dot es. Okay. And I'm going to simply export const countries, and this is going to be in a day, and I've already prepared this and they're just going to paste it over here. Okay, so this is the red that will be using solar. It's important. It's a rain. The home piss tortillas. Okay, so here, going to simply say country list on this will be off type body. Okay. On the American hold, any sort off values, in our case on initially subject to countries that we have just defined. OK, so, as you can see, have imported the country's from this providers. Okay, so now we can basically treat over this list on Show it in the home based artist email. Okay, so in this and select option, but I would always alpha sold removal of this. Okay, on here, I'm going to simply say a streak and G four on going to simply say Let country off control list OK on Dhere in the text. Basically, I'm going to make it off. The biblical Liberace is a nullifies the country dot name. I think it's naming the concerning Let me take it once again. OK, so it's name. So let's test it now. Let's go to get frozen and see what happens. So let's see, what options do we have now? So as you can see, we have all the options that we needed. OK, so now what do you want to do? Is we want to have some default selection as soon as the pages loaded. So as you can see currently, there is no difference election so far. Solar defined the variable which will hold the initial value. So let's go to the home page tortillas on here going to define available, called as selected country, and I'll set it toe the zero to index off the country's okay as our default selection. Okay, so the baby really does. This is by actually implementing the engine model which will bind the disparate variables are toe the line, select Okay on my servers also so here for So I'll say and remodel. This is how you basically defined the NZ model in Angula. Okay? And I'm going to start it pretty selected country. So now we have associated this value toe the I insulate component. Okay, but you actually have the i in select option. We need to have a value over here. Okay, so here I defined a value property binding on here, Going to simply say country. Okay, so here we are, basically trading over the list off country on in each patrician, we get the country. Okay, so we're displaying the control here, but we are associating the whole object. Okay, so which is this whole country object? Let me just show you. Okay. This whole country object as a value to this select option. Okay, So whenever you have this the fort selected country available, it is automatically going to select the value from this selected country. Okay, for large, Just as this now. So as you can see, if I basically refresh the application, then, as you can see, this default is already associate did. OK, so this select option okay, and we can change it as well. All right? No. One thing that unit toe understand about the anti model is that this NZ model requires thief or memorial Toby injected. Insert off your model. Okay, So in the recent version off the annex, Ally, you will see that the farm models is already injected. So as you can see, but if you don't have the forms model, insert off your home model tortillas, then make sure you're basically injected over here. Okay? On this comes from I did it. Anglo slash farms. All right. Okay. So in order, we have the default value selector. What do you want to do is on the change of this country. We want to fetch the new articles. Okay, So first of all, Venuto, detect that user has changed the option. So for that I'm going toe are the event listener over here on the and select, so that even listeners will be called us n g model change. All right, on on this event fire, I'll basically call the country chance matter that we really find in our company. OK, so let me simply have this particular my third in the home place tortillas, so I'll just simply go to the home place tortillas. Okay, on presidency, we have this country changed. Now what we need to do is minuto first fall, get the country court from this electric country. Right on. Since we already have associate ID and ends immortal toe the selected country, everything the user select any new option, it will basically automatically available in the selected country value. Okay, which is an engine model. So here, I'm going to, first of all, console log devalue. So he runs a console, not log on. Going to simply said this dot selected country. All right, so and let's see what happens. So let me see if this leads scored the browser on. Open up the console as well, so that you can see a properly. Okay, so let me clear this up. So for example, we find out in this to Australia, So currently, we don't see any sort of control over here, so let me simply remove this Cortines okay on, try to force refresh it because of their told you before. That antique has some cash problem. Let's go to the blows up again on Let me refresh this again. Okay. Let's see if we get the console. August Time says agency. Now we're getting the concern. Log on. Always remember toe are due this spring whenever you face such issues. Okay, So as you can see, No. If I, for example, chains to Australia, then we have this value over here. Okay? And we have this whole object available because in the Ein Select, basically said the value as the whole country object itself. Okay, on since the end, immortal is associate id. So this in select option, we have the upgraded value in sort of this electric country over here in the home pages. Well, okay, so all of you need to do is tow fat city Country court from here and pass it to their top headlines. Okay, so for solar, define a perimeter over here called us Country code. So here, I'll second trickled. Okay. On this will be off type string. OK, so instead of hard coding it over here, I'm going to pass this country code. So that began dynamically. Festival use. Okay. And as soon as this constructive is called, let me pause the default country court from here, so here and simply said this lord selected country dot court. Because if you have a look at the more countries than we have taken record instead of this court property Okay on here, I'm going to simply say this dart ghetto power lines and going to pass this dot Selected country dark, cold. Quite simple. Okay, so let me see if this now and let's see what happens. Okay, so I think now we should get the new articles on the business off country. Okay, so let me clear this up on, for example, no, in fighting in the country. So, for example, Canada, Then we should see the news article selector to Canada. Right. So it's a concert is working perfectly fine on you can even inspect the request in the network tab. So, as you can see the country code for the candidates past Okay, on, we have the desert for the Canada. Okay, so we have this working properly. Fine. Okay. According to the country. All right, so now whatever like to do is to update a little bit off your eye on the select, drop down. So on this place border with this country, I would like to also at the icon so that it looks more intuitive. So to get the antique icons, I'll basically visit iron Icahn's dot com. Okay, on here are basically sorts for the I got beat up in. Okay, I think it is this one. Okay, Simply going to companies. Let's go to the court base. I will go to the homepage dressed email. So he really basically pays the icon on my inside Dicle a secondary. So gonna say color equals secondary. Okay, so let's see. How does the u I look now? Next, go to the browser. Let's see so that this looks great. Good. All right, so that should for this video on, I hope you're able to follow along. And thank you so much for watching this video. 16. Category Selection Option: Hello, everyone. So in this video, we're going to add the select option for the categorias Well, just like we have for the country. Okay, So if you basically have a look at the FBI that, as you can see, these Arctic a ticket is third are available that you can pass along with the country. Okay, so you have business, entertainment, health, science, sports and technology on as far as hitting the base concern. OK, so if you visit this topper landscape, then as you can see, all of you need to do is to simply pass an additional perimeter off category. Okay, along with the country. Okay, so if you just past the country, it is going to give you mixed category articles. But if you want some specific category articles for a country, then you need to pass this particular perimeter. All right, so what we'll do is we'll first only find the list of categories, So let's do it now. So I basically go to the providers on going to create a file over here called us Mark Categories, nor ts Okay. On here, I'm goingto basically export a constant. So he tells export Const. Diggory's on. I've already prepared. The category is just going to piss shirt over here. All right. So, as you can see, we have all of this category over here. Now, if you're wondering what is this all get agree. So we are not going to pass this thing in the FBI. So this is just for the U. S. So that when the page loads for the first time, all the mix category news will be fetched. But if user wants, he can basically select the other categories President using the drop down. All right, so we have this categories now, so I'll basically go to the home pissed RPs on going to get the category list. So here, I'll say simply particularly list. This is going to be off by party. Okay, on it can hold any sort of values for the category list. Okay. And I'll basically started two categories. All right on here. I'm also going to create this electric category variable which we will use as an engine model toe the category drop down. So here and simples is selected dignity and I inserted through the first value off the category, which is all OK, so it'll take. A decade is off zero. All right, so this will be the fourth item in the categories are all right. So now what we need to do is we need to update the FBI in the news. A place office? Okay. On if the category ideas send 10 minute to basically add an additional perimeter. Dodik. Ready? Okay, so here I'll take a daily diary, which will be off type string. Okay, Now, I need to check whether I should apply the category 80 as a query Parameters or not. Okay, so the way we will do it is by first of all, checking if ticket take their ideas signed as all Okay, So this will be their default selected in the drop down. Okay, so if we get the all that means we need to get the mixed articles, right? So we'll simply heard this You are. Otherwise, if you get any off this categories, then we took pass an additional query parameters. OK, so first of all, I'll get this. You are in sort of for variable. Okay, so let me just simply copy this on Harold Simples alert. You are eloquence this right? And now I'll apply simply and if check on, I'm going to some place if particularity north equals all. Okay. So that means if this is true, that means any off this idea signed. Basically. Okay, So, user want to get some specific activity. Okay, so we need toe upend the category I d. In the credit parameter in this case, So going to simply so you are equals went to make use of tactics, goingto get the existing neural ongoing tow a pen extract very parameter, which is category. Okay. And let me take a free disk a degree I d or category. So I think it's category itself. So going to simply psychotically equals. I'm going to pass the articulating that we receive as a parameter to dysfunction. All right, on going to simply passed this. You are lower here. Okay? So simply going to simply say you are quite simple. Okay, so what we have basically done is we have basically checked. If the candidate is not all that minutes user want to get some specific category news articles, So we have upended this in the u. R l. That's it again. Nothing more complex. But now they need to update the existing court basis. So let's go to the home pissed RTs Okay. And as you can see, it is basically expecting toe barometers. Now, get a great idea. Also so far stolen. Declare another argument over here on here. I'm going to simply say category I d which will be off type string again. Okay, on going to pass the category. Idea what? Here. All right, so a spot is getting the category ideas concerned initially, when the constructor this initialized, I'm going to get it from this dot selected category dot i d Let me just take in the market accuracy yes or desired itself. All right, on, Whenever the countrys change, we also need to pass the integrity also. Okay, so I'll simply said this toward selected category thought I d Ok, so everything looks good. Let's take in the browser and let's see, How does the application work now? So as you can see, it works perfectly fine. Okay. On a monday, if you check in the network tab, let me refresh it again. Okay, Then you will see that if you go to the top, her lens ap, I then has often on Lee the country's past. Okay, Now let's create the your wife for the category. Okay? So I will basically go to the homepage, snore that steam l on simply going to copy the existing core base for the select option. Okay, because it is mostly going to be seem okay, so it simply pasted over here On First of all, I'll teens the level as category right on. A little so pretty I can over here. So let's go to the construct. Come on. I think the name of the icon that I want to use this funnel. Okay, so this is the 100 I'm going to use, So that may simply update the name over here. So gonna say for now over here. No, it's what is the end? Immortalised concerned. I'm going to make it off this electric category. Variable then for the engine model teens. I'm going to update this in a bit. OK, But as far as the options are concerned, I want to make it off the category list. Okay, on. I'll call the category over here. Okay. On going to simply at the category dot name over here. On the particular object itself over here in the value. Okay. No. As far as the model changes concern, all very to do is to simply call the get top headlines with the abraded country gold and the category 80. Okay, So instead, off having the dedicated function What I lose, I'll just make a poem and functions or he ransomed. Busy handle, change. Okay, on going to apply this function towboat off this select option. All right. So whether the country's change or the category exchange, we're going to call the top headlines with the abraded country and they get a greedy okay. And let me also add the console. Look for this electric category. So Hilal said this dot selected category. Let me say this. Now let's go to the browser on the street now. So if I go over here, let's see. What is it? Do you get? So as you can see, initially, we have the least off articles which has mixed category? No. For example, if I select the technology from here, then you will see that only the technology related articles are fast. Okay, Andi, when? If you have a look at the Exeter request, then you will see that whenever you select any sort of category, then categories past. But as soon as you select all, then you will see that the chaotic it is not passed. Okay, so we are getting what we want right now. I would like to also paved the way for both off this drop down. Since there instead of the card, they have some sort off margins on that is applied by the four. Tow the cars, hands their placed quite far away. So I basically want toe. Place it together. Okay. So let me show you the amount of margin that is being applied by default. Okay, so if you basically go to the Iron Guard OK, on, if you go here in, this tells then as you can see, approximately 10 pixels off margin is basically applied. Okay, So what I'm gonna do is for this to card specifically with our selection problem, I'm going to basically add dedicated margin for both off this. Okay, s. So what we'll do is offer stole. I'll go to the court base. Okay. On Dhere out both the cards. Okay, so I give them in a special class off selection card. So here, Elsa class equals selection card Right on. Going to do the same on the category. Drop down as well. All right, on going toe, basically at our CSS for this class. So since thesis classes went to used inside off this page, only Northern liberals. Let's add these uses for it in the home. President Assistance five. OK, so I'm going to remove everything from here on going toe at this particular class. Okay? On going to simply say margin as two pixels. All right, so that we save this large is go to the browser and see How does it look now? So, as you can see, this looks much better as both off. This cards are basically placed quite close. OK, on. Let's also CDU Why in the U. S. Device? So let me just go to the SD ways and some grated fresh it. Let's see. How does it look over there? So this is how are you a looks over here? Okay. Alerts fathers by attending the category as well. All right, so this is how it looks on DNA. What I would like to do is to update some sort off your wife or the web browser is Well, okay, So what I'm gonna do is I'm simply going to go Billy browser. Okay, Onda fresh. The app then, As you can see, we have this quite big our problems in the large device. So what we can do is we can add some break points to basically reduce the size. So let's do it now. So let me go to the home is not estimates. Okay. On here is the column for each drop down. This is for the country. Selection on this is for the category selection. So I'm going to add more break points over here. So he tells her size MD as six on size algae as six. All right, on going to do the same in the category column as well. So going to simply pestered over here. All right, so let me say there's no one and let's see, How does the u I look now? So let's go to the browser. So, as you can see, this is how are you? I looks now, all right. And if we go to the mobility ways, both of this Colombian occupied the full 12 columns, so I just take ticket now So, as you can see, this is how it looks on the moor. While so this looks good on there is one more thing that I would like to operate is Vanimo . User tries to basically change any option from the drop down. Okay, then we basically make additional cord toe these a piece of wood. Then we get the response. And for their time, we also see the loader, right? But since we already have this content being shown over here, so we can't see the loader properly. So this battery, African height contend for that particular time on, only show the order. So what I'm gonna do is I'll just go to the court base so I'll just go over here. Okay, So here is the place where we are basically a trading over the article list. All right, so here in the iron card, I'm going to add a NGF condition on going to simply say, if they show special order is appearing, that means if DeSisto then don't show it. All right, on, If this is false, then basically show discard. Okay, so let's just see how difference it brings to the way. Okay, So now For example, if I change this to sports, so as you can see, we only see the spinner by the time they contend this lording. All right, let me select another one. All right, let's try to see this in the mobile device as well. So, for example, if I change the country toe, for example Canada. Okay, let me change. Something here is Well, okay, so this looks much cleaner. All right, So these were the Mylar Twix that I wanted to make on the way on. That's it for the category. Drop down as well. Okay, on. We have successfully implemented the category selection as well, so I hope you are able to follow along on. Thank you so much for watching this video. 17. Ion Refresher Component / Pull down to Refresh: Hello, everyone on in this video, I just wantedto are deport Don't go the fresh functionality insert off a replication. So we do have an any company for the same. Okay, so it is this one. Witches and refresher on. Let me show you. How does it work on How does it look like? So once you simply pull down. OK, so this is the kind of lord that you get and you can perform any sort of facing task as long as the load is money. All right. So it becomes quite handy for the user to basically refresh the data just by pulling down. Okay? And you must have seen this in many application. OK, so let's implement the same. So I'm going to make us off this default refresher. You can make it off this custom refresher with custom properties. Okay, But I'm just going to make use of their defaulted one. So it's just going to simply copy this, And since we're on the home pitch, I'll just go to the home, pissed off that statement. Okay, on just here, below the and content, I'm going to paste the and refresher, okay? And make sure that your and refresher is the fourth child to your iron content. That means if you're using the end of fresher than make sure it is just immediate after the iron content to make it work properly. Okay, Now, we also need this Buddha fresh function, which pass an event object on. We need to call the Complete my third to complete the refresher. So they're just see the example over here. So this is the kind off duty fresh matter that we want to implement. So let me just copy this on. I'll go to the homepage tortillas, okay? And I'm going to be straight over here. All right, on. I'm just going to remove this. Okay, on the move this as well. So after two seconds, their basically calling The complete method on the refresher will be gone. So as soon as this door flesh motorist called, I just called the get top. Her lines matter on going to pass the selected country, not gold on this electric category as well. All right. What? I d Okay. So I think that the fresher is ready. Let me see of this. Now, let's go to the browser and see how does it look? Okay, so let me try toe basically pull down. So it's off. No, it is not working so again it's and I think cash issue. So what? I lose I'll simply remove this on deleting just again. Okay on. Let me see of this. Let's go to the browser again. And now, if I tried to pull down then as you can see, it is working perfectly fine. OK? And after two seconds it is gone. Okay, so this is how you can basically implemented on it becomes quite handy for the user. Okay, so that's it for this video on. I hope you were able to follow along. And thank you so much for watching this video. 18. Toast Component: Hello, everyone. So in this video, we're going to implement a toast message away. OK, so this is the basic need off any application toe. Show the user some message using the toast. So we already have the iron Post complaint for the same. So we're going to make yourself it. Okay, so let me show you How does their toes look like? So, as you can see, this is how it looks on. You can basically have a look at the court for the same. Okay, so we need to do is to basically injected toes controller wherever you want to use it, and called the create method along with a bunch of configuration. Okay, so now, instead of writing this much, scored everywhere what? I lose l a creator service. And I'll based the court over there, and all I do is simply call this particular method in sort of their service and simply positive message. Okay, so that I don't have to country got everything again and again in every company. Okay, so next create this obvious for the same. So I'll just simply go to the terminal on here. I'm going to simply say hi, Nick. generate. Okay. And I'm going to choose this office. I namely folded as providers. And for the name of this office, I'll say reject, You tell. Okay, so this is going to generate this service over here in the Priorities folder. OK, so as you can say, we have this Richard in service over here. So now what I'll do is I'll basically get the cord for the toast from here on, going toe pasted over here. So let me just based it, okay? And I laid it was controllers while injected over here. So here, I'll say, Private does controller, which will be off type post controller. All right, so now we have this eso is ready. All of you need to do is tow dynamically. Get the message. So I'll get the message as a perimeter dysfunction. Okay, on, instead of hard coding the message over here going to pass this dynamic message, right? So I think this looks good on what begin do is on are we can inject the digital service in any of the component and simply called the president post method and passed the message that said okay and everything else will be configured over here. Okay, on. One more thing I would like to upgrade is their duration. So I won't like Coke. April 2000 milliseconds. I'll just keep it 1500 milliseconds. So? So this is a great into 1.5 seconds. All right, so now let's use this producer toast as an example in some. Competent. So what? I lose, I'll use it instead of the home page on the number the Baycol is made, I'll basically send the wrong a picky, and we will show the adult message inside of their toast. Okay, So far, so little Go to the homepage, daughters. Okay, on, inject the visual aids office over here. So gonna say private with dirty ordeal. Service on this comes from the very real service. So as against you, it is injected over here. Not, for example, in this error called back. Whenever there is some error in the vehicle, I can simply show the toast. So here and simplicity is dark. Vigilance office toward present toast on going to pass. The message from the other object sells a red dot status next. All right, so let me say this on, but I will always al coated in women 30 s file on. I'll enter the wrong a picky so that we can, at least under the era on get inside off this error called back. So going to simply commend this out? OK, on. I'm going to enter anything wrong over here. So let me say this. Now, Let's go to the browser and see what happens. So as you can see, you know, we have this. Adamis is in sort of their toast. Okay, let me refresh this again to hit the a p a on. As you can see again, we have this toast. Mrs. Over here. So is their trick for implementing the toast away on. We have prepared the Gen. Eric our post service in sort of the digital, so no, any component can simply call this method and positive, Mrs. That's it. Okay. And all sort of configuration will be placed over here at one place. Okay? And we don't have to configure everything again and again. All right, so I hope you were able to follow along on. Thank you so much for watching this video 19. Angular Routing and Ionic Storage: Hello, everyone on in this video, we're going to understand some of the concepts off angular voting on. I'll also show you how can you basically passed the data between the angular roads? Okay, so just further demonstration. I have basically created to pit the force when the state to drop it on 2nd 1 is there total detail page. Okay, so I wanted to go over some of the concepts regarding the angler routing. So I thought it will be better if we can do it separately, insert off some dummy component because it will create a lot off mess in the existing court if I tried to explain each and every concept over there. So here we have basically created to page the Force one is there to do on 2nd 1 is there to row detail. So if you want to basically created, you can simply it on this command. Which is why Nick Great page Ondo. Okay, on for their total, you can simply say toe I find that quite simple. So it will gendered this two page for you. Okay on. You will also see the eroding entry in sort of the approaching model PS Okay, So you have this to look out on that route. Detail road. Okay, so let's just go to the total out. So let me this and tried it out over here. Okay? So, as you can see here, is there to debate which basically list some of their total item. Okay, so if you basically visit thereto based rest email, all they're doing is basically treading over the list of items that is defining the total paid start bs. OK, so here is the list on that. We have created a tow detail page toe show the toe details such as the name and the street does that We will pass from the total page. All right, on inside of you to do detail, place tortillas, all we have is simply defined an empty object. Okay, so we have some basic Setubal here. Okay? Just to explain you some of the concepts. All right, on a safari is the U. S. Concerned? The one new thing that you might observe is the iron bag Britain. OK, so as you can see these on back button components, it's andric. This bag button on a particular page on what it will do is by default, It will basically navigate through the previous page from which you came from. Okay, So, for example, if you came from a list based toe loop it OK, now on the to do page. If you press the back button, it will go to the list page. Okay, on. If the previous bridges not found, then this default, that stuff is used. Okay on. Make sure that this do for the tariff is president instead of the approaching model is you can see that the four Treff is home. In this case on, we have this home defined away here. Okay, so arrest off. The things are pretty basic. Okay, we have list over here. So let's start implementing the adult thing first fall. So what we'll do is first of all, will navigate from there to locate. So the true detail page. Okay, so there are basically two ways to do it. So the force ways to use their steamer on the second way is to use the competent. So let's start by Stammel. So I'll basically go to the door. Opens rightist email. Okay. On Dhere in the eye. An item. Basically, I did are battling directive as against. So instead of this rattling directive, you can specify it apart in the form off. So insert off this. You can basically specify their out. So the route that we want to navigate toe is the true high fun detail. Right? And as you can see, they do have $100 defending the approaching model. Okay, So, life I save this, They should be able to never get put it toe to tell Paige. Ok, so let me just try this now. So as you can see, we are able to navigate. All right, Onda. Now, let's see, how can you basically do it using the component file? So basically, remove this and I'll create a functioning the total paste or tears, so I simply call it as open do detail page. Okay, So do navigate using the competent. First of all, you needed, although service. So let me inject it over here. So it's a private older, okay? And I injected, although service on this come from Madrid anglo slash Notre. Okay. So instead of this service, I can simply say this door trotter dot navigate. Okay. And in sort of this navigate mattered in the force. Our government, you can specify, did out insert off theory so you can simply say total. I find it. All right, so that's all you need to do. So let me say this now. Now what I'll do is to actually call dysfunction. I led the click. Let's not over here. Okay, so here are the click listener on. Simply called the open detail page function. All right, so let me see if this Now, let's go to the closer. And I think still, we should get the same result. Okay, so no effect. Look on this. As you can see, we are able to navigate. So they're detail page. All right, so now we have basically seen the both ways off navigating to the drill bits. Okay, Now, let's understand. How can you basically passed the data between the rocks? Okay, so you can pass the data between the roads using three ways. The force one is the part perimeter. Okay, The 2nd 1 is the query parameters, and the 3rd 1 is called US State There. Do you basically use in the navigation? OK, so we'll see. This approach is one weapon on. We will also see the problem associated with different approaches. So let's start with the part parameter. So as you can see on the total page, we have the list off items. All right, so we have the idea also, So the way you can pass the part parameter is by defining the part perimeter indeed out itself. So let's go to the approaching model. Okay, so we basically want to pass the part parameter so the hotel pays, right? So here I'll add depart parameter, which is already okay. And we will dynamically past this. I d from the total page. So let's go to their to do page. Okay. So here I can simply say in the second argument, I can simply pass the I d. Okay, so this will be appended to deal out. Okay, now festival. I need to get the idea. Okay. So for getting dirty, what I'll do is I'll basically go to the loupe started. Stammel. Andi here we are. Basically it reading over the list of to do's so going to pass the dodo item over here. Okay on. I'll basically they saved this. Provide. Come over here. Right on. What I'm gonna do is I'm going to simply fetch the i d. From this objects, they're gonna say toe dot i d. All right, So let me say this now and let's see what happens. So let's cool little browser. So now if I click on this so as a non dairy So my heart say's cannot match any doubts. You are in segment through hyphen detail slash one. So I think this is again a cash problem. So what I'm gonna do is I'll go to the voting file going to remove this safeties on, do these changes and save this again. So this one, basically trying to forcefully reflect getting this large cortical browser okay on, I think it should work this time. So as you can see, it works. So if I go to the true detail page and now we have this idea pendant in the path parameter Okay, Now, let's see. How can you basically they save this inside of there? Too rude to tell pitch. So let's go to the hotel pitch on here. First of all, I'll basically inject service Carless activity route. Okay, so he rails activity drug late on. This comes from it. There in english slash Notre. So here I am going to simply say this dot activity wrote dart. Parents don't subscribe because it returns an observable. I'll get the result on here and simply console. Log the bed. I'm so here. Okay, so let me just sprint big so that even see properly. All right, let me see of this again. Mexico de la Rosa. Let's go to the DuPage. All right, let's see what happens. Also, I think I entered the wrong name over here. I got there tarred instead off to do. So let me try this again. All right, So now if I click on this the residency instead of this paradigm, we have the idea. Okay, let's strive with other to do. As you can see, we have the idea to and we have the already three. Okay, So as you can see, we are able to get the I d. Nor typically, what you will do is in the real world scenario, you will basically take this I d on hate the pia on get their toe detail and show it over here. Okay, Now, let's suppose that there is no such endpoint toe. Get the detail using the idea. Okay, So similar to our case where we get the list off articles from the AP, I But there is no unique idea Associated toe. It's article. Hence, there is not even an endpoint from which we can get the articulate little right. So let me show you by going to the news a pair dot org OK, so as you can see, it's off the article you get. There is no unique idea associated to it again on the idea you see, here is this source i d nor the article 80. Okay, so in such cases, what you need to do is you need to pass the whole article object or begins a whole to do object to the next page using that out. OK, so now let's understand how can you basically past the object between the roads? So there are two approaches for the same for the 1st 1 is the credit programs, and the 2nd 1 is the interstate. So we're going to see both of this approach on works. The problem with what off this approach and how can you use another solution are basically overcome. The decide wanders off both of the support. Okay, so let's see each off this approach one by one. Okay, So what I'm gonna do is I'm going to make use off the credit problems first. So let's go to the court base. Okay? On. Just told me, Make this scenario. Let's even delayed the i d on. Let's assume that we don't even have the idea. All right, so I'm going to remove this idea from here. Okay, So the way you can pass the credit problems is by using the navigation extras so that we just declare a variable over here called as navigation extras. Okay, on this will be off type navigation next. Us OK on this is going to be an object. Okay, so this is how you can pass the credit problems on. You can name key, whatever you want, so I just name it as my to do, okay? And you can pass your total item. Okay. Now, since you're basically passing the query programs, that means whatever you pass from here will be sank like this. Ok, so let's say you have this route. So, for example, my toe equals something. Okay, So since query Param are simply key and the value strings, you cannot pass the whole object. So for this, what we will have to do is we will have to basically decent string five, the whole object. So here and simply say, Jason Darts ring if I and I passed their toe. All right, so this looks good. So no depositing navigation extra. I can simply pass it inside of the second argument off the navigate method. So go not simply hearsay. Navigation extras, a light. So hopefully this looks good. And since we're not passing the idea, let me removed from their outing file. So I just go over here on day, moved already from here as well, right? So make sure you do it. So let me see this. Now on, let's go to the browser and see what happens. So if I click on this first rodeo item, then as you can see, the query parameters are passed like this. Okay, on the way you can receive the query parameters is by. Let me to show you. So let's go toe to toe detail. OK, so now here I can simply say this door activity out. Now insert off parents. I need to face the credit problems. Quite simple on detergents and observable. So you make it off the subscript. So here and simply second soul got log on here and simply say query problems. Okay? And I'll print out the drizzle. Quite simple. Let me see if this Now, let's go to the buzzer on DSI if you get the whole Kerry. But I made it over here. So as you can see here is the log from the brutal page on. We got the data from the query programs. So, as you can see, we have this my toe over here, which we passed from the navigation extra. And here is the whole days and string. If I'd string OK, so here in the middle, Bates begin basically parts there's a string. So let me just show you. OK, so here, But I simply do is here. I'll simply say, if dessert thought my guru exists, then here I can simply say this got to do equals Jason. Short bus result. My toe. Okay, so here what I'm doing is I'm simply passing this string and storing to the true object. Okay, so let me see of this. Let's go to the browser. Let it go, fish. So, as you can see, since I have started inside of their total object now we can see the information Over here we have This name is works. Traitors are spending. Okay. And this is coming from the quarry bottoms. Okay, let's try this on another to do item. So gonna Sim please go to the shopping. So, as you can see, we have this shopping information listed over here. Okay, Now the problem with the query Param approaches that if your objective is quite big than your, your real becomes quite heavy on quite big. Okay, so let me show you by example. So, for example, if your object is this one Okay, so let's say you want to basically passed the whole article object. So let me just copy this over here, OK? Go to the court base. I'll goto there to replace tortillas. I'm going to replace this complete object like pastry dough. Here, remove this hyphen from here. So let me see of this. Now on. Let's go to the Broza again on Let me just go to the DuPage. Okay again. Now if I click on the first item, although you can't see the name because there is no name inside of this object. Okay, so gonna symbolically Condi's now, As you can see, we got the whole deter. But the problem is that just have a look at the you are, how insanely big this is. OK, so this is the problem with the query programs. Like your model becomes quite big if your object is really big. Okay, so it is not a great here to use this approach. Okay, so I'm going to basically get rid off this particular approach and use another approach. So let's go to the court base on duty changes again. All right, on the second oppose that I want to use is the state. Okay, so what you can do is this'll state on the navigation was introduced from anglers haven't or two on. If you have a look at the package store Jason inside off our project, then exigency. Fortunately, we're using the inclusion. Get it, then $7 too. So let's go to the Arturo Paste RTs So all you have to do is simply the place this credit problems with state Okay, on the since with the help of state. You won't see the data in the U. R l So you'd only string if I it tells escape it as it is, and we'll pass it on their develop it. So let me see if this now, Now let's go there to do detail page and try to fetch the state. So do fats disturbed you related although service. So let me injected over here. So here I'll say private order on this comes from a great anglo slash shelter. Okay, so for fighting the state, you can simply say const state equals distort rotor or get current navigation. OK, then you can simply call the extras property. Then you can simply say state. Okay, so let me simply console log this straight over here so that you can see properly. Okay. So basically printed the street over here. Let me say this. Now let's go to the browser and see what happens now. So if I click on work So as you can see, we have this data instead of the state. Okay, So our parents is an empty object because there is nothing over. There are query problems is an empty object because There is nothing over there. But we have this data instead of the state and we don't see anything. Insert off this. You are okay. So as you can see, this time, we don't see any data just like the credit problems. Okay, so this is how you can get rid off the data from the U R L. But there is one more problem with this approach, which I'm going to show you in a bit. But let me first awful parts this particular string and started inside off the crew object . So basically, go to the court base. And here I'll simply say, if still exist and state has my total property. Then simply say, this door to do equals Jason door bars State dart might do. All right, So let me say this. Now let's go to the Broza. Let me refresh. And hopefully we should see the daytime. The US So let him in the school were here again. OK, so as you can see now, we can see the time sort of the way on the reason I ever played both of these jackets. Because if you see properly, if the parents and the query bottoms are empty. These are simply empty object. But if the state is not send than it is undefined. Okay, So, hands, before taking any property on this state object, I need toe forced check. If it is, we find on our okay, So I'm basically taking if this is not undefined, and then my to do property exists on this state object that I'm simply parsing this and storing insert off the total object. Okay. So, as I told you that there is one problem with this approach on, maybe you might have observe it. So let me just set of fresh this and see what happens. So as you can see as soon aside, refresh the page. All the data on the to do detail page is lost. Okay, so your state is undefined now. OK, so this is the biggest problem with the state. Okay, so let me go back again. So if I just go for the first time, it is available. And as soon as I basically the fresh it, there is no data. Straight becomes undefined, right? So basically, the data is not party search somewhere. Hence we basically lose it on the page refresh. So as you can see on the screen, we have basically tried posting argues they forced one. Is the credit problems using the navigation extra? And the 2nd 1 is the state using the navigation extra as well? Okay, Now, the problem with the credit programs is that if you're object becomes quite heavy than you are, you are becomes also quite heavy. And the problem with the state is that their data is lost on the page. Refresh. So what can we do to work on both of this problem? Well, we can make use off storage on store the data inside off that. Okay, So since our application runs on the browser as well is only native platform, there are a number of choices for the stories that are available. So, for example, for the browser, you have the local started sessions to reach cookies. Web sequel index db Okay. And for the native, you have sequel light as well. So instead of having you to decide what to choose, there is a really good library called us. I nick storage. So let me show you. So if you basically visit I Nick framework, God comes less dogs on. If you go over here in the neck storage beat. Okay, then, as you can see here is the store it liberally that we're going to use. Okay, so it basically stores the return in the form off key value pair on basically stores the Justin objects. Okay, Now, whenever you're on your application in sort of the web browser, it will prioritise the storage in this particular order, which is indexed Debbie Webb sequel and local storage. But you can also see in this order, as you can see over here, whenever you inject the annex storage model by defining custom driver order property on the ionic storage morning. Okay. And since this particular library basically prioritized this equal light storage when running on the native platform such as android or IOS hands unit to basically install the caldo a plug in for the same, and then you have to install this and pain package. Okay, so let's install this cord or a plug in, so basically go to their terminal. Okay? I'm going to stop this over on. Simply paste this. Come on. Over here on hate entered. So as you can see, it has downloaded a bunch off things on. Let just wait for the while. Billiard completes. So as you can see, it has done adding the cord or a plug in. Okay. So I soon as you are your forced caldo a plug in, you will see a bunch of new file critics suggested resources. Okay, which we're going to deal with in the opponent videos. Then you will also see this conflict, or XML, And it will also see this any dot conflict gorgeous unmodified with this integration properties having called a while. OK, so these are the things that he will see. Now let's move on for that with installing the annex stories. Simply copy this. Go to their criminal. The other terminal on basically installed this an extra packet. Okay, Now, as soon as it is done, I'm going to basically first ofall configure the annex storage model. Okay, inside of the Albert More tortillas file. So let me simply copies on check if the installation is done. So as you can see, the installation is done. So I go to the court base. I'll goto the Abarat model 40 s file on going to inject the an excellent model so I think I haven't copied properly. So let me discover this properly. And let's go to the code base and pasted over here. Okay? Now, instead, off this important, you can simply specify this Annick storage model. All right, so hit all satanic stories Model dart for road and insert off this. You can pass your custom configurations that his driver order or you can even pass the name off the database. Okay, so I just passed the name not be travel order. So for the name and simply say, for example, you can name it, whatever you want, but just for naming, I'm simply gonna say news haIf only be all right. So let me see if this now and let's try to start the server on DSI if everything works Fine . OK, so going to start this over, so as you can see, everything is working fine. I guess I let me close this one. Open the developer control. Over here on Move this away. All right. On that score. Today. Trudeau Page. Okay, so this looks scored on. Let me the steak. As you can see, everything is working Fine. OK, so now let's start implementing this storage, so I'll basically goto there. Too low. Paid start, es fight. Okay, on. First of all, I'm going to inject this to this service over here. Private storage. Okay, on this basically comes from direct my neck slash storage. So, as you can see, it is being injected over here on. What I'm gonna do is I'm going to commit everything out from here. Okay? On. Going to remove this navigation extra from here is well right, Onda here. I'm going to simply cease aside the data toe the stories first before fetching it on the middle bit. So here and simply said, this board storage start said on instead of the set mother unit to pass the key and the value for the key and simply say current through on for the value of ill possibly hold true object. All right, on this segment had basically returns to promise. So you make it off the await keyword over here on toe. Make use of the word Heward. I need to make this function anything. Right. So this looks good. Now, let's see. How can you fetch it on the little bit? So let's go to their debit So here I am going to simply the greater function called us Get to do OK, and I'll call this function inside of the constructor. We're gonna simply said this dot get to do all right. And we also need these tourists off his over here. So let me just injected over here. So gonna simply say private storage this gun from advocate, I next less storage. Okay. As you can see, it has been injected from the air. Did it annex less to it? So here. I can simply say this. Darts storage guard gate. OK, and unit a specific E. So the key that we used is currently Okay, let me pay. Start over here on this also basically turns the promise so I can make us off the over keyword. Now to make that there were people I need to make this function, I think all right, now, let's get the dessert inside of the variable. So gonna simply said const result equals this. Okay, So if the values not found than this story service basically returns denial so I can simply apply banal check over here. So can I simply say, if dessert not equals? No OK, so if this is the case, then I want to Simply said they total so the result. Quite simple. Okay. And whatever like to do is I will act also had the console log over here. So gonna simply second solder clock on going to print out the result from the storage over here. All right, so let me say this. Now on, let's go to the browser and see what happens. So let's go to Gaza the first day. Paige on no effect, like on this. Let's see what happens. So, as you can see, we have this data from the storage. Okay, so the state is undefined because we're not passing on. Also the North passing parents and the curriculum's all we're doing is managing their data using this storage. Okay, Now, let's tryto the fresh debates and see what happens. So as you can see on the refresh of debate, still, we have the data, right? And if you're wondering where their dad s coming from, eso If you remember on the neck storage documentation, whenever you're running this inside of the web, it will prioritise toe store their data, and some of the index to be forced. Salutes visiting next to be so basically go to the applications. Then I'll open up the index to be OK. So as you can see here, is there d be name that we basically added insult off the abduct mortal door PS filed. So let him is Goto the Abarat model 40 as well. As you can see, we named our CBS News. Hi, friend. Debbie. So does this news iPhone baby over here? And if I open this up on click on this, then as you can see here is the key that we are dead with this current dodo. And here is the value. Okay, So now, for example, if I navigate to the shopping on the refresh it over here, then as against the visit of Placed with the shopping Okay on as I told you that since we're using the storage, if I refresh debate, the and the great ice persisted. Okay, so this may be basically solved. The problem off losing their data on the pages of fresh in case off State Navigation Express and big Ural problem in case off credit problems when you're objects are big. Okay, so this third approach is the one that I like on. I highly recommend that you use this approach of another. You want to persist there later. Okay. And if you don't want to posses the data you can make use of the state are if you're objects are small. You can mix of the credit problems as well. No problem in that would make sure that your objects are small in such cases light. So I hope you were able to follow along on. Thank you so much for watching this video. 20. News Detail Page: Hello. Everyone on in this really of your going toe implement in use the till pitch wherein if user clicks on any of the new scarred he can navigate through the detail page on, we will display more information about the news article on the Littlepage. Okay, so let me, First of all gender debates for the new street, so I'll simply go to their terminal. Okay, on here. I'm going to some basic technique. Generate page, and I'll call it as news hyphen detail. All right, so it will basically is under debate. Next thing they're going to do is tow. Have Deb written on the card over here, as you can see. So let me just simply close this on go to the home based artist email. Okay, on inside of this home page Noroeste email. This is the card, which is news card. Okay, so here are the I am guard content. Okay. On inside of this end card content for So what? I would like to have the iron drove inside off this. I'll have the Iron column. Okay. And instead of this, I'm going to simply have the in Britain, all right? And I named the button has view. Okay? And I'll also give this burden off property called as expert as block. So this will expand to the full width, then also, I'll give it a color off secondary. Okay, so this looks good. Okay, on. I would like to also right the icon, but let me just see how does department look now? So, as you can see, this is Howard Burton Looks now, I'll go to the iron Icahn's dot com on going to simply here. So it's for the I can't wait, and I So let me this copy this, okay? And that would be Is this thing over here? Right on. What I'm gonna do is I gave this icon Kalachev light. Okay, so let me just give it since our birth, and it's kind of dark. Okay, so I give this iconic a lot off late, So let's see. How does it look? Says you can say this looks good. Now, what we want to do is on the click off this pretend we want to navigate to the news, little Pete, and we want to show the information over there on also, we would like to pass the whole article object to the news detail pages. Okay, so the first thing that I'll do is I'll go to the home pissed RTs on going to simply at a function over here. God, it is open news detail page. Okay, on this is going to basically make it off the road. Oh, service. So let me inject it over here. So here, going to simply say private older on this comes from accurate, angular slash It out. All right, Onda here. I'm going to simply say this Lord Roeder north navigate. Okay. On in the fourth argument instead of the other, you have passed it up, so that out is news. I found a deal as defining the Uprooting model, as you can see here. Three days, right? And now, while basically I dysfunction on the click event in the home page. So here I am going to simply at the click listeners on this particular button, I'm going to call this function. All right, so let me see this. Now, let's see what happens. Export of the home bitch. Okay, now, if I basically click on view, the nez agency were navigated to the news Little pit. Now Let's also add the back button on the news a little bit. So let me simply go to the news detail. Page started, Stammel And here, going to simply copy the whole header from the home page Ceramic properties on Bay Street over here. All right. You know the first thing that I lose update the title here. So gonna say news detail. Okay. On. Instead of Feinman you've written, I would like to have the iron back button. So here and there and back Britain and I like the default Sheriff A girl's home. All right, so let me see if this now logical to do goes out and see what happens. So as you can see now we have this back. Britain perfectly condition I'm never get it back. So now we're able to navigate. Now we need to pass the article object putting new street. Help it. So what? I'm gonna do this. I'll basically go to the home Pissed RPS on before never getting I'm going toe basically started inside off the storage just like we did for the toe in the previous video. So first of all, let me simply inject these students office so here and there. Private store it on. This comes from a great I next life storage, as you can see. All right, so here I can simply say this North storage not said on for the key. I'll simply say current article. Okay, I need to basically passed the whole article Object, Right. So I'll get it from the home. Pezuela, Stammel. So here I am basically calling the open news retail function, And here we are, basically treating over the article list. So again, past the article object over here. Okay, on going to receive it over here. Got us and play this of this on going to pass it over here. All right. On this segment that returns a promise. So going to make us off the keyboard over here and to make it off the backyard, I need to make this function anything. All right, So now to get this current article on the news little pitch, we again need to inject this toe the service over here. So for so like, private storage on this comes from that threat. Next, let's start it. And as soon as this constructor is initialized, I'm going to call a function called as get article all day. So going to simply make this function over here? All right, on inside of this, I'm going to suggest that this dart store it don't get on. We do make it off this key. Okay? Current article. And I mean, this returns a promise. So I love, like, the other key word. And I'll make this fun chasing okay. And I'll get the result inside of for variable. All right, on, If the desert is not found, then it will basically redundant. So I'll simply say, if desert Nordic personal, then I want to basically store the desert instead of some variable between show in the news a little bit. So here I am going to simply declare available Korda's article. Okay, which will be off type any and initially decided to the empty object. All right, so here, going to simply say this lord article equals result. All right, on, I would act also had taken so long. I guess so. Simply say article on. I would like to print this result over here. All right, so let me say this now, and let's see if you're able to get the whole article Object on the news a little bit. So let me say this. No. For example, if I click on any off the article Okay, I'm navigated to the news retail page on. Currently, the article is no. Okay, so let me go to the store it and see what happened. So if I go to the application on as you can see here, I'm in sort of the nick storage. Okay, so they got an article is undefined. So we need to fix this. So let's school to the homepage Tortillas, okay? And I'm sure that this is the unique cash problem. So this article object is north sent from the estimate hands. It's not available. So what I'll do is I'll remove this, save it under the changes and save it again. So hopefully this time they are deal, object will be passed. Okay, So it was basically using the previous function where we were not passing the article object. Okay, so let's try this Now. I'll go back on goto this article. Okay, Let's go to the console. So, as you can see, we have this article object over here, and even if we basically the freshly stored it then. As you can see, we have this whole article object over here. Okay, so this was just a typical in a cash problem. But now we're basically able to fetch the article object instead of the news to help it. Now, all we need to do is to show this particular data to the U. Y. So let's start designing the U. N on the news little page, so I'll open up the news. Littlepage, for the first thing here, I declare, is the i n greed. Okay, on I learned the fixed Everybody over here next, basically at the Andrew on. Then I'll have the Iron Column. Okay. Now for the ankle. Um, I'll give it a size off. Well, okay. On for the M d and the algae. I'm going to simply give it our size off six. All right, so let me give it a size off six over here. Cool. And this and God is going to be same as defined in the home pits. Will admit simply copied this from here. So it is going to be just like this. So let me copies from here on going toe pasted over here Alright on. I'll remove the things they're not acquire, such as remove this whole thing from here. Okay? And I'll also remove this ngf our directives off now, so we will use it. But as often like me simply remove it. Okay, so let me see if this on. I think we should have some sort off you. I So let's see. So as you can see, we have this You why Let me get to some different news article. As you can see eso I would like to also display their description. We're here, so gonna simply say article, not description. All right, so let me see of this on. Let's go to the browser and see How does it do you? I look so as you can see now we have this description also along with their title itself. All right, so hopefully you can see this is agency on. We're fighting it from the description property on the article Object. All right, now let's see how does do you? I look on the larger device so I'll simply close this up. So let me refresh this again. On as you can see, this is how it looks So it will be better if we can align this in the centre on If we can have some margin top. So simply going to add a class on the Andrew. So here ends. Implicit class equals I in justify content certain, but okay. See if this on luxury. How does it look now? As you can see, this looks much better on we can also have some margin top. So here on the island card, I can simply at the class off iron margin top. All right, let me say this alert. See? How does it look? Okay, so this looks much better. Okay, on, let me simply show you again hesitancy. And let me want try to show you by shrinking. Okay? So as you can see, this is how it looks. OK, so it is completely respond to let me try some other news article. For example, this one Okay, like we're tried to expired. Now there is one more thing that we can do is tow. Simply show deal, order, Aziz. Long as the news is fetched. So since we're basically fetching it from the storage and it returns the promise so there might be some delay before of its days fetched. So it's better if we can show the spinner. So what I'm gonna do is basically copied the spinner from the home pitch. Okay, so this is this Be another. I want a copy on. I'll basically be straight over here. All right, on. We need to declare this variable Insert off the news detail. Page started. ES file. So here I am going to simply say show special order, which is off type bullion. Okay, on initially outside of the falls on Dhere in this get article function. First of all, I'll said this to true, all right? And as soon as this promises result, I'll basically sector toe falls. So let me do it over here, all right? And now we should have this showbiz loader variable available over here. And we can do one more thing, which is to show the date over here only when the load is not appealing. So let me just simply at this thing over here, So he ransomed lesser ngf as long as the Lord er is not opening, show this particular data. All right, so let me see if this now a large go to get closer. OK, so let me refresh it and let's see if we get the loaded. So I think we probably don't see the loaders off. Not because we're fetching the later from the local index David storage. Okay, So defecting time is quite fast on. If there is some Billy than you were definitely said. All right, so this is what I wanted to implement for the new struggle page on. I hope you were able to follow along. And thank you so much for watching this video. 21. Publishers Page: Hello, everyone on in this video, we're going toe debate for listing the publishers. So basically we want tohave the page where we will have the publishers listed just like this. Ok on is that can basically choose any of the publisher on get the publisher specific details. OK, so let's create this page. So I'll just go to the terminal on here. I'm going to simply say I nick 100 bitch publishers. Okay, so as you can see, it is done. Did it. Now what I'll do is I'll basically include this page in the menu item so that we can basically navigate through it. So what I'm gonna do is I'll basically goto the abduct competent or D s file on Dhere going to remove this list item from here on. Basically, replace it with the publisher page. So far, the title. I'll say publishers okay for the u R l. I'll say publishers Okay, on. Let me take this in the voting model. As you can see this publishers on for the I can make it if I can call this book. Okay. So let me see if this allergic or to the browser and check how does the u I look now. So if I open up the menu item now, as you can see, we have this publishers menu item. And if I click on this, then as you can see the publisher pages open. Okay. Now, I'll simply update some off the head of level information on the publisher speech. So let me this open of the publishers space started steaming. So here and simply open up this speech, so I'll basically copied the whole letter from the news detail page because it is mostly going to remain the same. So let me simply copy this on Bay Street over here, all right? And I loved it. The name over here as publishers. Right? Let me say this and let's see. How does the page look now? As you can see, this is how it looks. All right, So now we can never get back and forth between the publishers pace and the home page. All right, so now what we want to do is we want to show the list off publishers over here. Right? So the one ways to simplify it still ISTAF publishers are the sources using the a. P A So you haven't endpoint for the same. So let me to show you. So if you go to the documentation on, then if you go to the sources, then as you can see, if you heard this endpoint, then you will get this list off sources. Right. But the problem with this is that you will not get the image. Okay, All you will get is the idea, name, description, category and country. All right, so what I've done is I've created some static data for the publishers. Okay, on, I have also created the images for the same. So I basically pasted over here in the quarter base. So the place where we will based it is inside of the asset. Fuller, as you can see. So he really create another folder called as images in chart on Going toe based it over here. Okay, so let me simply base this. Okay? So now you see that instead of the images we have this new sources local on, we have various logos for the each and every new sources. Right? So now what I'll do is I'll also create the list off publishers or the sources in our providers folder. Okay, so let me just go to the Providers folder on here. I'm going to create a file called as mark publishers dot ds. Okay, on here, I'm going to simply say, export guns publishers on going to 32 a day. And inside of this, I simply pays the list of publishers that I've prepared. Okay, It's a legacy of this. Now, what I'm gonna do is I'll basically goto the publisher ph dot ds file. Okay. On going to inject this list or propitious over here. So going to define available over here called us publishers. Okay, this will be off type ari, which will hold any sort of values. OK, on going to initially started. Pretty publishers. Okay. So as against you have basically imported the publishers over here on. What we can do is we can console log the publishers so that we can see if this is available . So I said this start publishers, right? Like, receive this. Now, large, go to the rose RNC. So as you can see it now, we have this all the publishers available. So we have the name of the publisher. We have the logo on. We have all decorated the images inside of the asset folder on. Then we have this publisher court. Okay, So the publisher court is the court that when it took pass to the a p, I get the headlines according to the publishers. Okay, so let me show you the in point. So this is the one that we want to hit on. It basically expects the source scored or the publisher called. Okay, so we have basically preprinted like this. Okay, now it's time to basically show this data on the U. S. So let's go to the publisher. They started steaming for here and simply festival idea in grade. Okay, on. I'll give it. I triggered off fixed. I'll add the iron, bro. And I learned the Iron Column as well. Okay, on. I'll give the dough or close off Ryan, justify content center, right? Instead of the n column, I basically have the iron card. Okay. And then I'll have the Iron Guard header. Okay, on below this I basically have the iron card content. So the first thing that I will do is tow. Basically, I treat over the list of publishers so here and simply say, n G four on. I'll say let publishers off. Publishers. Okay, on. I'll get individual Publisher over here. So here in the eye and guard header, I can simply print out the publisher name. So I can simply say publisher not name. Okay? Because if you have a look at the mark publisher RTs file, we have the name inside of this name property. Okay, Next, in sort of the end card content, I will actual deem it so here and simply say I am. You meet okay on here. I want to simples SRC equals on going to pas de publisher Dark. Andi, we have this available in the local property, so I'll print out this low over here. Okay, so let me see if this now on. Let's he works to you. Why that we get okay. So now, as you can see, this is the guy. No few. Why that we're getting us off now, but we need to improve the separate. So the first thing I would like to do is to fix the column size on this small device as villas on the last device. So here on the column, I would like to give it a size off 12 by default. Okay, so for the extra small, I would like to have basically six columns. Okay, so we will have two columns each of having size off six. Next on the small alleyways. I would like to have basically four columns. No, for the medium device. I would like to have the three columns on for the last device. I would like to have the two columns. All right, so let me see if this Now on. Let's see, How does it look on the mobile device first? Okay, So as you can see now, on the extra small we have two columns. Okay. Since we gave it a size off six, right. The next thing that I would like to do is throw disputed text in the centre on if we can make it bold than it will look better. So here are basically separate inside off the strong tag. Okay, so I just move it over here. All right. So let me see of this. Let's see, How does it look? Okay on. I would like to give it a class off my intake center so that it is displayed in the center we're gonna say I am next center. Let me say this and let's help. Does it look okay? So this looks much better. All right, So now if we go to the larger device, let's see what happens. OK? So as you can see, this is how it looks on the larger devices. And the reason we're seeing so many columns is because for the larger the ways we have given the column sizes to sort really divided by two is this X column. So we have six columns over here, okay? And if I basically shutting the window and let me show you the responsiveness, so as you can see the column says are automatically I just rate according to the various break points that we have defined on the Iron column. Okay, so this place is completely responsive on there's one more thing I would like to do is to basically at the car service pointer whenever the user tries to over or this particular card. So what I do is I didn t find a class over here on this particular card, so gonna simply sake plus equals publisher card. Okay. On going to defend the ceases in the publisher page. Daughter sisters file. Okay. And here I would simply say concert s pointed. So let me see if this on next test this in the browser. So now if I hold over the Iron Guard, then as you can see now we have pointed. OK, insert off. Just simply arrow. All right, so that's it for this video on. I hope you were able to follow along on. Thank you so much for watching this video. 22. Publisher News/Top Headline Page: Hello, everyone on in this video, we're going to create the publishing news page. So if user clicks on any of the card president or here than he will be navigated toe the publisher New space. All right, so first of all, let me create the pace for the same. So I basically open on the terminal on here. I'll say I think generate page publisher hyphen news. All right. On as soon as it is done, we're going toe Aydin navigation from the publisher page to publish in your speech. So I'll basically go to the publisher based RTs file on going to create a functional here, so I'll call it as goto publisher News. Okay, on inside of this, we're going to add the navigation. So let me first of all, injected auto service, so he runs a private doted on. This comes from Roger. Right? So as you can see, it is being injected over here. No, here I can simply say this door daughter, Don't navigate on here. I can basically passed the road, insert off theory. So here I can simply say publisher hyphen news. Let me check if it is the same inside off the voting file. So, as you consider it, is the same publisher heaven news. All right. And now you basically include this function inside off the publisher based on text email. So here on the iron card, click Listener again. Simply say on the click off this call this function. All right, so let me say this on. Go to the brother. Let's see if we are able to navigate to the publishing new space. So if I click on this that, as you can see, we have navigated. Now what I lose? I'll basically had the similar header, as we have on the publisher, which toe the publishing new space. So I just go over here on the plays, the thing over here. Okay? And he really call you? Does publisher don't her lengths? OK, so did you see if this now let's see. How does it look? So, as you can see, we have this title over here in the harder. Okay, so now we want to basically fete the publisher specific news on this place. Right? So we do heaven and point available, wherein you can Positive publisher court inside of this source is key. OK, so We need this predator key over here in the pulpit to call this particular AP right. So for day Lewis, from the publisher page to the publishing new Space, I'll pass the query programs solar to go to the publisher based RTs file. So I just simply go to the publisher. Bitter tears failed, and here are basically creating navigation extras. So here gonna say const navigation extras which will be off type navigation extras. Okay, on this bacilli comes from a D rating low slash voter. Who cares again? See on this is going to be an object. Now, instead of this credit problems, we're going to pass our data, right? But first of all, we need the later So we're going to pass the publisher, object from the esteem ill. So here I'll pause the each publisher that is being integrated. Okay. And I'll basically received the publisher over here right now. Begin basically fast. The values that we need from the publisher object. So the first thing they're all fat is the court itself. Okay, So relegated from Publisher Dart Publisher court. OK, so as you can see in the more publisher doctor Yes, well, as you can see we have this publisher called over here in this particular file. Okay, Now, the next thing that I would always to pass the name is Well, because we're going to use it. So here I'll say, publisher dot name. All right, that's it. This is all they need to pass. Now. I'll basically pause this navigation extras to the second perimeter of didn't get method. Let me say this on. Let's head over to the publisher. New space on here. I'm going to inject the activity. It also is so here and say people did. But out on this comes from activity told. OK, so as you consider it comes right there. It anglo slash local on dhere going to simply say this dot activity broke. Dort credit becomes not sub scrape and I'll get the dessert. Now the first thing that I know is to simply console log the desert over here. Okay, so going to console log the credit programs over here. Okay, so here and some people in desert. Okay, so let's save this on test right now. So let's heard a word of the browser. No, For example, let me just go back over here. Okay. On, like due in court. So the publisher page again? No. In fact, like on this, then, As you can see, the court is our touched in the query problems as well as the name. Okay, on we have this great programs available over here. Okay? Now they can basically make use off this chord, which is a publisher court, and we confess data from this particular important. Right now, the first thing that we need to do is to define the pace of its for the same. So let's head over to the news GPS office. So long we were fetching the newspaper with the country cord indicative. Ready Now, Benito Fighting their top headlines with the help off source or the publisher court. Okay, so here, I'm going to declare a method called as get publisher Stop headline. Okay. And this is going to take the publisher court okay. As a string in the argument on Dhere, we are going to simply say this straight to be dot Get on for the, um I'll simply copied this from here. Okay. On going toe pasted over here. So here in the estate, built or get mentored have basically pasted the euro now, in sort of country here, we need to posit the source. OK, I let me just check once again. What is it? So this sources nachos. So sources I mean it to positive Publisher called over here. All right, so what ap method is ready on? Let me return the result from here, which will return the observable. Okay, so let me see if this now, Now let's head over to the publisher. New space. I'll be silly. Inject this office over here, so I'm gonna say a private news FBI service on this comes from news A P s office. OK, so as you can see, it is injected. No. All I need to do is to simply call the service on get did it. All right, so let me create the matter in which will basically called this office. So here. And let the matter as get publisher stop id. Like Okay, on this is going to basically expect the publisher. Good. All right, on what I basically do is basically head over to the home pest RPs on going to simply copy the logic from here so that we don't have the right things again and again on going to simply pasted over here. All right, Now I update some of the things such as Instead of get top headlines, we're going to call the get publisher. Top headlines method. Okay on. We're going to pass the publisher gold from here. Okay, on. Remove the rest of the things on. What I would like to do is tow Define variable Calder's article list on the page order. Okay, so let me just do it here. So first of what I would simply say article list, which will be Allstate, buddy. Okay on for the items it can hold any sort off value on initially decided to empty a day. Okay. And I'll also add the show page loader variable, which will be off type bullion on initially decided to falls. All right, now, the next thing that I would like to do is to inject the vigilance office as well, because if there is some error in the Baycol, we had basically showing the toast over here. So let me inject the vigil service over here. So gonna say private dirty hotel service on this comes from the general service. OK, so As you can see, they're basically calling. The president does method, if any, sort off their Attackers, All right. Now, as far as calling this method is concerned, I'm going to call this in the subscript called back. So here, first of all, I detect if the publisher gorgeous present. So here I am going to simply say, if it is a dark court exist, then simply call this particular method. So he rented this. I thought get publisher top headline on going to pas de good over here. Like so let me see if this Now on, let's go to the browser and say Forget the desert. Okay, so let's go to the buzzer. And as you can see, right away we have this result over here, which is printed from the publisher. New space. Okay, on, if I simply opened this up, then, as you can see, we have this publisher specific articles. All right, on. One more thing I would like to do is tow are dynamically. Show the publisher name over here instead of static publisher top headline. It should show the name of the publisher, then top headlines. Okay, So since we're passing the name Let's make use off it. So here are basically declared our property called as publisher name. Okay, this will be off type string on initially El Cerrito. I'm destroying. All right, so here, I'm going to again. Detect. So here I'll simply say, if result dot name exists, then basically started inside of the publisher name variable, which is defined over here. So gonna say desert dark name. Right. So let me see if this now on. What I'll do is I'll basically use this particular variable Insert off the publishing new space tourist email. So here I am goingto dynamically make yourself available, which is this one. So let me see if this now and let's see what happens. So as you can see now it says ABC top headlines. Okay, so let me go back on. Cure the console. Let me go to the publisher page, for example. If I go to the arrest Technica, then it says heiress technical top headlines on we get beat up her lens for the rest Technical over here. Okay, so now that we have the date already, all we need to do is to show the news articles in the form off cards just like we have on the home page. Okay, so we already have the USA defined. So why not simply use that particular court and basically Shourd in sort of the publisher? New speech. Okay, so let's go to the court base and I'll go to the home based on its simple file on here. I'm going to simply copy the I, Ingrid. Okay, on I'll copy this. In column is Well, so let me just first of all based this much. Okay, next, What I'll do is I'll simply close this up properly. All right? Next. We need to basically copy the news card. So we just defined over here, I think. OK, so here it is. So let me just copy this card from here on Bay Street over here. One night on. Let me for my this properly. And I would like to also have the bases loaded is well, so let me just copy this from here on going to pay street over here. All right, so let me say this. Now, let's see what other things that we need. So, first of all, it is basically not able to get the article object So of course we didn't add the attrition on the article list that we have over here. Okay, so I'm going to simply it read over it. So he really basically, at the end before directive on going to simply say, let article off article list. All right, so now we have this article object available over here. Andi, I think we also need this open used to tell matter. So let me go to the homepage Dart. Yes. Okay. On. As you can see, here is the matter, which is open news. Little bit. Copy this on. Going to pay. Stood in sort of the publisher. New speech. Okay, so let me pay straight over here. Okay? On this basically needs this tortoise service on as well. Is the doctors office? All right, so let me in that boat off this. So here. I'll say private store it on. This comes from Madrid and excess storage. Then we need the although services. Well, on this comes moment, they're eating less slash No. All right. So I think this looks good. Okay, So let me see if this now, let's try to see How does the white look now? So Let's go to the publisher on click on any of the publisher. So as you can see now we have this publisher specific guards over here. Okay on. Let's try to take this inside off the big screen as well. So as you can see, this is how it looks on the big screen. Now, whatever like to do is I would like to update the column size for the big screen. So in start off six, I would like to wear it for so that at least we have the three columns pregnancy of this. Let's go to the Plaza. So as you can see, this is how it looks now. And let's also see the U. Y by simply shrinking this producer page and let's see, How does it look? Okay, so as you can see on the extra small, it is taking up the whole 12 columns. Okay, then on the medium size, each column is off. Six days hands. We have no columns on in case of large devices. Each column is off size four hands. We have three columns, all right, And let's also click on this view Burton, and see if your navigated to the detail pit. So if I click on this, then insurgency were navigated to the nurse treating page Okay on. We can basically go back and forth. All right, let's see this in the mobile devices. Well, okay. Let me just open this up. Click on this. Okay, so this looks good. And let's also see the y in the iPhone device, so I see Like, the iPhone. Refresh the page. Okay, on as you can see, this is how it looks on the IOS device. Alright on. Let me go back on. Let's go to the publisher page on, for example, if I click on the address Technica than exigency, this is how it looks. Let's go to someone. That publisher then, as you can see, it looks good on. Let me never get to the news Riddle pit. As you can see, we are navigated. So you guys, that's it for the publisher. New speech on I hope you were able to follow along on. Thank you so much for watching this video 23. Save Article Locally: Hello, everyone on In this video, we will add the functionality for saving the articles locally so users can basically seven instead of articles. So let's add a button over here. Just besides the view Burton to save the article. And I'll go to the home Pistorius Stammel on a few school down at the bottom. Okay, then, As you can see, here is the view, Burton. Now, I would like to add another button, which is save button. So I'll just simply copy this I in column on going to pay street over here. Okay? And I did a couple of state changes such as I'll change their text, so save okay for the icon name. I'm going to make us if I can called us bookmark. Okay. And I'll give this icon color off secondary, and I'll give this burden off, Phil attribute over here, and I'll set it toe our plane. All right, on I remove this. Click listeners off now. So let me say this and let's see. How does the u. N. Look now? Okay. So, as you can see, this is how the your eye looks basically Okay, let's also see this in the Broza. Okay, So as you can see, this is how it looks now on the click off the say, Britain will implement the method which will actually see the article locally. Okay, so for that, what I'll do is I'll create a function in the home piss tortillas. Okay, so let me call it as save article. All right, on, we will receive this article. Object from the esteem ill. So let me just pass it. Okay, so on this and Burton, I'll basically added up click listener. Well, it on. I'll pass the article. Objects are for souls to save article and I'll positive article object. All right, so now, instead of this method, what I'll do is first of all, received the article object. Okay, So well saving article. You basically have two scenarios. The 1st 1 is that there isn't a thing in these stories, and you're setting it for the first time. Or if there are already some save articles in the students, and you want to add the numerator toe the existing article. Okay, So what I'll do is, first of all, I try to check if there is some existing data inside of distillate so here and simply said this darts storage target on, for example, the name of the key that we will keep is saved articles. Okay, on this bacilli returns the promise so I can make it off the keyboard, and I will make this function. Issing and I started inside. Awful variable. All right, so here I can simply say, if result Nordic Arsenal, that means there is some existing data instead of the storage. So in that case, we need toe add this new article, toe the existing data, right? So what I'm gonna do is I'm going to simply say dessert George Bush, and I'll push this article object, right? And again I'm going to set this new diesel. So this today, so gonna say this our storage dot said And I'll keep the key name as it is. Okay? And I'll said devel us. It is a already on going to simply make it off the obit keyword over here as well already know if the desert is normal, that means we're setting this for the first time. So hearing this case, I'll say, Wait, this dort storage dot certain and alpa's Deqin Emma's save articles on for the value I need to basically passed the way. Okay, I cannot pass the whole object because if I passed the whole object, then I wouldn't be able to properly push it right away. Just like I'm doing, you know? Here. So he writes a insert affinity. I'll pass the article object. Okay, so let's say this now. Allergic or did the closer on and observe the storage how the data is stored. So I'll go to the application, then today. Index TV. OK, on. As you can see, here is our storage. Let me rephrase this properly. Now, for example, if I click on save on like me, the fresh it properly then as you can see, we have the same article. So initially we didn't had any sort of article. So this particular condition grand and it basically stored the ideal object in certain affinity. OK, so as you can see, we have this array off just one item knowing first stood another article, then let me refresh it properly. Then, as you can see, since we already have the are the times that of the storage. So we're basically pushing to the existing data and setting this new result toe the saved article. So the discord simple on one more thing I would like to do is to simply show the toast whenever the safe operation is successful. So let me go to the core base. So here I am going to simply said this God better. Dude, in service, your president toast. And for the message, I can simply say article. See him successfully. All right. So, for example, if I save this one, then as you can see, we have this toast over here. For example, if I save this one, as you can see, we have this toast over here, okay? And they find a fresh that is against, you know, we have four items over here. All right, So what I would like to do is I would like to add the same functionality toe the publisher new space as well. Okay, So let me just go to the publisher in your speech, okay? And simply copy, do you away from the home page. So let me go to the homepage. Okay. So I just copy this and column on going to pay street over here. All right, on. I'll also copied this save article function Okay, on I'll Hastert instead of the publishing new space or PS. Right? So let me simply pestered over here, and I think this low scored. So let me see if this now alerted this works. Okay, So I'm going to simply first off, all clear the whole story it. So let me just simply clear the whole story. Okay? Let me go back. Okay. On. Refresh the app on for example. Now, if I go to the publisher speech, let's even add it from the home pitches. So if I read it over here, the fresh days and as you can see if we have this one article No, if I go to the publisher speech, okay. And if I I did from here, then as agency, I fired a fresh this. Then we have another article over here. All right, so our function it is working. Fine. Okay, let's see when tested in sort of the browser. So, for example, if I save this one, then as you can see, we have this toast as well, so everything is working fine. Okay. On in the next video, what we're going to do is tow we're going to basically fete this here. Article on short insert off another page. All right, so that's it for this video on. I hope you were able to follow along on. Thank you so much for watching this video. 24. List and Remove Saved Article: Hello. Everyone on in this video of your going to basically show the saved articles on the way. So let's create paid for the same on. We'll all sorted navigation from here in the menu item to navigate through this here article page. So I didn't go to the core debates and under debate, So I'll open another terminal on here. Elsie, I nick 100 page on the name of the page, You keep it as sealed. High fun article. Right. So this will basically is under debate. On what it always. First of all, I have the menu item for the same. So let me close this up so that we close this thing. Andi basically goto the Abd art competent or t s fight on here. I another entry for the menu item. Okay, on this time, I'll basically call it as saved. Okay. For the Ural, I'll simply say saved hyphen article. Okay. And let Mitch this start with your present in the uploading model file. So, as you can see, it is saved. Hyphen. Article next. I would like to use the icon called us bookmark. Okay, so let me see if this on Let's go to the closer so it against you know, we have this saved many white over here on this. One more thing I would like to do is tow. Have the second curricular on all of this. I can't. So I'll go to the Abdur Component or the stimulus file. And here in the eye, and I Can I have the color off secondary. Right? Save this on. Let's see. How does it look? Okay, so as you can see, this looks much better. Now, if I click on this saved, then as you conceive, you navigated to the safety article page. Okay, So first thing that I do is I had the back button on the saved article page. Okay, so let me copy this from the news detail. Page started steaming. Okay, so I would simply cos ongoing Tau Bay Street over here on going to update this as saved particles. Let me see this on. Let's see, how does it look? Okay, so if I click on the back button, as you can see, I'm able to navigate back and forth. All right, so now, in this safe practical page, I need to First of all, first digital from the storage. Right. So for that, what I'll do is I'll basically go to this article based RTs on here. I'm going to basically create a method called us get articles. Okay. And I'll basically called this matter as soon as the constructor is initialized. So gonna say this store to get articles. Okay, on here. I'm going to simply first of all, inject the story service in the constructors. So gonna say, private storage on. I'll get it from I had the right eye. Next last storage. Okay. On here. I can suppress it this dot storage dot Get. Now, as far as the key is concerned, I think it's called us Saved articles. So let me just check. So, as you consider is saved articles. So let me simply pestered over here on this Basically returns the promise, so I'll make it off the of it keyboard on the making of the overt keyword. I need to make this function, I think. Okay. No. Well, basically, create are very able in this class which will hold the article list. So gonna say article list. Okay, on this will be off the body. Okay? And it can have any sort of values off now. So going to set it to the Mt. Airy and as soon as we fed it from the storage. So gonna say this darn article ist calls this. All right, so this looks good on what I'll do is simply console log the article list over here. So they reckless pregnancy were able to fetch it. So let me simply console log the article list. All right, so there's a little bit closer on. Go open up. The consul is Well, let's see what happens. So as you can see now, we have this three item. Okay, on. We have this three item that are present inside of this storage. Okay, Now, all of you need to do is to show these three items over here in the UAE. Now, for the U l basically makes off the existing you that we have already implemented in the population. New space dot estimates. Okay, so going to copy this and greed Okay, on going to basically pay street over here. All right. On what, Lewis? First of all, we're already trading or the article is so that's fine. Basically, remove this thing from here. We just saved thing. Okay, Ana, really keep the view as it is now, apart from this view functionality, I would like to have the remove article functionality on also ill abrade. The icon is trash. OK on. I'll keep the rest of the things at as it is. Now, let me also copy the open news Littlepage function from the publisher. New space tortillas. Okay, so let me just copy it from here. I'm going to paste it inside off the state Practical pace tortillas file later on. We needed all the service ordered me injected over here. We're gonna say private open on this comes from it. That it anglo slash daughter. All right, now there is one more thing. That is the meaning. We just defined this showplace in order available, so let me just declare it over here. All right. On, this will be off type bullion initially started to falls, and as soon as this matter is called, I simply said this not show Big brother equals true. And as soon as this promise is fulfilled, I'm going to simply say this dot showcased order equals false. Alright. Quite simple. So no, I think we have all the data that we need. So let's at least have a look at the y and see How does it look? So let's go to the browser. Okay, on As you can see, we are able to basically see the saved articles. Okay? And if I click on the view that insurgency I'm navigated to the new Strettle paid OK, so it is working Fine. No, the only functionality that is the meaning is toe removed the item. Okay. So to remove the items, we should basically first of all, ask for the user consent, whether he basically wants to remove it or not. So for that, I'm going to make it off the alert controller. So let me show you. So if you basically visit the ending from dot com slash dogs on go to the components Onda, as you can see here, is the an alert competent. So this is how it basically looks like, so users can basically cancel or say yes. Okay, in sort of the alert. And I think it is the example off the alert controller with the cancel and the okay button . Okay, so I'm going to simply copy this on. I'll basically go to the video. Total service. Okay on. I'm going to pay straight over here. All right. On the first thing that I would always to inject the alert controller, So gonna simply say private 100 controller on this comes from a lot controller, Right? So, as you can see, it is injected from the great dining Slash angular. Now, instead, off. You know, having this hard coded things over here. I would like to get it dynamically from the component. Okay, So going to define the parameters over here, such as header message Andi buttons. OK, so we'll get the buttons also dynamically. So let me replace this with the harder look it on. I'll place this hard coded a message with their dynamic message on same 40 buttons as well , right? So let me simply the pleasure like this. Okay, on. If you want to basically use the six shortcut than what you can do is you can simply remove this as well, because the name of your key and they will your same. So simply you can specify it like this. Okay, on simply do it here as well. All right. Next. What i'll do is I'll basically make it off this method. Okay? In the saved article page. So let's go to the same article page. So let me just go to the same article face. Okay, on first of all, here I inject the digital service are gonna say, reject you didn't service on this comes from the general services. So as you can see, it is injected over here. Now what? It always, first of all, I'll go to this a radical place rest email on on the click off this burden. I would like to create a method. So I would say quickly, it's no way here and went to call the method as human article. Okay on. I'll basically create this matter over here in the practical based RTs. Okay, so that means it's created over here. All right, So instead of this, what I would like to do is, first of all, I would like to ask for the user consent using the alert controller. So gonna say this video dude in service dot President Alert. Confirm. Okay, So for the headed really basically positive message has come from Okay. Next, we want to positive message. So for the message against implicit. Are you sure you'll oneto delete this article? All right. On inside of the third argument, I would like to pass the area off Britain's. Okay, So simply going to copy this whole array on going to place it over here, So gonna replace this thing with dispersants. All right, so here, I'll basically remove this. Says his class now instead of this and let mattered on this. Cancel Burton. We can simply console log like cancer again just for our reference. So here I can. Simplistic answer on this is the handler for the okay button. Okay, So these air, basically to Burton's, as you can see here, is the other off objects. So it has to Burton's. The 4th 1 is they can sell. The 2nd 1 is the okay on the canceled. We don't want to do anything, but on the okay, we actually want to remove the article. Okay, So what do you under do is instead of this, we want to write the logic to remove the article from this storage. Now, the interesting, But here is that we don't have the unique identify it for the articles that we have in this too late. So let me to show you. So as you can see, all of these three articles don't have the unique I d. Ok, So there are two ways that you can post it further either by using the index detriment work article Do remove all. You can make it off the Red River, such as you waddle. Okay, so you can use it, whatever you want, but I'll choose the bottle to uniquely identify the article that the user wants to relate. So what you do is from the esteem in basically passed the article. You are so here. And simplicity article you are okay on, since we're basically treating over the article list over here. So we have this individual article object on it. Attrition. So I'm basically passing just the you are really? Okay. So basically saved the u r l over here. So going to simply say you are so no here. I'll simply say this dart store it north side and I directly started toe the saved articles today. Okay, on now, what I want to do is I want to basically keep only those articles whose you are really is not equal to the U. N. They're this past as an argument to this function. Okay, so here I can make it off the fritter function on the article list, and I can remove those article or filled or does article whose you are is exactly this. Okay. So here and simply said this North article list start fated. Okay, on. I'm going to get each article in the attrition, so here are going to simply say only keep those article whose you are. It's not a cool toe. The u. N. They're dispersed as an argument to dysfunction. Okay. And I'll make you so they would keep it over here because this side mattered returns. The promise aren't Omega's off the grid, keyword. I need to make this function facing right and know where they lose. I'll basically called the get articles function again to get the fresh new articles from the storage. OK, so this will call this method. Okay, Next, What we can do is we can show their toes to the user. So going to simply said this dart between different service dart president toast on inside of this toast, I can simply say article. They moved successfully. Alright, So let me say this. Now let's see what happens. Okay, so let's go to the browser. On the first of all, I'll try to basically click on this remove button. OK? So as you can see, we have this alert. Confirm. Now, if I click on cancel on. We should have this console over here. We just cancer. Okay, so this is coming from the cancel button. Heyler. Okay, now if I tried to praise Okay, let's see what happens. Okay, So as you can see, the article is moved and it says are guilty. Move successfully on Let me go to the storage. Refresh the storage. Now, as you can see now, there are only two articles remaining. Okay, so now what I'll do is I'll remove this one as well. Okay, the freshly stories. Now we have only one article on remove this one as well. Okay, on defense, they start it. So, as you can see, we don't have any sort of articles. Okay? Now, if there is no data in the storage, at least we can show the use that our message over here called us. No article found, so let's just do it. So I will go to the same article based on a steam L on here. I'll deny and column right inside of this. I'll have the iron card, and in sort of this, I'll have the Iron Guard heard it. Okay. On. Instead of their title, I can simply say, uh, no saved article. Phone. Okay. And I want to show this particular column on Live in. Okay, so I like the conditional with you on live in the article list is empty. Okay. So I'll simply add a north condition over here on not only this, but I would like to add another condition, which is toe show. This particular message on live in the show page order is false as well. Okay, so when both of this condition fulfills, then only we want to show this message. Okay, so let me see if this now excluded the browser. Okay, Let's see what delegate says against it says no same article. Phone. Okay, so this looks good. Let's go to the bigger device and see. How does it look? So let me refresh this on. Let me go to the saved bait. So the concert says no, sir. Practical found on. Basically, if I tried to save this this also, let's go to the same fate that, as you can see, we have this boat off this thing over here. If I tried to basically did this, then as you can see this being removed and we also have the toast message Okay on. One more thing I would like to do is to have the under official functionality, which is the pull down to refresh functionality on the same page. So I basically get it from the homepage itself. So let me just for the home president Estimate going to copy this and the fresher going to go to the same article based our estimate on going toe baster just below the Iron Guard content. All right, I would like to also have the dough, the fresh method. So let me just copy from the home based RTs. Okay, so let me just corporate from here. Let me go to the same article based RTs on basically Bay Street over here. All right, You know, in sort of calling copper lines, I would like to call the this door, get articles. Quite simple. So I think this low scored on. Let me say this now that missing this also, let's go to the browser on. Let's see if we have the eye under pressure so that we can basically pull down to refresh. As you can see, it is working properly. Fine. Okay on. Let's even try to basically see the Y in the iPhone as well. So let me refresh this again and let's see. How does it look? Okay, so it's often already seeing that cannot read property land, Tufnell. So the resent is happening is because in 10 of these stories there were no articles, so this particular method basically returned inal okay on it basically said no to the article list. So let me update this thing over here. So when doesn't get him off this from here? Okay, on going to simply say const desert equals states, okay? And I can simply check the null check over here. So gonna say if visit north equals no. Then only assigned the article list. So the desert All right, so that you see of this. Now on. Let me see this. Let's go to the girls are invested. So as you can see, if I refresh the peace again. Then the other is gone now. Okay, let me try to wear some off the article. So here and say save we're going on. Say say we're here as well. Okay, now let's go to the same article. As you can say, we have both of this article. Now, if I basically tried to remove this cancel it. Nothing happens. Click on. OK, residency disconcert. And we have this. I was style alert on the IOS platform. Okay, if I click on OK, over here, then. As you can see, we have this message over here. Okay, so this looks great. Good. Okay, Andi, that's it for saving the articles on. I hope you were able to follow along on. Thanks so much for watching this video. 25. Avoid Saving Duplicate Articles: Hello, everyone on. If you basically try toe, save the same article twice. Then you will see that it will be saved repetitively in this storage. Okay, so they're going to show you. As you can see, we have this duplicate entry. So what if we need to do is before saving the article went into a plenty check whether the article exists in the storage or not. So I'll basically go to the homepage tortillas file because that is where we have this say , Why didn't functionality Okay, so let me to simply go to the homepage tortillas. Okay, on. As you can see, here is the same article function. So not before pushing the new articles are the result willing to check if the article already exists in the result. Okay, so what I'm going to do is I'm going to check if the saved article you are ill is already present in the stories. Okay. And as discuss before, we don't have the unique identifier for each and every article, so I'm going to make it of the Ural for uniquely adding defying the article. So what I'll do is I'll basically take if they gave one article you waddle is already present in the storage. Then don't say Well, OK, so the way I'll do it is by simply filtering on the result on taking if the u. R l already exist. So here I am going to simply say, desert board filter OK, on in nutritional Get the item that this president in, sort of desultory. Okay. And I can simply check if the item don't you are ill is equal to equal toe article dirty water. Okay, so if this is the case, then we will get on our way with that particular articles like me story it here. So when I said const existing article list, OK, so now I can basically apply the if check on the existing article list. Portland. Okay. So if this is true, that means there are some items in the existing are developed, and that means that particular article is already there in this story. So here I am going to simply throw the era. So when I said throw new on for the other methods and simply say hopes article already saved, all right. On to handle era, I let the trike it's block, So gonna start. Try. Okay. And then I decanted block as well. Okay, on when there is a matter, I can simply say this Dort digital service, dart president toast. And I can presently error, so I'll say her dark message. All right, Next, I'll move the whole court inside of this. So gonna simply remove this Ongoing Took a street over here. Right? So this looks good. Like, receive this now and let's test it. Okay, so let's go to the browser and I'll open up the consulates. Well, okay. On what I do is I will first of all, try to remove each and every article from here. Okay, on. But if there's the applicant, Okay. No, For example, if I tried to save this, then we get the message. Is article safe? Successfully known for trying to save this again That it says hopes article already saved. Okay, so our check is working fine on lex, even taking the status. As you can see, we just have the one article saying okay. And if I say if some of the article then it works totally fine late. So I would like to also add this check on the publish in newspapers. Well, okay, because here also, we have this same article functionality. So I'll simply copy dysfunction on going to place it on the publishing new speed start. Yes. OK, and I'm going to replace it over here on. Since this logics kind of same, you can basically place it inside of the helper service to have a common logic, so that create the comments of it. So I'll just go to their terminal and here, Alice, ai, Nick, generate service. And I would like to place it inside of the Breuder's folder. Okay, on for the name of the service, I'll simply say helper, All right, So instead of this helper service, we will add the common logic for saving the article. Okay, so that we just wait for the while It completes. So, as you can see, we have this new Soviet security, Okay, So that we simply go over here now What I'll do is that simply copy dysfunction. Okay. Ongoing. Tok start over here. All right. So let me just do this. No, here, we'll do, is I'll inject this story service. So gonna say private storage on this gun from Madrid i nick slash storage. Okay. And we don't need the digital service over here because we're going to show their toast from the company, not from the service. Okay, so let me remove this from here on the move This from here as well right now in Pennsylvania that I would like to throw the other from here, So gonna say through new era, and I would like to pass the whole other object. All right, so this looks good. Now, let's use this particular service in the home pitch as villas they publish in newspaper. So let's go to the home bits first, and I'll inject this office over here. So gonna simply say private helper service on this comes from help us. Service says against it is injected over here. All right, so here, in this a vertical I can simply remove everything from here on going to simply say this. Lord help us service not save article on. I need to pass the article object. So let me pass it over here, okay? And since this is anything function, I can make it off the other keyboard over here. Okay, on. If this promised is all successfully, then we're going to show you toast as articles have successfully. And if there is some error that wins, If this service basically throws the error in any case, then we're basically getting it over here on President thing, the other mrs inside of their doors to okay. And let me do the same inside of the publisher. New space got PS. So let me just replace everything over here is well okay. And I need to inject the whole bus service over here. So gonna simply say private help us service on this comes from help US service. So as you can see this injected idea top, and I think everything should work fine now. So let's go to the browser and test. Okay, So what I'll do is first of all, I would remove the existing saved article so that we can see clearly it and everything, right? Let me refresh everything again. OK, So for example, if I try to save it from here, then as you can see, it says article safe, successfully save it again. Then it says hopes articular disable. Okay, let's check inside off the same page. As you can see, we just have one article okay. And let's test it on the publisher page as well. Okay, So, for example, if I save this article, it says article saves successfully savored again. It says up article under the same light on Saved. This is Well, it works for vilifying. Okay, let's go to the store. It. And as you can see, we have all the three article that received. All right, So this look scored on, and I would like to also update one more thing, which is the message that we get on the same article page when no article is farm. So let me show you that made it more everything from here. Okay. On moved. Assessable then. As you can see, this looks good on the amber device on as well is on the web. But as soon as I select the iPhone, just have a look. It looks quite baked, right, so we can upgrade this thing. So there's go to the saved article. Page started steaming. Okay. And here I can basically remove this iron car title on Just plays the message inside of the Iron Godhead itself. Actually. How does it look on? I would like to make it bold. So I will basically had this strong take as well. So gonna say, strong on going to move this over here. All right, so let's see. How does it look now? Okay, so this looks good. Let's also check on the endured as well, Like me. Refresh this. As you can see, this looks good as well. Let's check on the Web is Well, all right, so this looks good. So they're take for awarding the duplicate article to be saved instead of their database. And I hope you were able to follow along on. Thank you so much for watching this video. 26. Build Ionic App as PWA in Production Mode: Hello, everyone on in this video, we're going to build a tiny cap as a progressive Web app in production More. Okay, so when the bill process is completed, you will see that this www folder will have some static Jay's asserts and the index released email that you can take on any server and Soviet. Okay. In fact, we're going to So are compiled application with the Norges over. Okay, so let's first of all, bill your application in the production more okay. And as discussed in the previous videos, make sure that you have the involvement dot prod Ortiz with the appropriate in moment that you want in the production. Okay, so make sure that you have the environment variable over here. Okay? Now, what I'm gonna do is I'm going to simply head over to the terminal sort of Boluda application is a weapon production more simply around this. Come on, Nick. Build and specified the hyphen. IPhone broad flag. Okay, so let's just wait for the whale till the build process is complete. Okay? So as you can see, the bill process is complete. All right, now, what I'll do is I'll basically go to the court based. So, as you can see here is their the brutal, brutal blue folder on. We have the assets over here, okay? And it has the images that we used. Okay? And it has the s video for lead as well. And it has the compiled Js file. Okay, on you will also see index started Stammel. Okay, so this is the file that we want to so using ourselves okay on you conserve it. Using any sort of silver, we're going to use the Norges for the example. So let me quickly created Nordeste Sarwer and served this compared application with the node.js. Okay, so you create if I lower here called as said Ward RJ's okay? No, I'll install the expressive or which is inextricably veteran book for the Norges. So gonna say in B m Stall Express on Let's just wait for the world daily completes. So, as you can see, it is done installing now here, I'll simply side up the minimalistic nor just ever so here. I'm going to say const express equals require express. Okay, then I'll basically create the app soils. A const equals express. Okay. No one said a limited where for parsing the request off type application Justin as well as the u R l Foreman Corded. So he tells the AP not to use on gonna say express nor Jason. Okay, Next, basically, say abduct, use express nor the orderly unguarded. And instead of this past the extended as true, right. Next, I want to basically set up the express static middleware force or being these static files such as your CSS, JavaScript and the images. So here, going to simply say I have got to use experts dot static, and you have to provide the absolute part. But before Lott very want to solve this study request so far specifying the part, I'm going to make us off the library off the Norges called a spot. So that money, quite it over here. Okay, on, Harold basically say, but door joint on the force argument that I'll pass is the idea name. So this double underscore the art name basically returns. Depart to your current directory from the home, okay next year to specify the for the name, so I'll call it as www, because they're swear an aesthetic files are placed. Now, what I'll do is I'll simply say app. Lord, listen. Okay on. We want to specify deport. So basically create a very well over here called as port. And I, first of all, try to fetch it from the moment. Variable. Okay, so here and support on, if not for an Indian woman, valuable, then user, The full board, for example, 5003. Okay, so just a random port going to space right over here on in the call back. I'm going to add the council message Officer was started. So when I simply say sir, what started on board on going to specify this variable over here? All right, so I think I said what is ready. All we need to do now is to specify, did out for sending the next door that steam. All right, because as soon as that's always started, we need to solve this index dot It seems like any sort of website. Okay, so here, I'm going to simply say app door to use. So I'm defending the part on the uplevel middleware. Okay, so here are specifically part, So gonna simply say for all the notes, simply handled this particular model. So here l basically received the request in the response object. So here I'll simply say response dot Sane file. Okay, on For the name of the file, we want to basically positive indexed artist email on As far as the part for this particular file is concerned, I'm going to specify this in the root. So here and simply copy this part of our joint, okay? And pasted over here because their displacement indeed a little bit of root directory. Okay, so I hope this looks good on by Think our salaries ready? So let's test it now. So I'll go to the terminal on here else in order. Sarwar Georges And as a concert says, that was started on board 5003. So that's to go to the 5003. So one of simply, say, 5003 over here. Okay, lets see. So it against your applications running completely fine. And you can use any sort of website already warned, because at the end it is just a bunch off competitive years. CSS files and didn't extra test email that you want to solve on any Web server. Alright, so I think that's it for this video on. I hope you were able to follow along on. Thank you so much for watching this video 27. Android Studio Setup and Set Environment Variables: Hello, everyone on in this video, we will see. How can you set up the endured studio so that you can build your application for the native android platform? Okay, So if you were really visit any cream work dot com slash dogs, then here is the whole guide for setting up the endured studio. Okay, so the forcing that you need to make sure is that the corridor is not comfortable with the latest version of Java. Okay, on you have to install the decay it specifically Okay, So you can basically stall the dedicate specifically by going to the link over here. They excluded a clear to the download page on. If this link is not found in the future, then you can simply search for install J D. K eight. Okay, on you will go to the same documentation. All right? And when to install it on, then simply head over to the terminal on run this command with his job. I found origin. Okay, this will tell you the exact of hours under it is installed on their machine. Okay, on. Make sure that it is J d. Given pointed. Not any other as off. Now, maybe it contained in the future, but it's off now. You must install dedicate. Next. You can post it further with the and North Story installation. Okay, so if you basically visit the developer daughter android dot com slash studio, then you will simply get this Donald Link Simply download it and install it. Okay, So once you have your engorged studio, that will look something like this, Okay? And when you will basically create the new project, just make sure that you select dealing which has job. So let me show you. So for example, here I choose the empty activity, you will go through the same project set up. Now, he'll make sure that you select dealing with this Java nordic wobbling because it will require some additional step off installation. Okay, so simply click on next and finish on. You will see a blank. Was it created like this? Okay, now, if you basically click on this icon So this is basically every manager which is android worked old West manager. So you can basically install as many watchful device as you want. OK, so these are simply your emulators right on which you can basically test your application, so you have to install it inside of your android studio. Okay, so I already have installed a couple of them, but you calculated as per your choice. So if you simply click on this creative, orderly ways on, select the device that you want and simply click on. Next on, do the installation. Alright. On da. Once you have the installation completed, you can simply click on this button app or the play button to test that everything works fine on your machine. Okay, so this is just for checking that they're not. Studio is set up properly, and everything is working fine. Okay? Nothing more than that. So if you have the application deployed like this than that means everything is working Fine. Okay. So now we have the complete and Lord students that have done unit to basically export some of the environment variable toe. Probably build into a new application for the native and great. So I need basically used the n word as digger tools on Go. To use those schools, you have to basically exports. I mean, woman variable looking. So it is given over here. Okay. In this documentation on, I'll also show on the screen. So as you can see, here are the environment variable for dilly Knox and the macro wish you can set it in sort of the bashar see file on. If you don't set it over there, then make sure that you exported every time you're on the Ionic build command for the native android. Okay, on these are the environment variable for the windows operating system on Make sure that you have each off this environment variable set up on your machine. And since I'm wondering those like me to show you, how do you set up this in moment? Variables. So if you basically search for the moment variable on, go to the environment variable over here then, as you can see, I have this in order is digging or defined. I also have a job, a home defined Andre stuff. The involvement valuable are different here in the part. So as you can see, I have the environment variable for the platform tools, build tools, emulator being on also the part upto the Jacobin on also up to the belittles and diversion . Okay, so make sure you have all of this environment very well set up on. Once you do, simply click on OK. And if you are basically running the existing terminal, then make sure you close their criminal. Andi started criminal. So there the environment variable can play into effect. OK, so that's it for the endorsed Orio and the environment Variable set up. And I hope you everybody to follow along. And thank you so much for watching this video. 28. Deploy App to Real Android Device and Styling Native Status Bar: Hello, everyone. So in this video, we will see how can you run your application on the rial and or device? Okay, so basically, I'm first of all connected using the USB. Andi, I have the USB debugging turned on. Okay, so make sure you do it on your phone settings. Onda Gremillion basically screen mirroring. So on the right hand side, you can see the screen off my phone. Okay, So before running the application on the android, what I would like to do is I would like to update the pick a name. So let me just go to the court based on I'll go to the conflict or XML. Okay, So here, you're gonna break the picking him. So currently it's my app. I would like to call it as, for example newspaper. Okay, on here is a very big charity on here is diversion off the epic on here is their description. Okay, so I'll update the description as, for example, news articles. Okay, so let me say this on large to go to their terminal on now. Basically runner application. Okay, so here I am going to simply say I think Cordova run android. Okay, on. Let me hit. Enter on. I'll get back to you as soon as it is done. The plane. So as you can see on the screen, Thea publication is deployed on Everything is working. Fine. Let me just even try to run some of the application functionality. For example, fetching the publisher articles saving it. Okay, let's go to the storage and see. Okay. So I'm basically ableto you from here as well. If I try to remove then as you can see, here is the alert. If I can send nothing happens any federal, then it is removed. Right? Then we also have people. Don't daughter fresh over here on the home page. Also, we have this pull down to refresh. Okay? No. One thing that he would observe here is that there is no status, but okay, it is completely black. So you cannot see the battery information or the wife information all the time. Okay, so a few basically go peddicord base. And if you go to the abduct component, RTs fell, then you will see that the status, but because it is already injected over here and in fact, the school to a plug in for the same. So if you go to the plug ins, then as you can see, the called up looking straight as bar is already there. So although style the status bar with some different color other than the black which is their right now, we need to use some of that of my third of which I'm going to show you. So if you basically visit the Anne cream Meqdad comes less dogs, then go to the native on then If you go to the community addition over you, then here you will find this state does. But again, as you can see and you can make yourself a method that is specified over here, which is big around Kalata by hex drink, and you can pass thespian civic color that you want to stay. OK, so for this, what I'm going to do is going to go to the court base on going to replace this method on for the color. I would like to use the same color which is there in the primary. So let me simply copies on going to pay shirt over here. All right, on going to apply the hash as well. So Let me see this. Now let's go to their criminal on Going to run the I, Niko Doran and right again. Okay, so let me open up this screen mirroring as well. So here are Jelinek Cordova done on. Right, Okay. And I'll get back to you as soon as it is done. Deploying. Okay, So as you can see on the screen, you can see that the application is deployed on. Sometimes there is some sort of frame delay if I don't interact with the screen for some amount of time. So hands, who basically saw that blood thing over there? But that's okay as soon as I start interacting that things become quite clear in this good mirroring. So now, as you can see on the status bar, we have the color exactly as our primary colors, and you can see all the way for information and better information and everything. Okay. And if for some reason, if your status bar is not working, then what you gonna do is you can basically install the plug in again by this particular common on install the NBN packages. Well, okay. And then try to use this matter. All right? So that's it for this video. And I hope you were able to follow along on give so much for watching this video. 29. Customize App Icon and Splash Screen for Native Android, ios Platforms: Hello, everyone. So in this video, we will see how can you update the custom Aiken and this splash screen as well. Ok, so as you can see on the homepage, here is our application. Okay. And here is the current app icon that the I Nick provides. And if I open this, then you will see the our default splash screen. Let me start this once again. OK? So as you can see, this is the kind off especially scream that we get. It's completely weight. And we have this blue Lord er on this particular splash screen. OK, so we're going to remove the Lord as well from this better screen. So let's head over to the court base and see how can you operate the same? Okay, so if you basically go to the resources Okay, then you will see it profiles over here. The 1st 1 is the I can not be anti and second is this splash dark BNG. Okay, now these are the files that are being used as an iPhone and this splash respectively. Now, the important thing toe Not about this, I can and the special is the resolution. Okay. If you want to make it work properly for the I cannot Pain z, I would recommend you to keep the resolution as 10 to 4 by 10 to 4 and it has to be PNG. Okay? It cannot be j peg or something else. It has to be PNG. Okay, that was You will get some matters, so make sure you're I can and display sharp PNG files specifically. And the dissolution are correct. Okay? And even if you have a look at the current resolution off this default taken, so let me show you. So, as you can see, here is the icon. And here is this splash. So let me simply right click on this. And if I go to the details then as you can see, current dimension off the icon is 104104 And if we have a look at their dimension off this pleasure screen, it is 273 toe by toe, seven trade. Oh, okay. So make sure you keep the same resolution. Okay? So keeping the same resolution and the extension I have created my own I can and this splash. Okay, so I have temporarily placed it here in the extra folder. Okay, so let me show you. So here is the icon, not PNG. And here is this splash. Start PNG. Okay. And let me show you the resolution. So if I right click on this, then you will see that it is 10 before by 10 For for the icon on For this splash, it is 273 October 2732 OK, on both are a PNG files. OK, so although remove this existing felt, I'm going to remove them one by one. All right, on, remove this as well. Okay. And I'll basically corporate is on going to pastry over here in the resources folder. Right on. Going to remove this extra for that. All right, So now, once you have your own, I can in this splash, then you have good under command using I nickeled also, let me just show you. So simply on this common nick caldo a resource is okay. But I think first of all, we need to install this packet which is called over hyphen dress. So, like mrs install it on, then we will run this producer Cameron. Okay, so this is the sources Command is going to basically create the various screen sizes against in this place for people to show you If you go to the good based on, then if you go toe this android folder, then go to the agony the next urgency here as the default various screen size Aikens that is created by default. Now we need to replace all of this with our own icon. Right? So for that, we need to run this by Nick court over resources. Come on. Okay. And same goes for the splash as well. All right, so in the unit to basically replace all of this with your custom splash. Okay, so hands we basically needed So I just wait for it to complete on. Then we will run this particular command. So as you can see, it is done now organized around this. Come on, my neck. Cordova Resource is all right on it will basically gender it all those found that I just showed you. Okay, so let's go to the court ways and see what happens. So, as you can see, all of these files are overridden. Okay? So if I open this splash, then As you can see now I have my own custom Splash for various expenses is on. Same for the Eigen is Well, alright, a little. It was different. Okay, Okay. So now that we have configured the I can end this splash properly When it told you one more thing which is toe remove the order from this splash screen. So for that you have to basically go to the conflict or taxable on at and T Over here gold is show special screen spinner and secretary falls. So this is just a preference and tree in sort of the conflict dot xml Okay, so just simply say this on now let's head over the determinant on deploy application. So here, and simply clear the terminal and gonna say Ionic Cordova and right. Okay on. I think we should have the new I can in this splash. Okay, so I get back to you as Souness. It has done the plane. Okay, So as agency now we have our customs Precious screen as well is the icon. So let me close the app again. And as you can see now the ICANN is replaced with our own Aiken on If I open this app then as against here is the customer special screen. And we don't even have the Lord on this pleasure screen. OK? So because it was quite simple eso that's it for having your own custom, Aiken and this pleasure screen. And every time you change the icon in this special screen, make sure to run the command. I unequalled over resources. Okay, So every time you change this, I conduct PND in this place nor pansy. Make sure you're on that particular resources. Come on. OK, so that's it for this video on. I hope you were able to follow along on. Thank you so much for watching this video. 30. Running App Inside Emulator: Hello, everyone on in this video we will see how to deploy the application on the emulator. So it's quite the same. Actually, all you have to run is run this. Come on, Nick Cordova around Android. And it is seem, as the previous one that we used to install it on the android device. So their differences there if the device is found using the USB connection as well as if the USB debugging is turned on on the device and it is going to deploy it on the device, OK, and if they d was is not connected, then it will, by default, deployed on the emulator. Okay, so you don't have to do any sort of specific configuration, Okay? So if you're in the windows and if you need to successfully deployed to the end order military, you need to do minor configuration, which I'm going to show you in a bit. But there is. What will happen is your emulator is not going to open up after running this command. Okay, so this is just my experience. So if you basically go over here in the start menu inserts for I don't mean those feature on or off. Okay, on. Make sure that this hyper V is unchecked. Okay, Andi, once you on check it. Make sure used to the start your system okay on, then are in this particular command. Okay? Otherwise, if you have that particular option check, then it is not going to fight up the emulator automatically. Okay, so let me, uh, enter this. Now on. I'll get back to you as soon as it is done. So as you can see, our military started. Okay? And I think you might have to click on this power button. Okay. Are so say this screen. Okay, so let me close this thing on. Let me dismiss this as well. So, as you can see, I think our application is running perfectly fine over here. Let me one start the up once again so that we can see the splash screen as well. Okay, So as you can see, here is a replication perfectly conscious. Okay, so here is our special screen on here. Is the habit self. Okay, so that's it for this radio on. I hope you were able to follow along on. Thank you so much for watching this video 31. Build APK in Production, Release Mode and Sign APK with Keystore: Hello, everyone on in this video, we're going tobe a lot a picky in the production and release more. And after that, we're going to sign that, particularly PK with a key. OK, so there isn't that you have to sign your epic it with a key is that if you want to publish it on the play store, then you have to have ah signed a pick and not the unsightly begin. Okay, so let's first of all, Bill, they begin the production and release more. Then we will sign it. Okay, so, biliary, begin the production and release more than this. Come on, Nick Cordova Bear and right. Hi, friend. IPhone broad hyphen in front release. Okay, so make sure your possible it off this flag, which is hyphen, infant prod and hyphen and fund release. Okay. And simply hit. Enter, and I'll get back to you as soon as it is done. So, as you can see, the barely successful on we have this epic over here. So let's more to this particular folder. So I'll go to the plate forms and right half buried output. A big gate on the release. Okay, So as you can see Here is the apple is unsigned epic. Okay, now, to sign this, particularly PKV Tiki Venuto first will have Dickie. Right? So if you basically wizard the Annan cream of dogs on goto the play store documentation, which is somewhere over here, let me just show you. Here it is. Okay. 100 play store. The Nez agency we have already than this command. Okay, 545. 11 dailies next to help us NDP case off. So for their unit toe on this particular command. So, like missing like copies on the street over here in their terminal. Okay, on here you can basically teens Delia's name. I'll just keep it as it is. Okay? On you can update the keystone emits Well, so I'll call it as unique. I find news right on simply hit, enter and I'll enter the password. And I will ask you some bunch of questions. Simply enter the details, OK. Asking for the city on the contrary tales and simply say yes. Okay. Then it asked for the key password for the alias name. Simply hit enter to keep the same. Okay, hesitancy. Now we have this I nick hyphen news darkie store. Okay, now you can basically signed this A PK with this particular case store. Okay, so let's go to the browser. And as you can see, here is the arsenal command that you need to sign the epic Vidic east. Okay, So simply copy this on Bay Street over here in their terminal on If you have changed the his name in the previous command than a Bridget over here. Okay? No, I loved it. The big A name that I want to sign, So I'll call it as a python released on Sunday. Pick a on then. I loved it. Dickie store as well. We just I nick hyphen news, okay? And simply hit. Enter on. Enter the password. A nez agency. It is signing the PK. Okay, on if I basically see this again, then, As you can see, we have this epic assign. Okay, So although it stays and send over here because the chart center common doesn't object the name of the game. But just to let you know that this is a scientific A Okay, No, the last thing that is the meaning is toe basically optimize and compress the a p. K So for that unit Obviously use this tool called a Zeppelin. Okay. On toe properly. Make these airplane work. Make sure you have the part in the environment Variable upto the building tools and diversion. Okay. On simply copy this particular command on the street on their terminal. Okay. On going to provide the big there that want to compress. We just have high fund release. Uncertainty begins, which is actually signed on. As far as the name of the pig is concerned, you can name it whatever you want. You can continue the name like that as well, but there's often oral simply Keeper does. Nick iPhone news 01 door dbk. OK, And finally hit. Enter and it is going to do some sort off compression. And the optimization on the final A picket that is undeterred can be published on the play store. Okay, so let me to show you. Okay, so it says verification successful on If you see over here, then we have this. I need high for new 01 dirty begin. Now this a bigger you can publish it on the play store. Okay. Now, after publishing on the play store unit to take care of the two things. The 1st 1 is the key store. Okay, So make sure you don't lose it. Because once you publish and epic A with a particular key, then for all the next updates unit to sign, does it give it the same key? Okay, you cannot generate the new key. And Sandy, begin publish. Okay. So make sure you start this key somewhere in the safe place. If you publish your epic toe the play store on every time you publish a new update, you need to update diversion in the conflict or XML. So like me to show you so in the conflict or XML file. As you can see here is diversion entry on unit two. Inclement it every time you published a new worship. So before building your epic update diversion, then run the I Nicole toe ability. Command Okay on. It should be higher than the previous version. Okay? And it can be any number, but it should be higher than the previous version. Okay, so these are there to things that you need to take care while publishing on the play store on. I think that's it for this video on. I hope you're able to follow along on. Thank you so much for watching this video 32. SOURCE CODE: it's.