Ionic 4 - Build PWA and Mobile Apps with Angular | Baljeet Singh | Skillshare

Ionic 4 - Build PWA and Mobile Apps with Angular

Baljeet Singh, Freelance Full Stack Developer, Instruct

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
58 Lessons (3h 42m)
    • 1. Introduction to Course

      1:34
    • 2. About Angular

      1:57
    • 3. About Ionic

      3:13
    • 4. Setup Development Environment

      1:22
    • 5. Introduction

      0:35
    • 6. Installing Angular CLI

      0:49
    • 7. Creating New Project

      4:03
    • 8. Adding Components

      4:31
    • 9. Angular Routing

      4:23
    • 10. Adding and Lazy Loading Components

      6:36
    • 11. Adding Services

      8:07
    • 12. @Input() and @Output Decorator

      5:15
    • 13. Introduction

      0:43
    • 14. Installing Ionic CLI

      0:54
    • 15. Creating New Project

      3:08
    • 16. Understanding the Structure of Ionic Project

      5:55
    • 17. Ionic Generator

      7:05
    • 18. Ionic Components Part 1

      7:16
    • 19. Ionic Components Part 2

      7:07
    • 20. Shared Components

      6:22
    • 21. Adding Tabs Inside the Sidemenu Template

      11:27
    • 22. Adding Sidemenu Inside the Tabs Template

      6:04
    • 23. Adding Sidemenu and Tabs Inside the Blank Template

      13:25
    • 24. Introduction

      0:28
    • 25. Creating New Project

      1:00
    • 26. Creating New Project

      1:02
    • 27. Generating New Pages and Updating Tabs Menu

      7:10
    • 28. Generating New Pages and Updating Tabs Menu

      5:58
    • 29. Adding UI For The Top News Page

      3:30
    • 30. Using Ionic Lab

      1:20
    • 31. Creating News Service and Fetching Top News

      8:58
    • 32. Using async Operator

      2:15
    • 33. Moves Pages to Pages directory Similar to Ionic 3

      1:50
    • 34. Creating Shared Components

      5:57
    • 35. Using HttpParamas to Pass the apiKey

      1:15
    • 36. Finalize Top News Page

      2:31
    • 37. Show Loading Spinner While Fetching Data

      5:48
    • 38. Adding Pull To Refresh Functionality

      2:55
    • 39. Headlines Page UI Horizontal Scrolling List

      3:51
    • 40. Getting Data Based on a Specific Category

      5:00
    • 41. Getting Category Data on the First Load

      2:26
    • 42. Using Skeleton Screens For Perceived Performance

      3:11
    • 43. Working on the Sources Page

      5:16
    • 44. Adding Search Pipe to Filter Between Different Sources

      5:19
    • 45. Adding Single Source Page and Back Button

      3:52
    • 46. Showing Selected Source Articles

      3:54
    • 47. Using Sliding Options to Add to Favorites

      1:45
    • 48. Using Ionic Storage

      6:07
    • 49. Adding Refresh Button To The Favorites

      1:46
    • 50. Showing Toast Message

      1:52
    • 51. Removing The Source From Favorites

      2:02
    • 52. Adding Settings Page

      3:11
    • 53. Introduction

      0:51
    • 54. Adding PWA Support and Building App For Production

      2:13
    • 55. Deploying PWA on Firbase Hosting

      2:01
    • 56. Installing PWA on The Mobile Device

      2:17
    • 57. Running Application Inside the Android Emulator

      1:07
    • 58. Course Roundup

      0:22

About This Class

We can use Angular to create powerful frontend web applications powered by TypeScript / JavaScript. What if we can use the Angular knowledge to build applications that can be published as progressive web apps, native mobile apps running on any iOS or Android device and electron desktop apps with the same codebase.

Ionic 4 allows you to do just that.  We can use your existing Angular, HTML, JS and CSS knowledge and build PWA, native mobile apps. This allows you to focus on the things you know and release your application on all possible devices (desktop and mobile) without having to learn different technologies to build apps for different platforms.

Ionic 4 is completely based on web components (Using Stencil).

This course takes you from zero to published app, taking a very practice-orientated route. We'll build a news app throughout this course, we'll see how we can use the Ionic component library, how to fetch and handle user input, how to store data and much more!

We will touch on various topics like Architecture, Components, Navigation, Tabs, Sidemenus, User Input, Native Device Features, Storage, Http, etc...

And since building apps is only part of the fun, you'll of course also learn how to run your apps either in the browser, on an emulator or on your own device!

What exactly are you going to learn then?

  • Angular Refresher

  • Ionic Fundamentals

  • How to set up your Ionic 4 projects

  • Using different Ionic 4 templates Blank, Tabs, and Sidemenus

  • The basics about Ionic 4 - How navigation works, how your project is structured and you use its rich component library

  • Ionic 4 project architecture

  • Creating a user interface with the Beautiful Ionic 4 Components

  • Show Modals, Alerts, Toasts and many more useful UI components

  • Test the app in the browser, on emulators and real devices

  • Using Ionic storage

  • Building PWA and deploy on Firebase Hosting

  • and much more ...

So Let's Get Started.

Transcripts

1. Introduction to Course: hello and welcome to my course on Iron IC four built progressive, perhaps and more. I left with Angela. My name is Bill de Sing and I am going to be your instructor in this course, I'm a figments full stack developer and I occasionally right block and create YouTube videos. And my personal website is body sing dot in you can follow me on pretty much every social network with the user name Mbuji Sing. So what are going to learning in the scores? We will start with angler for the mentors and then we will move on toe ironic fundamentals and how we can use ironic components to build the USA or user interface off replication. And then how we can create we don't wave with help off ironic and angular. We will also see how we can hold stubble pw a on the firebase hosting. And we will also talk about how we can build upon application for Android and I read at the same time and much more So what we will be building in this course we will be creating a news application that will work across all the different platforms. So here on the left. You can see this is ever PW way that will also work on our moral devices. And on the right, you can see how replication will look on the desktop browsers. So that will be a cross platform application that we're going to We're building. And here also, you can see that you re also looks were different on the different devices. But we're using the same court this year, So without further ado, let's get started. 2. About Angular: So let's talk about angler now angry. The JavaScript Front End Web application development framework it has with created and maintained by the team at Google. It is a different from angler Js. Angry is the first version off angular. So if you say angler von, then you're talking about languages and aversion after two or two plus for and fired or the girl version that is version six. We call each version after two angular, angrily used to build a powerful front and applications and angry helps with the rapid product development and coordination using Anglo C. L. A angry opinion Italy in the sense that and we have a standard way of doing everything and we'll come to the default routing, testing arrest. It'd be more do when you create a new project with the angler cli. It has that specify structure, and when you create new components, always, let's say services with the Anglo CLI, it has some specific structure that it follows. So it is opinionated. So what we will learn in this course about angular in the next section there is anger, fundamentals. We will start. We're looking at components how we can do it components and how we can use them. And then we will talk about services and then we will see routing. And then we will talk about lazy loading. More do so whenever we moved to a certain part off replication. Only then we will Lord, it's data and then we will talk about me with our template ing. And then we will talk about daughter binding in angular. We will also take a look a taxi to be more Dooling, angular toe, press the data from the back end. We'll also take a local forms more due to create forms in angular we we will also take a look at pipes. Directive solves the rivers and much more. 3. About Ionic: In this video, we will talk about ironic ionic or Ionic framework of the open source you a toolkit. It has been created and maintained by the Ionic team. Ironic, Ford is framework. A gnostic that meets you can use. I look forward, angular view, react or even plane your script. It has been built using Stansell. So stance Eliza Components compiler that you used to create Web components. So ironic is Eirik four especially is based on wear components. I only can be used for cross platform application development. We have to called once and then we can ship over application as a PdF. Anyway, they're too progressive a replication, and then we can shape over the application as a mobile application, either on the Android or IOS platform. And then we can use Cordoba or capacitor with it. And then we can ship the application a lotta stop application with help off electron. So what are some of the features off? Ironic, I think prices with the beautiful you, a components that we can use to create our application. You a ironic prices With that 12 column greed that we can use to lay out over application, we can use the same great to create of a replication Ionic provides us with the I Am Xia like that is very similar to angler cli and we can use it to create or generate components , pages, services, etcetera and I am it also prices. With the Ionic native, we can use Ionic native to access an 80 advice functionalities. I wanna go see Hello, I only Gougne's. These are the icons that we can use another application. And when we use irony cons, it shows Aiken specific to the platform. So if you open application in the android device that will show the material Aiken's and if if we open the application in the ovens device, then that we show the icons according to the I respectful I like also provides us with the team generator and then we can select some colors and then it will provide us with the CSS very was for that. And then we can go p this and paste it in their application and then the entire application color scheme will change accordingly. And it also provides us with a platform specific styles. We can you see assess variables with it as I said In the team generator. I think also prices with us started temperatures. We can start with blank or we can start of that. I have Stempler or Surfside menu temperate and some more, and it doesn't have to be used with the Iron Xia Lei or with the angular. We can directly use it from the Syrian and they mentioned in the last video, I think, is used for the cross platform application development and we can use gold over or capacity with it. 4. Setup Development Environment: in this video, we will take a look. Eight how we can set up our development environment before we start working on any application. So what are some of the requirements? First, we need to install north Yes, and then vineyard a browser. I will be using chrome. You can use any brother off your choice and then we need a terminal. And in this score, So I will be using hyper terminal. And for the core editor, I will be using witches to decode. You can use any core edited that you like and hopefully we need to a stall. Understood you or ex scored? I am saying it is optional because when we need to build a replication then and then only required it. So it is an order requirement during development. No, let's see, Where can we find some of these tools now to a stall Nordea? As you can head over to Nordea, start org and download either the LTs, which is long term sport version or the current version. In this course, I will be using the LTs version. When you download and install it, you can confirm it by going to York Mart line and then you can day north hyphen V and vengeance stole. Nor it will also install nor package managers, which is NPM. You can also check if reasons told or not. 5. Introduction: in this section, we will talk about some of the angler fundamentals that were required to get started with angular. So we will take a look at some of the angler features, like how we can install and use angler C l. A. And how we can create new project with Anglo C L. A. And how we can create and generate components and services. And we will also take a look at doubting. We will also take a look at directives, and we will take a look at how we can lazily load models and so much more, so let's get started. 6. Installing Angular CLI: In this video, we will take a look at how we can install Angler cli so we can head over to over terminal. And then we can use the North Package Manager to install Angler Seeley so we can type and PM and stole guys dish Global Board hyphen D for short that will install anger ciolek globally and then weaken type at angular Select Seeley. It might take some time depending upon the Internet speed no of treaties installed. We can confirm by typing Andy hyphen V. Now it will provide us this interface veritable show was the anguish CLI version and then some information about over system. So now we can go ahead and create our new angle project. 7. Creating New Project: In this video, we will take a look at how we can create a new angler project using the anglers, Eli. So let's open the terminal in the directory where we want to create a new project. And then we can use the angler see light to create a new project by typing Engy new and then the name of the project. I'm will do using angler fundamentals in my case. And then we can pass additional flags. For example, we can add dropping by default by using Dexter sloping. And I also want to Jane the styling off my application from CSS to S C SS by default. So when we press enter, then it will create a new project and then it will its toll dependencies and PM dependencies. And it might take some time depending upon the into their speed. Now, the product has been created to successfully, so we can change the directory toe over nearly created a project, and then we can open the project inside ever correlated. So I'm using with just really bored so I can run this command code Dort. And then it will open a product inside the We escort now when we first opened, other project were greeted with this director structure and hear this e to e directories for and when testing. And then I have we have no more use for the were all over dependencies has been installed and then we have source directory and inside a source directory. We have many files and the one that folder were most concerned about or where we will be spending most of our time, is the APP directory. Inside the APP directory. We have had more deal filing where we're learning all the models and then we also have routing more deal and by the Ford we have compact component and that component essences. We will take a look at all of these files in the coming videos and then we also have this angered or Jason file that contains the configuration for a regular project. And then we have a package or Jason file, and here we are, adding all the dependencies or production or development dependencies for our product not to see the application inside the browser. We can use integrated terminal inside of you use to do court and then here if you want, open it we can go to view and then terminal or we can best control and back Dick. Now, after that, we can run. Andy Self does dish opened. And in the short phone, weekend tape and GS de shoe. No, it will build the project can. Then it will open the project inside the brothers. No, this is how application will look when we open it for the first time. So let's go back to the editor now. And then we can close this terminal here, and then we can open Abdullah component tortillas. Fine. And here we can see, we have defined the state of property here. And if you go back to the browser, we can see this angle phenomena. This is coming from this title properly. So if we can get to let's say something else, maybe my project and then it save it and I go back to the browser, then you can see we have welcome to my product. Holy. So now from here, this all temperate is coming from. So if we go back to the editor and then we can open average component or the HTML So this is where we have defined all the template for this component. So here you can see welcome toe title. So this is how we wind through the properties and never application. 8. Adding Components: in this video, we will take a look at how we can add or create new components in angler product. So let's go back to the editor here. You can see we have opened our project sideways site. So let's see how we can create or generate new component. We can open our terminal here and vacantly con this plus sign to create a new terminal and then too great a new component. But we can do is begin type and Jean generate then component. Then I even put invade home components. I would say home and at the end I will put a distressed Ryan flag. So if a grenade it won't create these things component. But it will show what fires it will create if we run this command without drying. So if you want to test for the command that you're running will do so fast, you you can run it fit that, Dryden. And after you're sure a vote, all this fire said you want to create, then you can do it without trading. So now let's see. I don't want to create a speck file, and I also don't want to create s Yes, I want to use inland styles. So what we can do is we can use the same command. And after that, we can do the dish spectacle to false. That means it wanted red speck file or testing file. And I also want in line start. So now if it on this card again with dry around you can see it will create two files home component or html home component 30 years. And it will also add these component inside afterward. Mortal decorations. So now I'm sure that these thes l a fire said I want to create. So now I can run this command without playing. So now it will create toe this component. And now we can open this file explorer and see. So this is the component that it has created. Now it has also updated our ad model duties. All right, uh, here. So I can close a terminal, and I can close a sidebar and then to use this component, what we can do is we can actually remove all this boilerplate in third after component arrest, human, and then we can type this. Yep. Home No. I fear wondering from where the sap home is coming. So if you go here and then home and home door Cambone under tears. So this is a selective that we need to use to use this component. So now here you can see in that I can't site. We have homeworks also, I want to generate fund more component. So I will open the terminal again and then we can generate new component and g generate component a vote and I won't toe exclude spec file and I need inland style. And actually there is one more option we can use in length template. So it for you straight on here. Then you can see it will create only one foil and then it will update Abdullah model dirty . So Knoller's on this and then we can go here and see we have this about Lord component Ortiz. And here we have in lane template. And then we have in length styles and the other further fit created Homewood. Combine under tears. You can see we have this template. You are all here but in the about your component 30 years we have this template property here. All right, so this is enlightening plea. So now I can close this terminal, and let's growth aside. Were and to use this component, also we can do. Yep. A boat. All right. 9. Angular Routing: in this video we will talk about routing in Nagler project. So here, in our ejector, we can see in the after component or HTML beside the components said he hated We have this router outlet. So this is making use off this ab more dealed or TSA propping the model duties and in this routes airy. We have to define our roads. So first, let's remove these components that we have read it here. Now what we want is ven ve it on the home page We want toe open the home component and when we moved to about page or slash a boat and then we were do open the about component. So here what we can do is we can add a world but for actually we don't do tow bar slash So here in the component, we can see home comported. Now if you're using we used to decode then it will also import this camp owner You need this import part else you have to add manually and then we need to air this second for let's say about and component and we want to Lord of old component here Odate. Now, if I save it. Now. Here. This is the home pay so you can see home. Box him. Now if I goto slash a boat here, you can see about works. All right? No, What we can do is here in the airport component or HTML we can create and other or unknown ordered list. And then let's sell home. And for the 2nd 1 lefts had about and to link to the part we can use outer link. And here we can pass slash. So this is a homepage and for off the link slash a boat. And no, we have these two rulings, and when we click on about this goes to a vote page. And on this home, this goes to home about home, all right. We might need wear some styling hair. So left side it glass never and actually want toe add it in its own components. So let's create a new component n g generate component, and then never popular's a great the entire Feiss. So it will create this new nap component with all the fires. So I want to copy this an addict in the now component Jamil No, We can use this component in the after a component or estimates like EP Never. So if I save it output, will we see him? But now what we can do is so if we want to change something, we can directly change it here. And then here in the SCS who chain the styles. What we can do is we can use never close And here just a lie And we want to use list style day none. So if I save it, you can see we don't have these circles here anymore. And I also want to use display in line. And I also want reading, Toby, say five pixels. And for the colors they want background color and let's use Ah, um good. All right. You know, we can also add maybe religion here. Fight pixel. So know this looks better, I think. 10. Adding and Lazy Loading Components: in the CDO We will take a look at how we can lazily load components in Angola. Let's start by creating anymore do so we can open the terminal and then we can type Engy, generate org for short and more Do and I'm for short and I wont tow generator to this model and we can first run it with Brighton. All right, so it will create two fires, model dirty ears and specter ts I don't want to spec file for now, so I will do data spec equal to false. Now it will create only one file. So let's run this command without driving. And I also want to a routing here so we can pass routing flag actually run it with training again So it will create a new model to roost touting dot morning dirty s where we can add a routing for this model only. So let's run it without Dryden. No, we can close this and if you go back here and we see two rue sloping. So this is very similar to what we have in the air prodding north model tortillas and then we have this to ruse model. I also want to create or generate one or two components. So let's go back here and let's clear it. And then we can life and you generate component gurus slash todo list two rows list component and we don't need spec file And let's son drive in. All right, this seems OK, so let's run it. And I also want to create to rue item component. This is will be very similar. So locks on it and you cannot see it will air this component in the declaration Eri off to lose Morgan Now how we can load it. Let's close this and no, let's go back to app Routing door More deal 30 years And here if you say to lose and then component and todo component like to list component No, When we goto goes out, then it will open this studios lest component this is not what we require we want to lazily loaded. That means this tourist more deal will only be loader when we goto f sites slash studios. So let's say we don't need this for what we can do to Lady Loaded. We can add a new property called Lord Children and here we have toe give the part off over model. So we will see. Yep. Slash photos slash So do start more do then we have toe give the classroom with the hash, so that will be to lose more Do so if you're wondering from where this is coming and if you go back here and this is of one we're using here, Toto Smarter. All right. Now, the next step is we have to goto produce routing door model tortillas and here we can define the part. So this these are them more do specific routes. So here we can say this more do root bought and here we have can't last component, so this would be to do list component. So if you're wondering why this is blank we have already defined the part here so that this will go toe toe does so if we put anything here so that will be two does and then slash the spot or it so know what we can do is let's add one more many waiting here So that will be never, never component alleged email. So let's copy paste it and then we can do, uh to lose and that will be Dodo's. And if I save it so this will appear here. But what I want to show you is so if I your point developer council here, and I go to network death. So let's first refresh our that page so you can see this. All fires are loaded. So if I go to home and about these air already loaded So nothing it Genting here. So But when I click on the studios Okay, so we're getting our error. So let's see what the other is. We can't find more. Do ab slash through slash to lose start model. All right, let's see how we can fix the center. Herrick. You forget to ed source directory. So then this should work. So now if I click on Trudeau's now to roost list is working clear. What else we can do is we can rule source app, and then we can replace it with door slash, so that will be root directory. And then so does that's tourist morning. So, actually, I can refresh this page actually this and then to lose. But what I want to show is if I go here and I go to the network down here and let's refresh the page. So currently everything about the epistle order. And when we go to a boat, this just works. But see even a click on Trudeau's. Then it will download this new more dune or this new files and it vote lord when we first opened application. So this is what I mean by lazy loading, more dues and components in Angola. 11. Adding Services: in this video, we re talk about anger services and see how we can fetch the data from the beckoned. To create a new service, we can open up a terminal and then we can tie and g g and service full s, and then we can die. Service name. Let's see the best service end. Then we can pass, drive and flag so it will create Specht filed with the service also. So we don't need that. We can again type spectacle to false Elect. And I also want to wear the surgeries inside the new four low so we can clear services Celeste later or it. So Knoller's really without driving you. So it has created a new services directory here and then inside. Here we have this data or service tortillas. Now let's open it and let's created get data matter here so we can do get data. And here we want to use the http more deal to fetch the data. So first we need toe import a state tp more deal here in the after model file. So here we can see http. Life actually should be more do and then we can import it here and we have to type it manually. So at angular slash common slash sud be And then we can type the name here as TTP client Ma do. Right now let's save it. And then we can go back to the data service. And here in the constructor, we can use dependency injection here. So we have reused STP client, not from selenium from angler Common STP. All right, now here in the get data matter, we can fetch the data from the back. And so in this simple exercise, I I want to use this Jason placeholder door type pickle dot com. And here we can get a feed grass to be a and let's see, I want to use this photos so we can copy this urine. And here we can go, uh, done as did you be listed with this daughter? I should be. Don't get this Can be off type any for now. And here we can pass this Ural, and yeah, let's yesterday, doesn't it? So no, we can go back to our to do list component regular soap in this application again to relist component RTs. And here we can inject our service like slave it. I need a service. New TusSeries So we have two important here and head in the end, the only Newt we can use this matter. So this started a service start get data and then we can subscribe to it. Go 30. That was a little. And then this should be can be anybody able So we're using data here and then we can I put everything toe the council and see if anything is coming back. All right, so, no, let's open in developer council and let's go to the console, Deb. And now, if I go toe toe does all right, so we're getting your era. I think we just need to restart a server. So let's go back here. And then I can go toe the staff and there's the start of server. So if we go back to the browser again and let's click on photos and let's open developer Council, Okay? So we can see we're getting this. These items from the back and a p a. Maybe life story again. Maybe. Refresh it. All right, so we're getting these items, All right? No. Let's see how we can use these items. or show this item inside our template. So first, let's create an interface for the Trudeau's. I will go here and let's clear it and and G interface to lose. Slash. So do. Okay, so this feel creator the roof interface and hear what I want to use is I want to specify what type of data I'm getting back. So this will be used variety. And then this is off type bullion and I d again off type Boolean and title that is type string complete dirt. Sorry, complete turn off type bullying. I will show you in a second how this is helpful. So if it close it and I go back here, let's create a new property, Cruz and we can specify the type here so we can say this will be to do. And then we have to import this interface here to do off life, Eddie. So if you pass any data other than what we have specified here in the two to interface toe the truce property than that footwork so know what we can do is and here in here we can say this store to does occur to data, and then we can output. So the council, actually, that's that will just work so we can go toe over, told us list component of that Shamel. And here we can use on ordered list. So let's say you, Well, l I and here we can see and before I let go, do off to those which is a property that we have defined in the template. And here we can see title the wind that actually should be do your title and then we want to use see if it is completely alone or so we can say, Let's use I day And here I want to see todo dot um completed. If it is completar than we want to show, Let's addict completed. Otherwise we want to show north completar All right, actually, this should be completed. All right, So you face save it and no. Here in the studios, we can see you're getting older, too loose from the beckoned 12. @Input() and @Output Decorator: In this video, we will talk about input and output decorator in Anguilla. If we pass data from parent to child, no born, and then we make use off input, decorator. And if the child of modernity is sending the data back to the pennant computer, then we make use of the output decorate. Let's first see how we can use and put decorator. So what we can do is we can copy this and then we can paste it inside. Totals item. Let's get inside the paragraph also. And what? I know it will crash. So what I want to do is here inside to lose list. We can add hep to recite. Um and then we want to pass this story photo a world to ruin. Put currently, we don't have any input. Do. But we relied it in a second. Sorry, Kodo. So this issuing added Of course, we don't currently have input. Now if we go back Toto item component and here we can add and put property and we need to import from Angler Court. And this is a method a heavy kin type to do. This will be off type to do that, we have defined an interface. So if I save it and I go back here now, this headed feel, Kobe. So now if you go to our to do spay judge And then again, we can see all over item sells now to confirm it. We contain anything here in the to write on page and let's aired. Maybe hello. So you can see this is coming from to write on page. No date, no to demonstrate output. What we want to do is Van Weekly Cone any to do items? We want to send that toe back toe. Would pain been component? Which is does list component. So let's create or directly given here. So click, maybe send to do and we want to pass. Let's see event here. Actually, this does matter. So let's create which one was it Central sent to do and let's parse it went here. Now, First we need output property, so we will say output and we have to import it from anger court here. And then let's name this property selector to do this will be off type event emitter and any so no, we can add event emitter like this. All right, include, this is the wrong import. We have to import it from anger Court. Now this will work. All right, So, no, when we click on any to do what we want is we want to emit this event. So that will be this adult selector to do door to emit. And then we have to pass anything or any data that we want women. So that will be, uh, this door to do in my kiss, which is a cunt one. All right now we can go back to our to do's list to listen to this event, and then we can do selector to do Acre to own, selected to do. And then we have to pass event here and no, we have to create this method. I will copy this and then I can go back here and let's create this mattered. And let's remove this dollar sign here and let's out Put it to the council. So now let's open the developer council and let's click on any item. So yeah, so which is right and we click. It is out putting to the council. So first we're sending the data from the parent component to the child component using our input property or input decorator than we're never click on any item inside our child component. Then it is sending the data back to over pain component, and now we can do anything with this data. 13. Introduction: in this video we will take a look at how we can get started with our Nick. We will take a look at what are some of the features of I only can how we can use them. So we will start with installing and using ironic more lady interface. We will take a look at how we can create a new product using the Ionic cli we will take a look at. But what is a D Ford structure off the ironing project that we create using the Onyx Eli, We will make use off generator to create new page components, services, etcetera. We will also see how they're outing works in ironing and we will take a look at the Ford Irony components and how we can use them. 14. Installing Ionic CLI: in this video we will take a look at home bacon and stall iron Xia lie on our local machine so we can head over to over terminal and then first we need to make sure we have no Js installed or not. So we can take note hyphen v and note also in stools. Not back it menus with silicon type and PM hyphen B. Also, if you are seeing these version numbers, that means naughty successfully installed on your system. So let's clear the terminal now and then to install I only we can use NPM so and came and stole I fundy to install globally and then our nick. So we get on this card now to confirm the insulation, we can type irony hyphen V So if you're seeing this screen, that means I am Nikki successfully installed on your system. 15. Creating New Project: In this video, we will take a look at how we can create a new ironing project. We can start with opening the terminal in the directory off choice where we want to create an project and then we can start by typing are NEEK start and then the name of the application. And I want to use ironic fundamentals for this example. And after that we can pass our template. So we have three choices blank Debs and side menu. So if we had over toe Eirik framework dot com and then developers and then in solution, then we can scroll down and then see here toe use this. Come on to create a new ironic application and then we have three templates, so we have blank so we won't get anything. We have to wear everything manually. And then we have Dev's With that we will get deaths at the border on the screen so we can use this as a border played. And then we have example off the sides menu where we have their side menu for our template that we can use another example. But in our example, we will be using the tariffs template so we can run this command. So this will download and install our starter. And then it will install dependencies for us. So it will take. Sometimes I've lived back when it finishes. Now the project is greater successfully so we can change your directly to the newly created project. And then we can run, Go dote toe open our product inside the V Studio Co. Which is the editor. We're going to use it. So here you can see the application inside the V s code, and first we can do we can open a terminal by going toe terminal and then new terminal and then to run the application weaken type. Ironic. So now this will build our application for the first time, and then it will open it inside the browser. So this is how I was started with the taps. Template Looks like so in the bottom, we have Devon have to and have three. That all corresponds through specific pages in our application. No, we can open a developer console while light, clicking, and then, using inspect or weaken press after l. And then we will get that council on the right hand side. So we can go back to that one, and then we can click on this total device tour and here we can expand it. So we will keep this view most off the time. And on this window, we can select the device that we want to use and I have selector iPhone 67 or it. 16. Understanding the Structure of Ionic Project: in this video we ridicule okayed the structure off the only project with the taps template . So we can first close a terminal hair. And then if we take a look at inside the director structure, we have it to e file decisions, tour and fantastic. Then we have north more deals where all over dependencies later toe our project are installed and then we have source folder. So this is the folder way will be spending most off our time. And then we have getting your file where we add file for the get doing. No. Then we have angler dot Jason file where we have the configuration later to the angler product. Or we can say ironic product. We never case. Then we have ironical it configurations in this project, and then we have backing Locked or Jason and then packet door Jason, where we're specifying the dependencies that are required for over application. Then we have two years convict or Jason or ts linked Georgeson. So if you go to source fola here we have many different folders. So if we have a folder where we will be generating or adding our application specific code , so here we have a plotting model 40 years where we're specifying the routes for of replication in this application. Currently we have only one drought where were specifying that out for over tabs. And if we go toe taps, more do so. This is again importing to have space routing model. So if you open taps routing, model of ideas and this is very year adding the parts later to our tap. So we have part for taps and then we have added the Children part or the child parts for one have to, and they have crease specifically. But we have done is we're using the Lord Children were Norges in the component here. This is because we're lazy loading that tavon have to wonder three also know just one component. So if you want to create a new tab or operate this step, we will be Janie, get here. So let's say we want to create a therefore our to do so. What we can do is we can create another child out for that, or we can just opted it and then we can go toe Devon. So we have all this different, more deals and of replication so if we go toe tap on page or estimates that this is where they will be operating the STM in little toe over page or we can see the vital player. So this is a court that is showing there. I mean, this one. So we cannot predict there. Right? So if it changed, welcome toe. Ironic. So if we'd see update. So when I save it, you can see it is a stent Lee reflector here with welcome toe ironic and then update that we have just started. And for every page we have a model file where we will be adding the component required for that page. And then we have the page arrest em away. We will be adding over content. And then we have a CSS file very regarding our styles for about the speech. And then we have spec tortillas. This is for testing, and then we have Deb phone page 40 years. So this is very our angler specific component cord lips. So in every page, we will have this the same structure, so no, we can scroll down. So we have abdomen and tortillas. So this is ah, uplevel component. And then we have SS file where we will be adding our study guessers and then we have environments file here we can add the different environments soul. If you want to use different environment for development and production, you can success if I the settings here and then we have a team folder where we have very evil. Zor assesses. So here we contain the very evils, so they will be application specific. So if you change the primary color here and then in anywhere in your application, you are using the color primary. So this will change through the color that we will separate here. Then we have local styles. And then we have some players for testing and then made DS file. So these are all the fires that we have in our application. So if you worked with angry application before, you can see the four Circular very similar. So if I can open the only project side West side with the angle project Yeah, so like this. So let's close these files and then let's collapses. So on the right hand side, you can see we have our angler project. And then on the left side, we have ironic product. So you can see the force structure is very similar apart from couple of fires. So we have that I only config dot Jason here and then added their config. So I'm not sure about that. And then if we open the source folder and then source for on the angler site you can see the same structure. We have app, assets, environments. I only cares our team folders. So that is for the global teaming. This is not in the angler side, so yeah, there a couple of changes But the four district is very similar. So if you open air so appear so we have wrapping here on the angler sigh and then same on the iron. Excited, right? So these are the pages that we can add manual if if we can. And I think in the next radio we will see how we can use a generator toe Generate some new pages, So yeah, destructive is very similar 17. Ionic Generator: in this video, we will talk about the island generator so we will see how we can generate pages with Ionic generative. So let's open it our meal again. So this is you can see the project is running in the background so we can create a new terminal window and then we can use I only generate command. And then if you press enter, you can see the dignitaries asking What would you like to generate? So we have many options. We can donate a page component service, more deal class directory, guard by interface. And so, in this example of Yvonne to generate a page so we can use that. Now we have to add the name slash part of the page. So I haven't to generate a page inside the AARP directory so we can just add home if you want to donate a page like in other folders or you can also use, like, pages slash home. But I havent originated in the route so we can just add home and I can press enter no. So in the background, using the angular generator so you can see it using and degenerate command. So now you can see this has created a folder with the files more Deal page, Specked Bay, Joe tears and then the assesses file. And it has also updated epileptic model door tears so we can engineer a couple of more pages so I can use I degenerate Bage. Then I haven't regenerate about Paige. Next, I want within rate contact page, and the last page I want to do it is are so do bitch. All right, so now we can close the terminal here, and then we can go toe AARP routing Modeled or ds. All right, so here you can see it has automatically added the part for our application, but we don't need these parts. So we can actually come in this out because we will be adding the page inside off the taps . So we want to add it inside off devout model. So now we can save it, and then we can go toe our tabs, and then they have slow to modelo t is so in here, we can actually update it. So what we can do is so let's use, uh, I think, toe, but for the first deaf, So then we can go toe the floor, Children property. So here we want to add the true paid more Duke last name passed so we can start way to do so. This is because currently we're inside off that their speech. So we have to go one directory up, toe the true pidge and then inside off that we want to use this class name, so I can actually copy that. So here we can go toe do slash Do do daughter more deal. We don't have to add DOrtiz file and then we have to wear a class name after the hash. Right? So this is it. And after that, for the second part, I want to use about so I can change all these instances. And then here I can operate it to about page more. Do so for their efforts again. So this will be the glass name inside off. About more deal, daughter. Yes. So I can actually copy that and then based it here. So this is seem right. And for the last one, we can use apart contact and then we have to operate it here also. And here for there. Three. So this will we contact page more deal, right? And then for the do part, we want to reject toe the two DuPage so I will update it toe to do. And then again, Depp slash total here. Okay, So we can save it now and then we can go toe, Dave start pays, or the Shemer and then we have to operate these, Deb. But it's also so for the to have a constructive one, this should be to do. And then this course sport's true part. So if you go toe, they have set out more detailed or t s. So this is the part I'm talking about. Okay? And then for the i coun I want to use the home and for the list off all the available Aikens you can goto I only call start comb. So if I enter home here so this should be home. You can see I want to use this cycle also, you can scroll through the list and then see what I can you want to use. And if you click on any I can you can see you want to Yes, Justice name. Or you can just copy this text. So if you click on that this is automatically copied and then you can paste it. I already know what I guess I want to you so I can just enter it. So here I have at your home. So this is I can I want to use and then for the level I want to use to do and then for the time to I want to use about and I can I want to use is information circle And then the level I want to use for a boat is about with the capital a and then for the have three the u. N is contact, and I can I want to use his contacts and the level I want to use is contact with Capital C . Okay, so now I can save it. So now if we take a look at inside off browser, we can see we have that default route call to do page open, and then we have that about this is opening the about page, and then we have that contact, right? So currently, this empty. So let's air some content inside of two DuPage. So let's close the terminal here and then close all the other tabs and then we can go to Dodo and then to do page or estimate. Okay? And let's area h one tag so we can treat my And now if you take a look at inside of the problems that we can see the content my to do pitch. So this is how you conduce. I integrate command to generate pages and similarly, you can use this command to generate services, components, interfaces, etcetera. 18. Ionic Components Part 1: in this video we will take a look at how we can use some off the ironic you a component. So let's start by creating a list. So what we can do is inside off our to do page. As chairman, we can remove the header tag and then we can use I unless tag and so that will be I am list and here inside off our list, we can use I an item and inside off it, we can use I'll label. And for now we will use Lauren to that. Misstate will create two words. So if we save it and go back to the browser, you can see it is showing as a list. So know what we can do is we can create multiple I an item so that it becomes visible so that we can use here is we can use energy food. I objective directly angry Director. So here we can say item off list here we can put Harry All right, so efface. Save it and I go back to the browse. You can see multiple items here inside off ironic label we can use. Let's see Astrue tab and then we can. Let's say pass Lord, I'm here and we can put this inside the parachute off. And if we save it and go back to the browse, we can see the change here. All right? No. Let's see how we can add by just over our nic list. Ironic item. So what we can do is we can use I am bad component off Ionic. So that will be Iron badge. And then after that, we can you the property called slot and that will be either start or end so we can put start here. And after that we need to put any value here. So for now, let's said one here. So now if I save it and go back to the browser, you can see the badges here on the left hand side. So this is the start. So if you change this law toe end and I always save it can go back to the Broza. And here you can see the badges other time for now, let's keep them met the start and what we can do is we can show the index of item here. So, in angular, we can do let I equal to index. And here we can show the index bid in the binding. So if I you say I hear no index, he ever start from zero. But I want to start it from one. So I will say I plus one so know I can save it. And if I go back to the browsers now, you can see the index off over item here. All right. No, let's said I better the and also So we can copy this and based it for the slower we will use. And and inside off here, What we want is we want to show our Aiken. So if I save it and I go back to the broth, I can go toe beater docks off. Ironic. And here, if you scroll down, you can goto this irony counseling. And here we can use any of these icons in a moronic project. So what I want to use I want to use that cash Aikens like, and also search it. Really? That will be fresh. So I would be used his psych in here. And if I click here, then it will copy this card. So now if I go back to the editor. I can best this court and there is one more thing I want to do is we can also provide a color for the other badges so we can use color property. And here we can use dangerous. So if you're wondering from where these colors are coming from, if if you open variables toward a CSS file inside team and you can see we have primary colors can regular tertiary success and the one we're using is danger. So now I can close it. And if I save it and go back to the problem, you can see we have this trash I can inside off bad here so we can make use of it. Now let's see how we can add but unseen ever Ionic project. So here what we can do is we can use but in component and here we can pass any text. So let's see. So if I save it and go back to the browser, you can see a button here, right? The ionic button component has many properties, so let's say if we want to change the color, we can use color. So let's say danger and we also have a property cold fill. And here we can specify if he won't post show outline only we can also use one more properties. Solar, say shape and we can say physical to round. So now we face save it and go back to the gloves You can see in the bottom here. Similarly, we can use floating action buttons. So let's see, if you use I am fed, then we have to specify a vertical and wholly untrue position. So for the vertical, So we have no bottom start and position. So here we can say for the vertical. I want to show the iron favor, but on the all right. So I will say for the vertical this is top and for the horizontal position that can be stopped. And the one property we also need to use is slower, tickle, toe fixed. And here, inside, off unfair. We can use the property or component. I unfair Burton and inside off that we can use I and I can. So I can that will be shown in the Fab Britain and the name we can use aired. So now if I save it and go back to the browser Okay, so the button is showing. But my mistake, the whole region to pollution needs to be the end. So let's fix it. So let's change it here. That needs to be end. So now if I go back to the the button is showing on the top, right? 19. Ionic Components Part 2: Now let's talk about more Ionic components. So what we can do is we can comment out the score that we already have in the Ionic content , and we can use I any card component so we can use Iron God and then inside of this, we can use I am card content and then we can place ever countered here. So in iron Guard content, we can use I'm card data for now. Let's use Lottum, and then we can go here and then we can use the content. Polar say lot of 10. So that will create, actually carefully, Laura 10. So that will create 10 words. So now what we can do is we can repeat this iron card. So here, what we can do is we can do actually, we can copy this 74 from my a NATO so that we just work so no, I can base it here. Also we can use I am a mistake to show one image I have already downloaded and a 1,000,000 toe my asters folder here and service. And then we have this tomato jeopardy image. So we will use that one. And here we can use iron image. And for the source, we can use slash as sits slash the mean dot deputy. So no, If I save it and go back to the browser, you can see all these cards here a late. And now, if it close this developer council, you can see all this. Guard items are stacked top to bottom, but we can also make yourself ill. Ingrid to show different items on the difference. Creeds, Solar safe year on medium screens. Then we want to show for cards in a single room. Or, let's say, Fiona, more screen. We only want to show one card on a screen, so let's see how we can do it. Using Ion Ingrid I am the great is very similar to the bootstrap. Great. So if you have used for strap in the past, you will feel right at home. So let's comment this code for the ironic card. So what we can do is we can use I in good component, and after that we have to specify either through and inside little. We have different columns, so we have this dweller column. They are similar to the bootstrap. So we can do. I am cold. So here we can add anything. Let's see. I am called. So let's copy, paste it five or six times. And if I save it and I go back to the plaza here, you can see all the columns are taking the equal width inside off of a room so we can also change that. So let's see how we can make you soft size property. So here we can do so. If I do so let's select all these elements or we can add it all at the same time. So we can say size. They could do well, actually have to change it also again. So know what this will do is so all the elements will be stacked top to bottom. So if you go back to the browser so here you can see all the elements that now stack top to bottom. So now, instead, off adding all these calls memory, we can make yourself our nd for directive again. So let's copy this court and we can paste it here and we can get rid off all the other columns and also instead off uncalled. We can use over component so we can cope it and then we can paste it here and we don't need any four here we needed in the I'm gone. So if I save it, then go back to the browser. You can see all the columns are stacked top to bottom here. So also if he tobel advice, toolbar and close this developer council on the large screens. Also, the columns will be stacked up the bottom. So now let's say, if you want on the large devices we want to show for columns and on the medium debases, we want to show three columns and on the small device we want to show two columns and one column only Onda extra small devices. So let's see how we can do that. So with the size dropper TV also have auction to define size four. Let's say for last devices, and here we will say three. So that will make four column So 3333 dead will come toe 12. And so that will be for columns and for medium, we will say for so that will be foreign. 23 12 and so three columns. So for as seventh of that blue tablet and here we can see a six column layout, so that will be 66 12 columns and for extra small, weak and see develop a game. So now if I save it and here you can see for this is a large device so that days for columns, solar soap on a developer council again and let's go back at the end. So these are for column. So if I shrink the window so that will be three columns and that medium device the two columns that will be a small device and while column So that will be extra small device or our mobile so long, let's close it. So here you can see all the columns are expand near across the entire device fits so sometimes the vice were can be very large, so the girls will not look good. But But I agreed. We have one property call fixed, so if we add it, then, depending upon the device, size of the columns will take the fixed wit. So if we add fixed property toe over the line grade and we save it and go back to the browser here, you can see the large screen is taking this much weight and a free, open developer council here. And let's say for the medium device we have this, Martin. So you can say spaces on the left and right again for the ah, smaller devices, all right? 20. Shared Components: In this video, we will take a look at how we can create a component in iron IC and how we can share it between different pages off our application. So let's start by opening the terminal inside, devious scored. And first we need to create components more to where we will create other components. So let's start with the ironic generate more deal, and then we will name it components. And let's try it first, Dryden. Third wish Iwas What fires it will create so it will create two fires components stored, modeled or specter, ts and components start mortality is inside that components for it seems OK, so that's certainly without rare. So now here you can see ever components folder with components more dealing it. So now First we need to generate a component. So we will say Aneke generate, conforming And let's name it at level created inside off Components folder, Cyber Name it Menu and let's turn it with dried. And so it will create these four files and then update over composer start mortal dirty. So no other Senate without Dryden so that it will create the component so component is created. So now If we go to our components toward more deal dirty years, we can see it here in the declarations, Harry. So no, The next step is we can go toe app, Portmore do tortillas. And first we need to import over comm. Boehner's more deal here. And make sure to add the import statement here. No, we can save it. And now to use it inside of her out page First, we need to add the components. More deal here in the import statement off the page here. So it will say components, more deal here and now We can go two hours, ₹2 arrest, email and we can add the component here. So to add the component, we need to see the selector for the component. So if you go to Manu, come one under t s, we can see the selectors Ackman you so we can use this and we can go toe. So do pay to rest email and then ed many here. So if you save it, we can see the center here. So this is saying at menus Notre known elements. So what we need to do is we have to go to our Comm Boehner's model tortillas. And first we need to export a component so that we can use it in any baby like so here in exports. Ready, we can add menu component. So no if I save it. And here, let's save it again. Maybe so you can see that it is gone and here in the browser, you can see many works. This is coming from the man and component, so let's make our menu component more useful so we can open my newcomer Modern door html and then let's said they were here. So inside of day, we can it nine button, let's see Item one and lives basted three times. I don't want to three. So now we're seeing this era the similar error iron But it is not unknown elements. So the thing is, if you go toe Abdullah more Jill Dougherty years, so here you can see we are importing this iron ic more do. So I an ironic But I know Ryan, but it is coming from this morning, so we also need toe Add this in the imports area off over John Boehner, Smallville. So here. If we say Aneke model, and if we save it and go back to the browser. You can see our weapons are working fine here. All right. Now, the best way to show these menu items, I think is in the toolbar so we can add it in the top right off our tool world. So let's see how we can do that so we can go to our to do pays or dice TML. And then here, inside, off over Cold War component. We can add iron but its component. And here we can add at Manu and we can remove this one. And also, we need to specify this a lot here. So if you say it's Lorton, so this will show the buttons at the end of the toolbar. So here you can see the menu items are showing in never toolbar. Currently, we're adding the menu component in the to low pay only. So if here in the ₹2 we can see this menu and if you go to about page, we cannot see the menu and the same cases with contact. So let's see how we can air the same man. New owner one about Paige. So this is very easy we can go pretty scored. And then we can go to our Which one is that about? Paige. And then here we can paste it. And now we need to add this Converse more Delinda about model also. So here we can add components more do and make sure to import it. So no, If I save it, we can see the menu under tow. DuPage. And if you go to about page make, you'll see the same menu Soto, prove the point. Also, we can add one more many weight. So here in the menu component or text email, we can add one more item and save it. And now on over about page, we can see these four items and owner to do pays the same for items, all right. 21. Adding Tabs Inside the Sidemenu Template: in this video, we will take a look at how we can air tabs inside off iron excitement of template. To get started, we can create a new Ionic project with the side menu template so we can write our Nick start, then the name off the app. So in my case, I will use my yep, side menu. And then we have where the temperate name, which is side menu. No, this will create our project with the side menu template. And now it is starting the dependencies, so it will take some time. So I moved back. When it finishes no off, pretty installed. We can't change the directory toe over newly created at and then we can open the project inside off Our editor, in my case, I am using the visions to do court so we can write gold insiders as I am using the insiders build. And then we can add dot here. So this will open the project inside. Offiah scored. So here you can see we have the project open inside off es court. And now we can run this project So inside off our integrated terminal weekend, right? I unique. So So this feel build our product for the first time, and then it will open it inside off. So this is how the application with the side menu temper. It looks like so current Leave year on the dust off screen. So there's where we're seeing this menu on the site or the left side. So if I open the developer council so this were the size of window, and now we can see that hamburger menu. And when I click on that menu, so this very show them a new other overly. So this is how the side, many temperate looks like. And now let's see how we can air the taps inside off the side menu template. Now let's start with creating a new terminal so we can click their plus cycle, and then we can generate some new pages. So if you open source EP. So this is a directory where all the pages with regenerated so no, we can generate a type of speech unregenerate beach and then depths. No, this field generate the have speech for us, and then it will air the routing for it inside off air profiting model tortillas. So now we can inundate some more pages so we can create 14 Dev one, then 14 to have to and the last phone called Step Three. So these filled with three deaths that we will show in overtime speech. So now we can close over terminal, and then we can go toe AARP routing model tortillas. And here we can actually comment the have 1213 paths because we will be adding it inside off the taps model. So we can comment this out and then we can take this step spot, toe the talk here and now We can actually comment this one out because we want to make our taps a good part, so we can actually move these steps. And now we can actually save this Now, after that, we can go to the tax paid more deal. So if Figo toe Dave's modeled or two years and in here, we can add the part. So here we can heard Children, okay. And here we can create the new pot. But before that, we have to air the route part. So this will be taps because we have removed this de from here, so that means we can use this spot now. So this is tabs and then for the Children we can use. But so this will be Dev one. So that will correspond. Toe Deb slashed everyone. So in here we can again our Children. All right. And here we can add, but so that will be empty string. So this will we corresponding toe taps last step one. And now we can add Lord Children. So we want to lazy Lord over page so we can go one step of Oh, because we want to. Ed, I have one more Do fight here. So currently here in the depths model. So we will go one step up, and then we can add They're Vandort more deal. Actually, this will be they have one slash. So now here we can add the class name for whatever one more so we can actually open it, and then we can cope it, and then we can paste a glass name here, okay? And similarly, we can add the parts for have two and l three, so we can actually copy this, and we can again paste it. Okay, so no. Always start off. Devon, I will replace it with their to and then for the last one, this should be tapped. Three. Okay, so that looks fine. And then I have to edge apart in the root. So when I am in the root parts, so this will redirect to death, Celeste one and then I can add part match full. Okay, so now we open that they have speech. So this visit directors to have Celeste, everyone okay? And then it will open this step one page Mordor. And now what we can do is we can go toe space arrest Emma. And in here we don't need that. I am Header. And I'm content. We actually need to use iron tabs. So here we can actually use a slip it like an used iron tabs. So on the right, you can see I'm using a plug in gold iron ic, four snippets. So this is a V escort plug in. So if you use that, you can just use I depth. So this will create this boiler bread for us. So in for the death, I want to use Devon. All right, so this Devon got response to this Devon that part, and then for the I can. I am okay with this. And maybe let's edge maybe home a boat contact. Okay, so I'm actually changing these, But these are essentially have one have to and happy. So this is just a level that will show inside off the application. OK, so now we can have a look at the application inside off Broza. So here we can see that it live here on the home page. But we have specified our route part to redirect toe over tevonn. So I have removed this home page, and now you can see if I entered that. So this read Rex Essar. Absolutely. Step one. And here you can see we have to have one opened. Currently, the Devon page is empty. We will see it in a second. And then if I click on about on the top, you can see the Ural changed to tap to. And then we have to have to hear and then for the contact. This is step three. Okay, so now if we go toe have one page or is Jamil And here we continue to home and then we can add maybe catch one. This is home content. Okay? And now we can go toe tab, too. And here we can urge about for the title. And then I can attach one. This is about content, and then we have to have a three page or esteem. And so here we can urge contact. And here I can add. This is contact content. Okay, so now we can save it. I agree. I will save all. And now you can see so far that I've one we can see this is home content, and then we have about this is about content and then contact. And then if I decide seven No. Or if I open the developer council, you can see we're nor seeing the hamburger menu here. But if I go to the home page or actually, if I close this or you upon the home and then after Well, so you can see there is a hamburger menu, right? So we actually have to add it first. So if I go to, they beat this one so we don't have this man, you ready for it? But if I slide from left, right, so this shows the menu. So let's see how we can add the man knew or the hamburger many waken So what we can do is we can go to our dive on page rest email and above the title We can actually use the slip it gold I menu to show the hamburger menu We can use the Ionic menu a little slip it so we can use I menu and then Martin So this Phil use a slot, we will you start and then we don't want to add any menu i d So we can actually I really want to use a slower start so we can actually save it. And now we can see inside off Over time one, we can see this hamburger menu I come similarly, we have to add this I can on all the pages we want that hamburger many waken So let's see how we can do that So we can just copy this code And then we can pace to cheer And then here and now we can save all And now we can see currently we're in the top three and then we can see the hamburger menu Acre and if you go toe tap to then they have one We have this eye candy rose So this is how we can hear the deaths inside offside menu template 22. Adding Sidemenu Inside the Tabs Template: in this video, we will take a located. How we can add aside may new inside the depths template solar Start for creating a new project. With that have Stempler so we can type, I think start in the name of that. I will be using my ab their steps. And then we have to provide the They have template name. So that little tabs. And now we control center. Now this will go ahead and create a project directory. And then it will install The pregnancy is so It will take some time, so I will be very when it finishes. Now their product is greater successfully, so we can jail directory to the newly created project. So that is my Yep. Debs. And then we can open the project inside the V A score, which is my core editor. So I'm using the insider spirit off the V s code. So I will type cord insiders, then dark, so this will open the project inside off via scored. Now, on the left side, we can see the direct destructive, all of replication. And for the first time, we were on this applications or we will open termina and then we can type are unique. So now this will build our application for the first time, and then it will open it inside the browser. So this is how our application or the default applications with the tab templates looks like. So we have three tests, Stefan, and have two and type three. So we will see how we can add aside menu on the left her side off this application. So let's close the terminal window, and then we can go toe ep and then a component or Ischia bill. And here we have to add over on my new court So we can actually comment this. I love chocolate. And then I will use a snippet. I split. Been. Okay, so this will actually aired the cool for the menu. So we don't need the menu. I d here. And let's keep it overly. And then we will change the menu name to maybe my app And then for the content, we will see my man. New content goes here. Okay. And then similar toe. I loved chocolate. We have added it before the split pain. Okay, so now we can say that And for the reference I'm using ironic for snipers plugging. So if you go to the extensions and then if I scroll down and this is a blogging I'm using for rear scored, I like four sleepers by 53 So now we can see we're using that I unexplained pain dead or the components. So what this will do is for the man you to appear on the moral devices. We have to slide the many from left to right. But on the all the other devices that are greater than the more devices, for example, have led the stop and others, it was sure the menu in the split pain. So on the left side, we will see the menu and on the right side we will see our content. And now we can save the application. And here in the browser, we can see on the left side we have our menu. So we will add the menu items here and then on the right hand side, we have this have won t have to want to have three, which is over the main contract. So if I open the developer console, so here you can see currently, Manu doesn't appear so it face lied from left to right. You can see over my new appears as overly alright. But no for the Noah Lewis is we can add a hamburger menu at the top left for each and every page, so that for Boyle device when we click conduct hamburger menu. So this will show the many with overly the slide from left Red will also work, but we want to add a button for the hamburger menu. So what we can do is we have to go to eat in every page and then we have to air the links or the button in the header. So we will go to Tab on first and inside off Devon pays, or a seamer before the entitled tag or the component we can add. Iron Man knew. But Okay, so this is also slippers by ironic for sleepers plucking. So we want to show the menu and the start so that we will keep their to start and then we don't need many ready because we only have one man knew. So now we can save it. And now, currently we can see on the top left we have that hamburger menu. And if I click there, we will see over man new buffs as overly artifically contacto There is no hamburger menu and similarly on tech tree. So we have air the same cold on all these pages so we can cope with scored and then we can open. You have to pay for this German, and then we can paste it here. And similarly, we can open toe have three page or is Jima. And then we confessed it to you. All right, so now we can see we're on the tab three. And then the hamburger menu appears here and on the tab to the same effect. So this is how we can add the side. Manu inside off the depths template. 23. Adding Sidemenu and Tabs Inside the Blank Template: in this video, we will take a look at how we can air the side menu and tabs inside the irony blank template. To get started, we can create the new project with the ironic blank template. So weaken type Eirik start than the name off that I will use my Yep. Dash blank. And then the template name, which is blank. So no, I press center. So this will create our project and then it will install the dependencies for our project. So this will take some time. So I will be bread when it finishes. Now that our project is greater. So we contain the directory toe over newly theater project. And then we can open the product inside the core editor, which in my case, is via scored. And I'm using the inside this world of your school so we can open a product by typing cord insiders then dot So this will open artwork inside Offiah scored so we can first start by opening the new terminal window and then we can on the project by typing ionic serve. Now this will build our product for the first time, and then it will open it inside the browser. So this is how the only project with a blank template looks like. So if we open the developer console and then click on this total device toolbar window and maybe that's select pixel do Excel. Maybe so this is how it will look inside off picture toe, so nothing fancy here. So let's see how we can first ad deaths inside off the blank template. So let's open the new terminal window. So we will click this. Plus I come here and we have to create some pages so we will create one page for the tabs. I think generate page depths. So this will be the page responsible for showing the taps. And after that we will add some more pages 14 to have one. Then Step two and the last one, 43 So now we can close our eternal window and then we can go toe profiting model 40 years and in here we can see for our route part. We are rejecting to the home pitch and in return home page or post this home page more do. And then what we can do is we don't need that home. We actually want toe open steps. So we will actually a comment this court. All right? And then instead off tests, we want to keep it empty because we want to open the taps in never root page. And we don't need that. I have 12 and three routes inside off a probably model. We will be adding it inside off the taps model. So we can comment this out also. So now we can save it, actually. And then we can go toe over taps more do tortillas. And in here we can air the new parts. So first weeks, we'll start with the depths. So this will be the main base, less deaths haute. And then we can edge the Children here and in here we can air part. So this should be Children. I forgot the l and for the part you see, Dev one and then here we can see Children. And here we can specify particle to empty. So this part will correspond. Toe death slash Devon. And in here we can add lower Children because we want to. Leslie. Lord Devon, more do so here. We can specify the part toe over to have one more give so we can actually expand this. And currently we're inside of a taps model. So we have to go one step up so we can type door thought than slash. And here we can specify over Devon. And then we will go toe one dot more deal. And then after the hash, we have had the tab. One more deal. Class name. So we will copy that, and then we can paste it here. All right. And similarly, we can specify the parts for have two and type three, so we can actually copy the scored and in here instead of two in all. This place is for you have to specify do instead of one. And here three and start off one. So we have specified passed for over 512 and three. And for the last step, we have aired for a route part. We want to redirect to dev slash dev one and we want to match the exact part. So we will say part match. It could do full. All right, So this is what we have to add to overtax more. You'll notice file and now we can go toe over, have space rest email. And here we don't need that header to were And the content we actually have to specify. Hi, Debs. So this is snippets by I Nick Force limp, resplendent, so we can use that. So this electorally at all this boiler prayed require toe at this step. So here we have specified I'm there waas logical bottom. So the taps will show at the bottom of screen. And here we're specifying I enter Britain and any hair have it could have won. So this got response toe that part here. So similarly, on all these different inter buttons, we have to have two and 10 3 which specifies the Step two and step three. And after that we have this iron Aiken. We have specified the name for the Aiken, and then we have that level that will show for each death. So this is to have one have to and tech three. All right, so now we can say that. And now if you take a look at inside off the browser, we can see currently, we don't have one. And in here at the top, we can see to have one. And if you go toe to So we're sink tap toe at the top of the screen and then tap three. So currently, the continent them three soldiers air some content here. So inside off the editor weaken Goto, Devon pays or Osama. So here we can edge. This is Devon content. Okay, so we can actually copy that. Maybe that said have to content and then we have that I have three content. Okay, so here you can see we're on the top three. So we're getting this ill. This is elect have three content. So if you go toe to, we're getting that you want, and then they have one contract. So this is how we can air the tabs inside off the blank template. So now let's see how we can air aside many also So for the side, Manu lives first close all these steps and maybe let's minimize or claps older open directories. And now we can go toe source ep, and then we can go toe ab Cambone and orders Jiemin and in here instead off I am drugged. Rachael it We can actually comment this out. We can use iron split pain snippet bionic for sleeper splitting so we can actually but a set. So as we have only one menu so we don't need to add many way before that for the side, we will add Start here because we want to show it on the left off the screen. And then we have this overly And for the title, we can see maybe my EP and for the content, ABC may new content goes here. Okay. And similarly, we're adding this I end after outlet before I'll speak pain Deggans. So now if you take a look at inside off the brother, we can see the split pain is working for the menu. So as girl Flavier on the dust off screen, we're seeing that the spread pain on the left side vacancy ever menu And on the right side we can see of content so over types are still working the way it should So we can open a developer council here and now if you slide from left right, we can see our men. New overlay shows up right? So this is where we can add over many content. But if we are on the large screen so over men knew appears side West side on the left. Okay, But now, if you see we have to slide from left, right for the menu to appear, we can actually add that hamburgers menu, Awaken at the top, left or top right? Or anywhere in our application. So let's see how we can add the Hamburg Romania so that when we click on that hamburger menu, I can So this will open the many for us. So we have to add I can in eating every file off of replication Solar, start with Devon. So if we go ahead and before the iron title component, we can add on menu, but consider pit. So this is also provided by Ionic Ford sniper splitting. So we want to show the button at the start, and then we have that Iron Man you Burton component, so we don't need to pass them anyway here because he currently only have one menu. So this was just work. So we can say that. And now on the top left, we can see we have that hamburger Manu Aikens horrifically conduct so this will open the many for us. But if you happen to have 2.5 3 We don't currently have that I can hear. So let's add it there also. So we can compete exact court here. And then we can open up to pay for this team so we can paste it here. And similarly to have three. Pedro's Jimmer. Okay, and now we can see the hamburger. May new. I can appear some type two have three and Devon All right. So if we close that that I can want a beer and then the menu appears on the left side off the screen. And now let's try to add some many Aikens old menu list on the left side off over menu. So we will first goto air prodding more. You'll tortillas and let's uncommon this home. Page it out so we will keep it to the bottom so I will save it. So we have that home route also. And now let's close it So inside off of our app component, we can add a list so we can type I list. So the slipper destroyed by I only four snoop responding so we can press enter here and then here we can add maybe Debs, and then here we can at home. And then for each item, we can add that out link. So we will urge I love link. And for the part we will see steps here. We can actually move this and no, maybe. Let's copy that and maybe bested here for the second drought for the home. We will you slash your home. Okay, so now we can save it. So currently being on the path road. So if I click on home, we can see of, Ah, home page shows up. So if I click on taps, you can see our same Devon have two and type three interferes shows up. So this is how we can add the side menu and the taps inside off our unique four blank template. 24. Introduction: in this section, we will take a look at how we can create a news application using iron ink and all the concepts that we have learned so far. We will be using ionic deaths when you template for creating a replication, and we will be using news. Ap a dot org News E P A. To fetch all the different articles from different sources in other news application, so let's get started. 25. Creating New Project: let's start by creating a new project using the Iron Xia lie. So we will say ironic start and then the name of the project will be our nick news. And then we want to use steps when you and then we have can pass typical toe angler. And here we will say no, no, it will install the dependencies. Now the project is creative successfully so we can clear the terminal here and Jane directive over newly created project. And then we can open the project inside our core editor which in my case, is via school. So now we can open the interview to terminal hair and run the project for the first time. If you're seeing this screen, the brother, that means fear. Good to go. So we can also check with developer console and see how the output will look inside of a mobile device. 26. Creating New Project: solar. Start creating a new project, chicken Dave. I only start then, the name of that, which is ironic news in my case. And then we have to specify the tempter in which is Debs. And then we can actually specify type vehicle to angler. Now, this will go ahead and create a new project for us, and then it will install the dependencies. So I have a very quick and finishes. Now, our product is creator successfully, so we can change directory toe over newly created project. And then we can open the project inside our correctional, which is via scored in my case, by typing gold dot So now, to run the application, we can open the new terminal window and then weaken type are unique. Serve. Now, this will build the project for the first time, and then it will open the up inside off the browser. If you were seeing this screen off turning the command, then you're good to go 27. Generating New Pages and Updating Tabs Menu: Now let's start regenerating some of the pages required for our application so we can open new terminal window here and then we can generate pH four gulped news. So we will say, I think generate beach and top news so fast. We were done it with dried and fly, and it reassures what fires it will create. So it will create these files inside. The top news followed. That seems OK, so now we can on this without dryland. So if you go to over source f older, we can see dope use for the head. And now we need to donate one more folder so we can clear terminal here and then we can at headlines. The next phase I want to generate is sources where we want to show all the different sources. And I also want to create Favorites Page where we can save the sources. Two favorites or we can save the articles for eating later. And one pitch. I want to create its for the setting space where we can add app specific settings. So that will be it for no. So we can clear the terminal and then close it. What I want is. I want to show all these pages as a tap so we will go toe taps and then have so to model tortillas. And here we have toe add different parts so we don't need that home paid part. So we continue to let's say the 1st 1 is dog news and awkward. Can lcv top news and for the component Fever use Top news biz and similarly, for the next page, I want to use headlines so that will also be headlines and the component will be headline speech and the next one will be sources. So the trip will also resources component can be. So it's a speech and we also need to add favorites and settings, so I will go ahead and fix it. And here we can urge favorites, and that will be favorite speech. And then the last one is settings. So that will be settings Page. And for the route part, I want to redirect to the deaf speech. So that will be tell speech. I think I have pretended here also instead of home page, we have to add Sorry. Actually, that will be top news. I think I dab say sorry step will be top news. And the last thing we need to do is we have to go toe staffs model page. And here we have to import all these different pages that we want to use us steps. So we have to import, stop news more do had lines, more do sources, model favorites, more deal and the last twenties setting spade model. And we don't need home about contact for no waiting so we can remove this and we could also move it here. And I think if we go back to Dr More Deal, we can remove these pages from here also. So now they're save it and up datable have spatial html here. So first for first level, we want to use stop news and we will operate icons later. And for the steps, we will see dope news and probably name will also the top news. And for the 2nd 1 we can level it at length And here we will also opted it. I think I will remove it and left Skopje p estate a couple of times. Maybe so the 3rd 1 will be sources, so that will be sources. And then here we want to use favorites, so that will be changed to favorites. And the last one is four settings. So now if you save it, we can see all these steps here. So if I click on top new, this is the first page or for step. And if Italy can headlines, you can see the title change to her. Lengthen sources, favorites and settings. A lift. So to change the Aikens Weaken Goto Irony cones. And here we can search for different Aiken's. I have already decided, like solar separate like in slow for the top news. I want to use a flash shaken for the headlines. We can use Glow Vikan That will be Globe four sources. We can use list Box four favorites we can use Star and for the settings we can use the setting Seiken. So if I save it and go back to the browser again, we can see all these icons here. What? We're missing this favorite. So let's see. Actually, we have put start instead of start. So now let's save it. And now everything seems OK. So top news headlines, sources, favorites and settings 28. Generating New Pages and Updating Tabs Menu: No. Let's start regenerating some of the pages squired for of replication so we can create a new terminal window. And then we can run our Nick generate beach, and then the baby want to generate First is top news. So first we were on this commode with dry run so that it wish use a fire structure. It would rate when we run this Kumar. So now we can see when we're on this command, it will create a Ford called top News. And then they create all these files and then it will also update app touting model dirty is now. This seems OK so we can run this command without driver. So now if you take a look at the left side we have this stop news folder. Now we can create some more folders or generate more pages. So the other page we want to generate is headline speech. After that, we can do rate sources Bish next weekend in Ridge favorite speech and the last page we want to generate is setting spirit. Now we can close the terminal window and then we can go toe air crowding model dirty. Yes, and we don't need all these parts inside off up, routing model duty is so we will be adding it in steps rafting model or tab model 30 years . So we will comment this good so we can comment to salt and then we can save it. Now we can go toe steps out model 30 years, and in here we can add or updated the parts. So here we have Debs and then we can go toe Oh, top new. So we can actually operated top news. And here we have to update the modern name by going to top news model. And then we can copy this so we can pasted here. And after that, we want to update Highlights had lined sexually north highlights. So four headlights. We want to use this model so we can copy this had led Spade model, and then we can paste it here. And after that, we can aired sources. So for the sources, we can use sources paid model name or it so similar living image do more for favorites and settings so we can actually cope in this court and based it a couple of times. So this one should before favorites and then this will be favorite spade More do and the last one will be four settings And then this will be setting speed more do ok and for reject We want to redirect Oh dog news and similarly here we can write up new. So for the road part we will be opening the first air which is stopped use all right And now we can save it and then we can go toe space dressed gyma And here we have two aired these pages. So what we can do is for the first step we want toe Goto doc news So this is actually the part. So if you go through there's after Modelo Dia's so they see the part we're talking about here. So we have this top news and then for the level we can use dog news and then for the Aiken's we can go toe I only go on start, call And then here we can look for the icons that we want to use for different depths. I already know that I know is that I want to use So I would just operate the file for the top news. I want to keep the flash, Ike and then for deaf to hear I want to up the little headlines, and I can I want to use his globe and for the level we can add headlines. Okay. And for the tab three, I want to use sources and I can able to use his list box, and then we can updated sources. All right, so now we can actually copy this court and then pasted a couple of times four rubber favors and setting step. So here we can add favorites, and I can I want to use his star. And here I can add favorites. And the last one is settings. And I can I want to use is settings. And then the label is also settings. Okay, so now we can save it. And now, if you take a look at inside of our brother, we can see we have these five types, top news headlines, sources, favorites and settings. They're all working fine 29. Adding UI For The Top News Page: Let's start with operating the UFO to our top news page so we can go toe I only documentation and then let's see what we want to use here. I'm thinking off using I only God component with ironing grade the way we have used in the attic Fundamental section. So maybe less Copy this code for the ironing card and we can go toe top news face toward HTML and let's close other types. So let's name it top news and I want to use only card here. So before that, I want to use grid so we can see I in good and then I have to use I Andrew and then Iron called them. And inside of that I won't be used. I am God so we can got it and placed it here and for the image for the reference, we can use the image. I have just ended here in their steps so we can add this one so we can add Actually, you know me not jpg. So if I save it here, we can see the island card and they meet that we have just entered. Let's aired Andy for directive to show multiple cards for now, and I took more so similarly the way we have used in the past that will show multiple columns. So this is how current ladies looking. So no, let's make it more responsible. So first we can define the fall size with can be 12 and then let's specify size for large screens. So that will be three. So that will be four columns and then size empty, You hear? That will be three columns and count up to 12. And for as Sim, I want to show three columns. Oh, sorry, that Louis six So that we're two columns, It's and site excess 12. So that will be one called him. So now if you save it right here, you can see Can't leave a on the morale device. So we're seeing one. Call him here and if he Topol a device to over So this is going to be the small screen or tablet screens of we're seeing two columns. And if you go to medium screen than three columns and if you go toe large screens, then we're seeing the four columns. So currently, maybe you can see the columns are expanding here so we can also used a word fixed directive if we want. So maybe let's try that. If he had fixed here and then we see the foot, we can actually close this and then you can see for every screen we will have a fixed wit. 30. Using Ionic Lab: if you have worked with ironic in the past, you might remember there was a utility called Lab, which we can use to see how our apple look on multiple devices at the same time. But it is not included with Iron IC four by default, but we can install it. So if we open over integrity terminal first, weaken installed NPM package, which is NPM install at ionic slash lab. After that insert off, running ironic self we would run, I only lap. This is how the output with ironic laughs looks like. So currently we're seeing two platforms, IOS and Android, and here you can see they both have slightly different anyways. And you can also see we have different icons here. And if you click on this platforms, we also have that option for Windows that we can see here. And probably we will only be working with IOS and Android. Also, if I click on open for screen, we can see how the over I will look on the full screen 31. Creating News Service and Fetching Top News: currently, you can see we assuring the dummy dot I never application. And in this video we will take a look at how we can get the data from the back and rest a pia in our case, which is the news ap a door or the a p a. So to get started, we can head over to news a ph dot org and first we need to log in. I will create an account and then we need toe get and key. So if Italy conduct get a p a ki and we can see this key here, we can copy it or if you don't see than you can click or regenerate ap a key. Now here we can goto our environments file and then inside our environment or ts, we can create a variable gold ap a key and then we can pace to ski here. We also need one more very evil and we will name it a p a u l. And if you go back to our home in the news a p a. We can copy this Ural upto slash veto and we can paste it here. So this is over a peaky and over a peer. Ural. Now we can go ahead and create a data service so we can open a new terminal here to create a service, weaken, ties, ironing, generate and service. And then I want to create surveys inside the services folder. And then we want to put the name of our service. And then I want to use new subway so I can put news here and I can frustrate with Dragon. And now we can see way we will be getting to files new said Mr Specter, TIAs and new service. 30 years. I like you don't respect fire so we can pass another flag, which is their stash, actually. Spec a call to force. So I get on it here. You can see we will. We won't. We will only be getting that new service Tortillas fire. So now we could run it without dragon. And here in the services folder, we can see we have new service tortillas file so inside of the sexual X closer terminal And let's create toe constants at the top and one will be AP a key. And then we're going to use environment dot Actually don't want to import but order in vitamin so environment bought a p a ki and then the other constant I want to create is ap a u r which will be environment dot a p a. You are. And now we can create a new method inside our service to let say get data and we will pass a you on it to our data set data mattered. And then we will return a sooty people get matter. So first we need to import as to TP And before that, we have to import assertively more dual inside over after more deal tortillas files. So here we can go toe after model tortillas and we have to import a su tippy reliant. More do so you can see this is note automatically importing the path here so we can add import from angler common Studio P, and then we can add import here. Sgtp client more, dude. All right, so now the next step is we can go to our constructor here and then we can inject arrested tippy service. So that will be s to Tippi client so that I think this one from angler common as to tp and now the next step is we can do this Dort Scdp not get and then we can use temporarily dress here so we will start with of ah ap a u N and then slash We want to use the U. N that we will pass and at the end we want to use our a p a ki so that will be a picky equal toe over the peaky alike. So no, we can save it. Now let's go talk news based RTs And here we can add a very evil cold news. And for no, let's use type any and then here they never constructor. We can inject our new service, so we will say new service And then here we can add new service and we need to import it here. So, no, we can go to our Andy owning it, and then we can call our method. So this will be the start new service, not get data, and then we need to pass urine. So what, you're involved with that we can cope it from news a ph dot org So I want to use that top headlines in the U. S. So I don't want wear topping a settling. So I won't copycat agriculture business. So we will cope it up to here. And no, we can pay. Sit here and then we can subscribe to it. And let's said data here and let's out put it to the council. If everything works correctly, we should be seeing the articles out. Put it to the council. So here another browser, we can see we're on the top new space, and we can see this console output. And if we see way, we're getting different articles here. So you want to three, right? We're getting 20 articles here, so this is by default. Now, let's see how we can show these articles own over or in our template. So here, instead of console tort law, we can do these start news equal to data. So we're binding over news property, toe the data here, and then we can go toe our top news story as Jamelle Page. And actually, let's close the other ones that we don't require. And here we can change this nd four to let item off news dot articles. So this is a property which is holding all over the news articles. So we have to wear new start articles now, here in the browser, we can see we're getting this header. I cannot really property articles off and defined so to fix said we can use safe navigation operator. So if we aired caution mark after the news so that will prevent or fix this era, all right? No, we don't seem to see this error. And now let's add these properties. If he expand output here and we go to articles and we experience, let's say the 1st 1 we can see we have these different properties so we can show the title with the property title. And then we want to show the euro to image property so we can copy this and for the image we can buying the source property toe over item dot You're a to emit property and then we don't want to show the content here and for the car title we can use, items are tighter and here in the browser we can see the output with image and the title property 32. Using async Operator: in this video, we will take a look at how we can use a sink pipe in angular toe, automatically subscribe and unsubscribe from the observable. Here in the top news Badir T s we can see were subscribing to an observable. But but the typical situation is when we subscribed one of the people we need to unsubscribe from it toe save the memory and we typically do it inside off. Andy own destroy. So typically what we need to do is we can assign this state went toe a variable and then in the end, he owned destroy. We can unsubscribe from it. But we can do it very easily with the help off a sync operator in the angler which will automatically subscribe and unsubscribe from those of the devil. So to do this first, what we need to do it, we can assign ever a news property toe, just the statement. And we don't need to subscribe inside off our nd owning it here. And what we typically need to do is we can come here in over NT four and instead off news kosher MK articles. What we'll do is we would say news and Then we will add a sink pipe. And then we can use this Elvis operator or safe navigational prettier. And then here we canete articles. Also one change. We can make kids here we can see here Ah, binding toe over the world to image property in the source. Sometimes this your dream is is no or not available. So we can also add. And if here, so we can add fightem those you are too. So only if it is available then we will be showing them is so if I save it And here in the browser we can see the similar output. But now we don't need to unsubscribe from the river Lemen Woody, and it will automatically be done with the help off a sync operator. 33. Moves Pages to Pages directory Similar to Ionic 3: In this video we will take a look at how we can operate our project structure toe that off similar toe the Ionic three product. We can keep this structure, but I just want to show the concept here so we can copy ever pages and we don't want to copy this services fight. And no, we can got it. Our actually Let's create a new four first called pages and then we can move these biddy pages inside off the pages folder. All right, so now we have inside off over f old A pages Fuller with contains all our pages And then we have services Fulla. And similarly, when we create components folder, it will have the its own folder called Components. So now this might bake something so we can go toe at component or applauding. Good morning. 30 years. We don't need these parts so we can commented tote because they're already adding it inside off our steps, more do. And here we can add wedges slash Debs. Now we need to goto our top news pay and we need to fix this services spot so I can actually remove it, and then we can hurt the import again. And now, here in the browser, we can see the same output that we were seeing before. Also, I just noticed we have these three folders here about contact and home so we don't need them so we can remove them. 34. Creating Shared Components: In this video, we will take a look at how we can create a reusable component to show over news articles that we can also using never different pitches. So to start with, we can open up a terminal and let's scrape you terminal and then we can generate a model for components. So we will say actress our Nick generate more deal and then components, and then this will generate our components. More do so now what we can do is we can generate a component. So we will do an IQ generate component and I won't regenerate component inside off our components, Morgan Off Components folder and slash the component name will be articles. And now we can close the terminal. And if we go toe over components model dirty, Yes, we can see it in the declarations here and now. What we can do is we can move over court from I in good or all this I, Ingrid cord two over articles component or this team will pitch. And now it expecting us to Oh, it is expecting to use news and we're not passing it currently and also did not recognizing these components. So to fix it first, weaken goto components, more deal. And here we have to import Ionic model and that will fix these any competence issue. So here you can see that identity lines are gone. And now we're getting the underlying here for news. So first, what we need to do is the components that we want to expose to other more dues. We need to export them so we can add exports every so that will be exports, then first monies, articles component. And now we need to import components model in our AB model, Proteus files so we can open at modeler ts, and then we can import over components. More deal here and the next page were we want to import overconfidence. More deal is in our page here. We want to use this component. So let's say currently we want to use his component in our top news page so we can import it here first. So we will say components more do. And now we can use this component in our template, Blake, uh, hep articles. And now what we need to do is we have to pass this if you go to our articles component alleged German. We're expecting this, and we first have to pass it here so we can do news news. So if we see here, we have to say, can't buy into new sense. It is known property off air particles. So what we need to do is we have to specify it as an input so we can go toe a component dot ds. So let's hurt of, uh and put. And then we can add news here. I think that will fix it. So no, if we go toe over article speech and we can see this is fixed No. Here in the browser, we can see the same output that we were seeing before instead of fightem Ivan to use article here. So we contain it as article. So this won't affect anything. A never brother or application. So now let's create a new component so we can create an article component. So ironic. Generate complaint and I want to generate it inside of components and then article. All right, now here, under our Ionic column, we can copy this or cut this I'm card and then we can replace it with my an article. And then what we need is we want to pass as input. Article two over article input. So this article is coming from here, and this we will create. I input. So here in the article component or HTML, we can paste it here. So, no, we're seeing this that in the lane. So to fix it, we can add input, and then we have to read article here. No, we can save it. And this should go away, all right. And if you take a look at the output now, it will look similar again. 35. Using HttpParamas to Pass the apiKey: in this video, we will take a look at how we can set our a p a ki using the http prime service. So first we can go to our news nor service tortillas, and then we can create a new constant for over parameters. And here we can new up Sgtp. But I am subject. And then here we can set the perimeter set free like so we can set Ap key here. And then we can pass the constant here and know what we can do is we can remove this part and then we can pass summer perimeters using but ems. No, for take a look it in the browser. You can see we're getting this bear request other. This is due to we have added that and symbol at the end when we made our quest. So let's remove it in other top news bay. 30 years now we can remove this one and also for any request that we will make after that. And now if you take a look at the brother, we can see the same output again 36. Finalize Top News Page: in this video, we will finalize over Top News page. Basically, we want to operate our article component and after the image we can show that date published an article published so we can add I an item here and now we can use iron bacon and I can we want to use for date is calendar and let's aired slowly. Could you start so that it starts from the start and enough to their Weaken Era label with Diane label Ah, label. And in here we can use article dot publicist head, so if you save it, we can see the date. But it is noted, the desire former Solar's Fix it. We can use angular date pipe. Also, angry provides various formats and I want to use format medium. So if I save it and now this seems OK. Also, let's show the description of the article in the paragraph day so we can add article and the properties description and this is how it will look. And now, brother and additionally, at the bottom I want were the source off the article so we can heard I like them here, and I also want oh send to this so I can text central property or directive, and then here we can use I label. And for the level I will put it inside. I take and the level is article dot source property, and then we have a name, and here we can see the source off the article. And if we move down, then we can see the source off another tactical. All right, now this seems okay. And then next, we will move on to the other sections. 37. Show Loading Spinner While Fetching Data: in this section, we will take a look at how we could add a Lorik spinner in a replication by The contract is being loaded. So if we heard over toe the ionic frame of dogs and then we can click on AP reference and then we can scroll toe the lording section. And if we see on the right here, we can see this. Lord, explain it. We want to show this kind of subpoena while our content on the top news page is loaded. So if you scroll to the bottom here, so this is how we can use it. We can create a sink method and we can make use off this loading controller, a glass or object. So if you don't know about a sink and of eight, a sick of it makes it very easy to work with promises. So the thing here is, if you put a sink before the function and then here, let's say we have ever heard of it and then it will wait for while this statement is being executed and Onley, then the next statement, which is this one will be executor. So this makes it very easy to work with promises. So now let's see how we can add it in our application. In the example, we have just seen we can see there adding this loading controller inside off the component , but we want to add it inside of the service so that Vicari use it. So let's go toe over new service. Torti. Yes, and first we need to inject the loading controller and make sure to import this statement. No, let's create a matter a think and let's name it show lording and we will create a constant hair called lording. And now we can use of eight this start loading controller doors create mattered to create a world loading and then we can pass the different perimeters the one paramount driver into parses duration and next weaken Go here and return loading nor present. This will present the loading. So to use it, we can add it inside off over. Get data matter in the service. So we will do this store show lording. So now when we load of replication, this lording will be shown for two seconds. Currently, this is already loaded. So let's click or re fresh and here we can see this lording Spinelli showing, and then it goes away in two seconds. But what we really want is they don't want toe hide a spinner After two seconds, we want to hide a spinner. When the data from over get data Matador, let's say this estudio we get cold, it's loaded, so let's see how we can do that. So first, let's create a new property here called lording, and then we can go here and then tell you to distort lording. And here in their turn, we can air this start loading would present. And now we want to show the loading when we are calling this function. And then after that, we can use by appropriator here. So then here in the pipe operator, we can pass, as many are Xia supporters that would like So the one their time concerned with is the tape operator death. And then we can pass. Let's see value. This could be any perimeter, and then we have to, let's say, consular, claw the value. So if I actually closed, this actually commented and first, actually, we need to import that their operators so we can import it from our exodus operators. So import thrown our next year's flesh creators and so the method waas dep. And now if I comment this out and now I look in the browser we can see in another council were logging all these articles that were affecting from the a p a. So this appropriated happens on Lee after re fetch the data. So now we can use over loading property or that loading mattered inside off their tap operator so we can uncommon to scored. And here, inside of the tape operator, we can do this. Store clothing, don't dismiss. All right, And we will increase adoration toe only Check if this lording dismisses before five seconds . Now, when we call this function, get data first of a Lord expenditure would be shown and it was shown for five seconds. But as soon as figure that data, then the Lord expendable dismiss. And if we don't get the daytime five seconds, then that's been a real were dismissed in five seconds. So let's see. So here, let's refresh it. And they never spend it really showing. And it goes away really soon because if we get the data really fast, so that's right to the north showing for five seconds 38. Adding Pull To Refresh Functionality: Knoller's take a look at how we can airport to refresh in a replication. So if we had over toe dogs and we scroll down toe refresher component and here on the right , if we drag the most, we can see this spinner when we dread from talk to bottom. So we want to add dysfunctionality in a replication. We can make you soft dis directive or component and now let's see how we can do that. So we want to add it inside off our top news page. So after the content we can add, I am re fresher. And then here we have to wear iron refreshes content. And no, we can a couple of her tributes so slaughter is fixed and then we have to use i n the fresh event and then here weaken pass a method that we've got to call. Then we dr from top to bottom. So I will say own very fresh and here we have to fall stolen event and now we have to create dysfunction so we can go here and it's false even to here. So for now I will longer to the concert now here in the browser When I do pull to refresh, you can see we're getting this custom. We went here, but over spending lording infinitely. So we have to fix that also. So let's see how we can lower that data and we pulled to refresh. We actually want to use this'll property. Or let's say we can put it inside of limited. So we will say, Get data and we can call it from inside here. And when we do the fresh, we want to call this matter again, all right? And to close the spinner, we can make use offset time out method and here inside of that, let's say we want to close it after two seconds and then we can do event your target Don't complete mint. All right. And now, if you do put to refresh, we can see we're loading all over articles again. And then the spinner is closed after two seconds 39. Headlines Page UI Horizontal Scrolling List: No. Let's start by updating the your you off overhead lance page another application. So first we contain that title. Do headlines and in order, any content we can again make yourself I in grade and I andro and I am calling and I want to make use off. I'll chip here. So let's goto documentation here. We can scroll toe that chip component and then this is how it will look so we can copy this court and then paste it here. And if we go back to the browser, we can see ever default chip here. Now I want to show chips for videos categories. So what we can do is we can create a categories area here, categories and then we can put over categories that we want to show. So let's air some categories, all right. And now we want to show these categories inside of over chip component. So here we can use and before toe get a gary off categories and then instead off the fort, we can show category, all right. And now we can see all these categories listed here inside of over chips. I also want to add a margin right on every chip so that there is some victor between them. So let's heard a glass off, get to get here and then we can go toe the CSS here, and then we can add category E and then margin, Right, Identix. And now if we see here, we can see the real birth between each chip here. Now, this seems OK, but I want to show all these items in one line, and then we want toe origin to scroll between different items and then click on them. So you ve opened ironic favored dogs, and we scroll down to the slights component and on the right, we can see how this will look so we can scroll with this and we can make use off this component. So if we go here and we can actually copied this template and then we can go to our template here and inside off ironing goal, we can paste it here. And also we want to use chips in the slight fun and we can have actually remove these phones. We don't need pager and we don't need options so we can also close them. So now we can save it and in every browser weaken. See, we can scroll between all these different elements. All right, I also want to change the color off the Cipto primary so we can use the color property here and then make it frame, buddy. And now we can see we have the primary color and never chip beckoned. 40. Getting Data Based on a Specific Category: in this video, we will take a look at how we can load individual category data from the back end very quickly. Cone and the specific ironic chip item in the headlines. Solar To start, we're adding a click listener on our eye on chip item and we want to call a mattered. Let's see. Oh, get Getty, Getty, Data elect, and then we want to parsa category. All right, so this is a category were passing here and now we can copy this and it will create this matter inside off headlines based RTs And let's put it through the console for a second. So know when we click on any item here, we will get the tighter All right, But we weren't all these categories as lower case. So let's see how we can do that. So here and start off out putting category, we can add cool lower case your script Matic. And now, if it'll economic activity, you can see we're getting the lower case string here. No, the next step is we need to get the data from the back end. So first, let's specify ever property here and then we can use this method this ever service matter. So this door near with service. And we need to make sure we are importing this so we can import over service here and now, make sure to import the spot here and no weakened goal. I will get better. Get data venting. And here inside of that, we need to pass of your a string for the p A. If we had over to the news AP a daughter over website and click on documentation. Now we can click on everything and here we can see if we use this part. Everything than caution, Mark Que equaled a Bitcoin that it will show all the Bitcoin articles in our case. We want to lower the articles on whichever chip category We click so we can copy this spot and then we can paste it here and now we need to the place, but going with double captivity so we can actually not cut it, Koppett. And let's use separate strings there. Temple litters so we can use the syntax here to use our very evil. And now what we can do is we need to show these articles on over Templar so we can make use off air particles component. And here we have to pass news which will vehicle tow the news property that we have just defined. And now we also need to import it inside over headlights. More do. So. That will be components. More do. So if I save it. No. Now, if you open number, browser and we can see we're not loading any day town, the first Lord. And when we click on any item here All right, so we're getting an adult can really properly dismiss off undefined. And let's fix it first. So if you open new service, Lortie s and we can see this is giving us the other. So first, I think we need to check if we have this lording property, then only we want to dismiss it so we can check If, uh, this store, Claudie and then we want to dismiss it. I think this will fix setter. Now if you go back and click on any item. So here we can see all the idea later articles. And now if I click on world, I will get the world articles. Similarly effect Lee called entertainment. I will get entertainment related articles. All right, 41. Getting Category Data on the First Load: No, let's take a look at how wiggle Lord category data on the first Lord. This is very simple. So we can go to our and the ordinate lifecycle hook and then we can use the same. They're evil, which is news. And then we want toe call over service and weaken bus Any value here. So let's see Cubicle to India. All right, so now if I save it and go back to the browse, we can see when we've lowered for the first time, all the India related articles are ordered. We can also do it with fetching some index from over category Seri So actually want to Lord the world news so I can actually move it to the top and then we can use temporal little's here and instead of hard coding it India here so we can make you self our category city And then here I can pass the indexing so currently and passing the Jiro Index in So that will fetch world. Actually, we also have to maybe at to lower case Well, it so no if I save it And here in the browser we can see were know getting the world news. We can actually short on this score. So let's fix it. And I just want to reduce the score so we can get this one. We can create new method for get que take reviewed and let's see. And we want to pass category here so we can do this. Start get category data, and we can plus category here, here in the nd owning it. We can also make use off this so we can do this thought, get category data, and then we want to pass over, get to get a year. All right, so maybe if I save it. No. So here we're seeing the world news data again. 42. Using Skeleton Screens For Perceived Performance: In this video, we will take a look at how we can use skeleton screens or skeleton text in place of the loading indicator that we're using when were fetching data from the back. And so, if you take a look at the documentation and we go to a P reference and no weaken scroll down toe skeleton text and if you see on the right hand side, we want to show these screens and start off the loading so these select at the loading indicator. So let's see how we can do that. In other articles component. We can create new rule and call them inside off that we can use iron skeleton text, and it expects us to pass a property with and let's pause 35%. So it will take 35% of the screen. And no, we can create it four times. And let's add 70 year maybe 100 here, and it did here. So now if you take a look at in the browser, you can see it that all the loading screens will look something like that. Now what we want to do is we want to show multiple screens or multiple columns here. So what we can do is we can create a fake Carrie. So let's say fake articles and then we can create, uh, 20 member ready. All right. And here in the n column, we can make use off and the for loop that article off FIG articles hold it. And we also have to specify the size property. In that case, we want to show that well of column layout for all the screens. So now here. If we take a look at in the brother, the screens will look something like that. All right. And now we want to show these screens only if our news is not fetched so we can make use off. Andy, if you're prettier here, and then we can pass news and you think all right, so if they save it and I also want to get it off this loading screen So I will go to new service tortillas, and I can actually comment this out because we don't need it anymore. Now it's your choice. What do you prefer? So if you want to use scared and screws, you can go with it. Otherwise, you can make use off these loading screens. And now here. If you take a look at in the brother and very freshness for a moment, you will see the skeleton screens and then our news will Lord. It should also work with headlines space as you have seen, because we're making use off the same component Arctic asking Boehner for fetching articles . There also. 43. Working on the Sources Page: in this video, we will start working on the sources spade. So if we heard over toe news ap a dot org and then we click on the documentation, we can click on this sources link, and this is ah, Ural, that we need toe request to get all the sources from the news a p a. All right, So let's go play this chord. Actually, we just need the sources. Now we can open sources start page 30 years, and here we can inject over new service and in NGO Nate, what we can do is we can create new property sources, then weaken type, new service dot get data and then we need to pass sources also, let's have a property here, so we will say sources. All right? No, let's close other types and then open sources. Don't page Dort s Jimmy and we can copia were articles page gold here for a moment. So let's copy this. And in here we can paste it and we will also create this fake sources page or property. And we don't want a particle component here and for the sources by default, I want to keep the well columns and four size MD and Advil, which is Emily and LG. I want to keep six columns. All right, so here we will see sources and the property. We want to use his sources for now. Let's urge. Actually, I don't want article here. I want to use the name source. So here we can see sore start name and let's create this fake sources property. So we will say fake sources. It could do new Harry and then 20. All right. And let's use sources also here. And let's see, See what output is on our Rosa. So here we can see, we can see the skeleton screens and we're also getting this data. What? The screens are not going away. So let's see what the problem is. All right, we're still making use off this news property, and instead we have to change it to the sources. And now we can see all these different sources here. So if we close a terminal here, we can see we're adding it own, like, six columns as we're using the large screen here. All right, now, let's make use off analyst Inside off over column. So we will stay. Ayan list and then we want to add I in ah item and inside off here. What we can do is we can add iron label and instead of fire level, we can that I Oh, Saudi I am text And let's use a suit x for now. And also you want to wear it. I am bad here and which will be going to property get a goody goody get a goody. I also want one more I in text here and where we will buy endeavor the Scripture property. So we relayed paragraph and then here we will say so. Start description. And similarly, at the end, we want to show up Aiken. So here, just before the an item and day, we can add iron I can name liken off the name we want to use his air forward. You will see it in a second and Florida could win so that I convince you at the end here in the browser, we can see all over sources. This is how it will look and I can see the description is no showing fully. So we can use it with textract solar's fix it. So if he air textract property here in our iron label. So this will fix it. And also, I want to use the color light for other item. And now you can see this is how our sources list will look inside other browser. And if I closed this developer council and this is how it will look on the bigger devices, all right? 44. Adding Search Pipe to Filter Between Different Sources: in the studio. We will take a look at how we can filter between different sources based on the name. So we will create a search pipe and let's start opening the terminal here. And first, we would create a more dual forever pipes. So irony generate more do and then pipes. All right, so this will create a more do pipes. And now we want to generate a new pipe. So we will do Ionic generate pipe and the name of the by prevent regenerate days such all right, And I also I suppose, spectacle to fall, so I only want to generate their search by file. All right, so here you can see, we have this such pipe tortillas file and now first weaken goto over pipes. More deal. Oh, sorry. There, this one by this model 30 years and here we have to export over such pipe. And the next step is we can close it of meaning low, and we can go toe over at more deals or ts, and we have to import our pipes model similar to over components model. All right. And now what we can do is we can go toe overt sources more do also and we have to import the pipes model here also. So that pipes model is available. It never sources speech. So no, we can close it also. And no, the next step is we can create our search input both so we can make yourself I annex search bar. And if I save it and here in the browser, you can see we have this actually and this is how it works. And now let's bind this with the two were whining. So we will create and the model and the property Let's create. And we will use this term property toe feel to it with different items in our sources. So we can go toe over sources page or ts, and in here we can create a time property and let's use equal toe blank for no and know what we can do is actually let's remove this a think and just use this sources property. So what we can do is we can subscribe to over data source and so here we can subscribe so we can see sources and here we can see sources and so we want to bind to the property sources. And here's what We can do it instead, off all this, we can just use sources. And here let's first check if the source is defined so we can see sources and instead, off a think here we will just use sources. All right, No, to use this filter. Actually, we haven't added anything in the filter. So first, let's actually see how we will add it in the Templar. So here we will say search, which is the name of the filter. If we go here, we can see the name is search. And here we want to use a term. All right, so this is this toe. They're no less head or property Stover filter. So we will say, And let's change it to sources and let's take a second property toe. So now we will say if, uh, political do blank, and then we want to return sources. All right. And otherwise, what we want to do is we want to fill their sources, and we want to check here. Soar start name not. We will convert it to Lord kiss. All right. And we actually not contains. We will check if it includes Uh uh Dordt toe lower case, old age. No other. Save it. And here this seems OK. So here in our brother. Now, if we type anything solar, say you type English and it is filtering with the name property, so it will check in the name if the English word exists. So let's tape maybe, uh, dime. So No, it seems working, all right. 45. Adding Single Source Page and Back Button: in this video, we will take a look at how we can create a single source paid to show the articles from a single source. So we will start originating a new page. So let's create a new terminal and then we can tie fired me, generate bridge, everyone to generate it inside of the pages. And the name will be so speech. So now if you look inside our pages, we can see a new source page also, if you scroll down and we open air prodding more dealing tortillas, we can see it has editor apart forever. So spit. We can actually comment this out. We want to use apart from over deaf speech and in the staff's outer model. So what we can do is we can copy apart here and let's change it to sources slash Then I D. And we won't put Jane in the component to source speech. All right. And also, we want to operate our taps modelo t a speech. And here we have to import. So speak more. Do hold it. Now let's go toe over sources speech and ven weekly cone our by an item we want to goto over sore space so we can use at Treff here. That is ironic property. So here we want to goto Debs slash sources, then outlet, then slash and the source idly Solar's put maybe ABC for no. Now, here in the browser, we can see we're every click on any source item. We area director toe the source space Now here in the browser. Whenever we click on any source item, you can see we a re director toe over source speech. All right, now here we can also see we're already getting that right arrow icon. So I think we can remove like and that we have added. So let's remove this. I and I can We will comment this court And now here in the browser we can see only one I can now, here instead off ABC we want to send the society so we will say source i d. And now whenever we click on any source, we even see your society. All right. No Van Viet on the source paid. We conceive year nor getting the back button here. And whenever we click on any item, the same is the case. So let's see how we can add a backward only never, I think, for application. So we will go to our source page daughters to Yemen here and inside off over toolbar, we can add I am buttons and then we have to pass a slot and we want to show the button, which is a bad person at the start. And then here we can add iron back button component. This will do the trick. And now, whenever you click on any stores, you can see this little animation. And then when weekly cornerback putting it goes back all right. 46. Showing Selected Source Articles: in this video, we will take a look at how we can show the articles on the single source space that we select. So if we go to ever news ap a dot org and then we click on the documentation and then everything step and here we can see, we can search for anything in the news A p a. And if you scroll to the bottom here, we can see we have this sources, attribute or clerestory perimeter. So what we can do is if you copied this and then we open it inside the browser here and here, we can use other sources property. And here we have to pass a sore society separated by comma. So to find a society, we can click own sources. And then here this is idea that we can use. So let's scope it. So then I will paste it. All right. And now I see the articles from the ABC News only. All right. And if you want to show the articles from the multiple sources, we can add it by comma separated, and but I want to show the article from one source only, so I can keep it And now let's scope the spot and let's go toe over sore space tortillas file and here. First we need to inject a new service and make sure to import it here. And then we will endeavor news property, and then we will call the get matter here and then we will pay several. You are all here and let's say the property, Hear news and now in the source page, order html. We can a rebel articles component and article expects us to pass new. There's an input. So we really use all right, and the last thing we need to do is we have to import components model in that source Morning. So now we never browser whenever weekly Cone. Any time here, we can see the articles here, all right, but currently we're only getting articles from one source only, so let's see how we can get that data from the source. Whichever be click so it never source paid 30 years. We have to inject activated love service and make sure to import activated route from angler after and also let's aired I d property here and now we never nd owned it. We can do this start I d call to this start activated route dot Snapshot note, But I'm mad Don't get and then we have to pass over i d here and now this I d matches of ah , Debs and Rotor And this I d all right and know what we can do is we can use this idea here and start off ABC News so we can use tempered strings or temperate litters here and then to use this very evil We can do this start I d. All right? And now whenever we click on any source So let's say ABC News. So currently we're getting the ABC news articles and let's open yet it's Technica. And now we're getting here. Is technique articles all right? 47. Using Sliding Options to Add to Favorites: in this video, we will take a look at how we can air the specific source to the favorites so that we can access it from the favorite to step elite. Let's open Ionic Framework dogs. And if we go to the AP reference and let's scroll and when we click, one item sliding and here we can see when we slide from left or right, we can see these sliding options. All right, so we want to use that. Oh, never. Sources space toe, add item to the favorite. So what we can do is we can copy this scored so we can copy this one. And here in the sources start page or HTML, we can pay street there. And also we need to wrap I an item in tow line item sliding. All right. And we don't need their share button. So what we can do is and then start off item. We want to pass other sources, so let's create that matter first. So here in the sources start page or ts, we can clear this matter. And for now, let's output over source to the council. All right, And here in number Broza, whenever we drag from left to right. We can see this favorite sliding option. Alvin Weekly Conduct. We should see other source out Porter toe the council, and whenever we click on any other source, the same happens here for it. 48. Using Ionic Storage: In this video, we will take a look at how we can make use of ironic storage to save our sources to the favors. So if we go toe the Ionic framework Dogs and we click on building and then our next storage and here we can see how we can use ironic story. So first, let's start by installing the plug in. Let's start with opening the terminal here and let's paste the command that we have just copied. No authority. This told we can go ahead and install the I am extort package. Now we need to import Ionic storage more deal and never have model tortillas. So they're cited here and the name is Ionic started. More do, and here in never imports, we can tie fire Nick Story model 0.4 route now to use the storage. We can go to other sources or page or two years here, and we have to inject the storage service so we will say storage and make sure to imported from ironic storage now to use the story. What we can do is if we do this toward storage, don't get, and then we passed a key. So let's say, Favorite. And then this will get the data from the local storage. All right. And if you do this toward storage, not set and we will pass key and then value, then this will save the item in the local story. So know what we can do is first we want to use this key called favorite. And then it was done. The promise. So we can do then. Well, so first we can check if value nautical to know. Then what we want is we can create a new property, call items and then we will say item sickle to, yes, indoor parts then value. So this is a value that we get from favorite. If the favorite values already set no next weekend Do is items stored, push source and then we can set of a storage dot Set a favorite to first. We have to string If I ever put so well, do Jason note string. If I and then we will pass items. All right. And now if you go to over brother and then we use favorite and now we can check if it is that it will a favorite by going toe application Taff and here inside of my breast squeal and we can see our Nick a V. And here we can see our favorite KIIS said toe that value that ABC News. Really? All right. And now let's add one more value here. So actually there said this one. All right, so if we go here so currently, you can see the favorite value is we cannot see it here and now let's try adding it inside , off, over. Favourites Template Now to show the favorite items inside the template, Weaken Goto Favorite start page 40 years and first let's add a property called sources And then we can inject our story service, all right, And now we can go to over sources page and copy the scored and here instead off using items property here in the very evil. So we will use this dot sources and we don't want to push, and we don't want to set it here, and we can all sort with this values to the council so we can do this thought sources. So first, let's check if you're getting any data back. So if thickly gone the favorite step, we conceive, you're getting toe white inspect because we have added that toe items for favors yet no to show these sources in never template, we can go to sources page or HTML and then we can cope. It's template. And then inside over favorites page ORT as Gmail. We can paste it there and we don't need this thing so we can remove it and no here instead of sources, this seems OK. We don't want certain there and there's comedy it out for No. And now, if we take a look at in the browser, we can see these two items here. All right? No, let's try getting one more item to the favorite. So let's try this one and now perfectly confirm bits we can see this item is north showing here, but a fairly fresh the page. Then we should see this item, Alright? 49. Adding Refresh Button To The Favorites: in this video, we will take a look at how we can add very fresh Burton in the favorites template to refresh their favorites list. So let's start by going to favor speeches. Team in and inside the tool were we can add, I am buttons to this logical toe and and no, here we can add a in Britain and inside that we can hair dye and I can and I can. I want to use is three fresh and here we can air looked like a listener on the fresh All right and no, we can create this method here inside, over tempo, template es fight. And first, let's create a method for this get favorites and no weaken gold it from our nd on it. And then we will call it whenever we click on that refresh button. All right, so quickly you can see we have five items here and let's add one more item. Let's try searching for times off India. Maybe, oh, starters. Let's set anything The New York Times. So let's head to the favorites. And if you click here, we don't see it here, and difficulty could refresh button and then we concede to you. All right, 50. Showing Toast Message: in this video, we will take a look at how we can share a toast message when we aired any source to the favorites. So if we go to our nick Framework dogs and then we click on your components and then we can scroll down to toast and then we can click on a P A here on the right side. Whenever we click on any item, you can see how the toast will look. So let's see how we can hear that so we can make use off course controller, and then we can create an a sick method. And then we can use their similar to how we used overloading controller. So in this case, I will be coping this court, and now we can go toe over sources paged RTs file and inside off here we can create our method. All right, so first we need to inject toast controller on it. I know what we can do is after we said double favors value, we can call this method. And now let's try getting any source to the favorite. So let's try this one and then you can see at the border. We're getting this toast message. We actually for Goto update the message. Solar subject now had to favorite. Or so No. Whenever you click, gone any source item and add it to a favorite, then this item with this message will show. 51. Removing The Source From Favorites: in this video, we will take a look at how we can remove the sources from the favorites. So here, in the favorite start page, or that's Gmail, we can un comment the sliding court. And then, instead of favorite, we want to use unfavorably it, and let's stained up label toe unfair, Brit. All right, now we have to create this matter so we can copy this and then paste it here. All right? And now, first, we need to find the index off the source that we want to remove so we can use cause and debts, and this start sources. So this is a property that is already holding all over sources in the favorites so we can do index off, and then we need to pass us horse here, all right. And an extra pays. We can use place method, this store sources, not supplies. And we want to remove one item from the index. So they indexes item that we want to remove, and we won't remove one item at that index. All right? And the last step is we want to save the items to the favorites area again. So we will do this dot stories dot set And then for lucky. That is favorite. And we have to Jason dot string. If I and then we have to add this Dort sources, all right. And now let's try removing this excuse. So if I click on on favorite, you can see it is gone from here. And if I refresh the favorites, you can still see we're not getting the excuse back. 52. Adding Settings Page: in this video we're going to We're working on a setting spirit off over application. This is going to be a very simple pay. So let's get started. So let's open Setting Space George Demon. And then let's start with I in greed and and Roll Inside of their day Vonta and column and the default size for the corner of my eye. Levante's 12 and no, we can use iron card and then high in guard content. Inside of that, we can you sign card title to show the title of Overlap. So news up. And then we can use as true tale to show the description of that and know what winning raise. We want to create a button. And whenever Weekly called that Wharton, we want to clear all the favorites so we want to use full width. Wouldn't so we will use expand full and the color for the bottom will be danger and the textures clear favorites. All right, so this is how the button will look a never browser. So when we click on that Britain, we want to clear all the favorites so can't leave. You see, we have these favorites, so we want to remove all these favorites. Advance when we click here. So let's add a click event here and here. We, Willard own clear. Hey, voters, a late. And now let's create a method. Hold it. First, we need to inject the story service. So we will do private storage and then storage and make sure to important here. And then we will do this. Door stories start, uh, remove and then never favorite property. And similarly, we can show that most message here So we can go to our sources page and then copy this method and then based you too. And now we also need to inject toast controller and the last page They can call it from here. Commute. Ah, failures. So now here, When weekly complete favorites, you can see we're getting clear favorites. And then if you go to favorites, we can see there. There are no favorites here. 53. Introduction: in this section, we will take a look at how we can publish our Ionic application on different platforms. Ironic allows us to create or publish a progressive of application with the help off Agnos schematics, we will add the PW sport toe over application. And ironic also allows us to use the same court ways to create IOS application that we can probably shown the iris app store and similarly, we can create Andrew Replication and publish it on the Android place toe. We can also create a stand alone desktop application with help off our technology called electron, and we can publish other applications either with the help of cold over or a new technology called capacitor. 54. Adding PWA Support and Building App For Production: Now let's take a look at how we can publish our application as a progressive of application or PW way. So if we go toe ironic framework dogs and quickly con publishing and then if we click, couldn't progressive replication. And here you can follow these steps. And first we need to add anger schematics to over project so we can copy this Mont. And here in our project, we can open the terminal and then paste this Come on and this feel air. The people were support to our application with help off angry schematic. And after it finishes, we can see it has greeted a couple off new files. So one is that and GSW configured or Jason. So this is for the service worker config. And then we have in the sort directory and we have these new SSR Aiken's. And then in the manifesto Jason, we can update our application name, short name or the team color, or the Bag Lanka. And then here we can up there The Eiken four of rap Our notary folder is currently empty. So when we very lovely application for the production, this is a fuller which is going to repopulate with all the fires that were going to be pushing onto the Web server. All right, so let's build our application for the production. So we will run the command and you build their trash. Brought Now, here were getting the other property AP A key doesn't exist. Own production volumes. So, actually, what we need to do is we can go toe over and white misfiled, and then we can copy these a peaky and a p a u l. And then we can face them. Here, hold it. And now we can close it. And now we can run the command again. And now the commander and successfully. And then we have this www folder populated with all the files that we need to upload toe over their server to view of a replication. 55. Deploying PWA on Firbase Hosting: Now let's take a look at how we can deploy over application on the fire race hosting. So first we can start by creating a new project on the Fire Risk Council so we can go toe consoled or five days dot google dot com, and we can create new project. And let's name it Fire Nick News. And then it will also generate a new project. I did it and let's accept the terms and conditions. Sanders Quicken create new product. No, we can click on Continue. And here, if I click on hosting, we can see get starter And the These are the same steps that we're seeing on the unique crypts state. So we can first install the fire vest rules. So I have already installed that and we can press continue. And now we have around the smarts. 1st 5 this log in and fire, isn't it? And fired his deploy Solar. To start with five is Logan, and it is saying I'm already logging, So I am going to run five s and net and it will ask us a series of questions. And here I want to use hosting. And here it is asking us to show the project. And the public directory for this project will weigh Www. And here's we can select. Yes, here and here. We don't want to overwrite index regime in. And now the last two days, we need to write fire service, deploy, and then it will push our application. Do the five a server now, after it finishes uploading reveal you provided with this hosting your oral. And after our project finishes uploading were greeted with this hosting Ural, we can see the same application running inside off browser. 56. Installing PWA on The Mobile Device: in this video, we will take a look at how we can and stole a POW A or progressive web that we have just created on our moral device. So before that, I have made a couple of changes in the project. In the manifest your Jason file. I have changed the name of the product here. Do News nation. And also I have updated the icons. So I helped her old icons with this logo. All right. And as we are specifying the links to our locals here so they will automatically reflect when we install in ever more device. And then I have pushed the site up. There's on the fire is hosting with firebase deploy. All right. Also, I have added a sub domain on our project. So now it lives So news doorbell leasing dot in and you can take a look at the fire vis documentation Toho You can add the sub main or custom domain to your firebase hose to project No, this is my real voice that you are seeing. Now let's see how we can install our PW way. So if you open up a browser in my case, I'm using chrome So here we can type news dot policing Gordon. And here you can see we're seeing a replication that we had deployed. And in the bottom you can see we're already getting Ad news Nation to home screen. We can either click on this icon or we can click on this icon and then add to home screen. All right, now, let's use this one ad news nation toe home stream, and then you will get this screen. And if you click on it, no, this will add or install over application on this device. And now here we can see the progress and currently, I'm getting added to home screen, All right. And then if I search for this application or I can see this application in my new or updated applications and effectively, Candice and we can see of a replication again with no top your Elber. So this is a repeat of college 57. Running Application Inside the Android Emulator: in this video we will take a look at how we can run our project inside the android emulator . So I have already started. I'm willing to hear on my system. And now first we need to add platform for our environment. So I will do I Aneke Cordova bled phone at Android of this will add enter platform to over ironic project and which will allow us to run it on every monitor. No, it finished adding the platform to our project so we can clear the terminal now. And as over, the military's ordered is running so we can type ironic cold over droit and then it will run of replication inside of imitators. Now, here we can see the application opened inside off our emulator. And then we can navigate between the application. The same baby are using your tone over the device 58. Course Roundup: So this is the end. I hope you have enjoyed this course. And now you know how we can use Ionic four tobel progressive of applications. And while applications with one core base I wish you luck for the future. I also encourage you to ask oceans and help others in the Q and A section signing off and thank you.