Wordpress Rest API and Ionic 4 (Angular) App With Auth | Baljeet Singh | Skillshare

Wordpress Rest API and Ionic 4 (Angular) App With Auth

Baljeet Singh, Freelance Full Stack Developer, Instruct

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
24 Lessons (2h 7m)
    • 1. Introduction to Course

      2:22
    • 2. About Wordpress Rest API

      2:09
    • 3. About Ionic

      1:55
    • 4. Wordpress Installation and Setup

      7:21
    • 5. Wordpress Rest Routes

      4:51
    • 6. Installing Plugins

      5:34
    • 7. Making Authenticated Requests Using Postman

      6:27
    • 8. Creating Custom Post Type Quote

      4:55
    • 9. Adding a Quote Using Postman

      4:36
    • 10. Ionic Installation and Setup

      1:44
    • 11. Creating New Project

      3:31
    • 12. Ionic Project Structure

      4:11
    • 13. Adding New Pages and Updating Tabs Menu

      6:48
    • 14. Adding UI for Showing Quotes

      4:35
    • 15. Creating Service

      5:10
    • 16. Showing Quotes From the Backend

      4:53
    • 17. Adding Skeleton Screens For Perceived Performance

      4:30
    • 18. Working on Quote Details Page

      10:22
    • 19. Authentication with Wordpress Rest API

      10:03
    • 20. Sharing Auth State

      7:33
    • 21. Creating Quote as Logged in User

      10:43
    • 22. Fixing Quotes Page Refresh Issue

      3:10
    • 23. Updating and Deleting Quote

      8:50
    • 24. Course Roundup

      0:21

About This Class

In this course, we'll go through the following topics,

  • Set up the Wordpress on our local machine and install the JWT Authentication plugin.

  • Walkthrough Wordpress REST API using Postman

  • Creating custom post type in WordPress and expose its Rest endpoints

  • Setup Ionic framework to use with our Wordpress Rest API

  • Showing Quotes from the Wordpress Rest API custom endpoint and add details page

  • Authenticate a user using the Wordpress Rest API

  • Creating new Quote as the logged-in user

  • Updating and Deleting the specific quote using the Rest API

Transcripts

1. Introduction to Course: Hello and welcome to my course on creating word president. Stay P A and I look for angular application with the authentication. My name is Bill de Sing and I'm going to be your instructor. In this course, I'm a freelance, full stack web and mobile application developer. I okayed in reside Blawg and create YouTube videos. Also, my personal website is build leasing Dotan You can follow me on pretty much every social network with the user name Mbuji Sing for the course overview What? We're going to recovering in this course with the start we're talking about, We're press and the word processed a p A that we're going to be using. Then we will see how we can create custom post type with WordPress and we will see how we can use the postman which is arrest ap a client to see the rest of vehicles from the world prints. Then we can see how we can use, create lead and update the lead operations inside off postman. Then we will see how we can do authentication with the help of rest api A. Then we will start working with the running food and angular application. We will see how we can use ironing components toe the your you off of replication. Then we will see how we can make the get post put and elite requests with help off as to typical lined inside off panic for an angular, we will also see how we condo's authentication with help off our nick, full and angular, with the word processed a p a and much, much more. So what? We're going to a building in this score says we will create a course application with ironic for with word processed, a pay back and on the left hand side. Here, you can see we have that for a while application, then how it will look on our mobile devices. And on the right hand side, you can see how the application will look on the dust off screens. So what are some of the prerequisites for the scores you need to have basic understanding off esteem, ill and CSS and also some JavaScript? And also, if you have angler air ironic, fundamental slowly, you're good to go. So without further ado, let's get started 2. About Wordpress Rest API: in this video, we will talk about WordPress rest a p a. So before talking about WordPress, test a p A. We have to talk about WordPress. So where presses open source software that we can use to create websites blow or applications. But it also provides us with the rest ap A so we can use for press as a headless CMS. So that means we're press provides us arrest a p a that we can consume with any front end. But in this course, we will be using ironic, full and angular. So the V it provides us data is in the Jason former, which is your skipped off deck notation so you can learn more about WordPress rest a pH by going toe developer, daughter, wordpress store or d slash rest ap a link. And here you can read about word processed a p a. And if you click on that reference tab, you can see on the bottom you have that and point references. So that means you can use all these and points, and they will provide us the data later to the said parents. So, for example, if you want to get all oppose from any WordPress outside. You can follow this link or you can use this route as similarly. If you want to get all the categories for the pose, you can use this route. And also we can create custom post types that we will see in the scores. And we will also see how we can use that custom post type with the WordPress rest. Rabia. So what We will learn in this course about WordPress and were processed a p a will start setting up WordPress and then we will see the plug ins that we need to install toe, Get through this course. You will see how we can create the custom post type inside off for press. We will also see how we can do JWT authentication with help over President's Day p a. And then we will talk about the different and points that we will get with the word processed a p a and much, much more 3. About Ionic: in this video, we will talk about ironic. So what is I only ironic Framework is an open source You a toolkit for building high choir team a while and the stopgap using Web technologies so we can use esteem, LCS says, And you're skipped Two very live EV and mobile applications with the help of fire Nick, our nick provisos beautiful sets off you a components that we can use in a replication and their platform dependent. So that fades. If you're on IOS and your own 100 you will see different, um, components depending upon the platform And at the end, you can build your application for any pair from you. Like so what? We will learn about Ionic in the scores. We will start by installing and using the annex E l. A, which is ironic command line interface and we will use I am Xia Lei to create a new project . And then we will see the structure off the Ionic project as we're using angular with Iron ic four. So the structure off ironic project is very similar to the structure off angler project. And then we will see how we can use I only generator to generate pages and then services etcetera. Then we will talk about routing inside off ironic project, which is very similar to the one in the angler project. Then we will see how we can use ironing components. Tow bill the you A off of replication. We will see how we can make the http request inside off the Arctic four and angular application. Then we will see how we can work with WordPress rest J p. A. From inside the Artic four application. We'll also see how we can use I only skeleton squeeze for perceived performance and much more. 4. Wordpress Installation and Setup: in this section, we will talk about getting started with WordPress rest FBI. So we will start with WordPress installation and set up so we can head over to wordpress dot org And then we can click on get wordpress. And here we can scroll down and then down. Lord, were press Now the workplace hedge finished downloading, so no, To install WordPress, we need to have a Web server and stored on our system to a stall of their server. We can use a package gold zap. So if you search for zap on Google, we can go to this website ling and then we condone with them and exam starts. Four ex Canvey. Any system, either Windows medical clinics A for a party, that is, they have server that we want to use to install WordPress and then m stands for my yes girl than P for PHP and then lost P is for party. No, you condone exam compatible with your system, as I am currently on windows. So we can down with this version it that this one or the next to origins Or if you're only knicks, you can use this one over If your own Mac, you can use this one. I have already downloaded and installed zap on my system so we can start the application as I am on window So we can go to the C drive in our system where I have installed application . And then we can go to the folder called Samp. And if we scroll down to the bottom, we can see we have that zam controlled or e x e filed so we can click on that. So this will start of exam control panel here. We can see we have a couple of options. So we have there a party, my audio and the my SQL model. We also have these other mortals, so you're not concerned with that? But we need to start that a party and my escort model so that we can install WordPress. So now we can start apart you by clicking on this startling or the start button. And then we can start my year school also. And now, if I click gone at mean button for Apache, we can see very director to local host slash dashboard. If you're saying pay similar toe that that means them or a party is successfully installed on your system. Also, we can click on the admin button beside my yes girl. So this were take us to local host slash BHP mired mylink. And here we can create the data basis required for our application as we're using WordPress . So we might want to create a date of a solar. It's created now so we can go to a bit of it's a stab and here we can create a database name. So I will be naming my database WordPress so you can actually name it anything. So let's keep it default and then we can click on create and on the left hand side, we can see we have the date of its creator and currently it is empty. But when we install WordPress so this will be populated automatically. If you remember, in the beginning, we have downloaded were press and in the bottom we can see that the file And if weekly conduct, we can actually use this folder inside off our Web server so we can copy this folder and if you go back to over them directory and if we scroll up a bit so there is a full gold as two dogs. So this is a main directory or the root for our Web server. So this is where we can extract or paste our WordPress folder so we can right click here and then began Hit based. So this will copy the were pressed directly inside off as judo's now inside off our browser . We can assess this folder by going to local host slash WordPress. So know we could press enter. So this real start the installation process. So first rehab to select the language. So I will keep it English, United States and then we can click, continue and then we can hit Let's school and here we have to specify the date of his name . If you remember, we have created the database Cold War Press, so we will use that name. Also, if you have used or created a different set of is then you have retained the name here and the default user name and password for them is route and the password is no. And then date of its host is local host, so they sedate every source that is local host and then for the table prefix. We can use the loopy dash that is default or we congenital So So let's keep it the default . And then we can hit, submit, And now begin Click Contra and that solution. So now we have to add the site title. So we will see WordPress fist a p a And then for the user name I will see add mean And the password I will say possible. So here you can see I'm getting very weak password here, but I will be using it on my local machine, so I'm okay with it. So then I have to confirm the use of weak pass. For next, I have to add my email. I d. And then we can install wordpress. So now we're getting word press has been a stolen. And then we can log in here with the user name and password. We have added so I can add admin. And then boss would here and now I can press logging. So this field logging us to the dashboard. All right. And now if we take a look at inside off the pH with my Hedman and we click on that where president of its again, you can see this is already populated when we install WordPress. So now we can close the other taps. Now, if you know where press also has a front end. So if it leak on that for press, and then we can click on visage site. So this is a public facing site that we can already publish. But in this course, we will be using WordPress as arrest a p a. So we will be using WordPress as a data earlier only. And then we will be creating that front end with Iron IC four and angular. 5. Wordpress Rest Routes: In this video, we will take a look at how we can work with the rest for routes in WordPress as currently over press installations. That said, local host slash WordPress. So to access of arrest for roads, we can upend the loopy dash Jason at the end. So when we press enter, we can see the response in the Chase informant. And if you scroll down, we conceive, You're getting the name and description off our website, and the one thing we're most interested in are the name spaces. So we have that name space called w P slash V two. So we can open that. And here we can see all the roads of a Level four our wordpress ap A or the website. So this is our route route. And then if you scroll down to get all the posts, we will do the blue p slash 32 slash posts. So then, if I do something like slash pulls, so no, we're getting the list off post country. I only have one post. So this is a one. We're getting one with that hello world title. So if I go back to my dashboard and then I go toe pose. And here you can see this is a post I'm talking about. And if we added this and maybe I can add update here in the title, so no Aiken hit update. And if I go back here and I refresh this page, you can see we're getting that update inside off the title. So now let's remove that for now. We don't need that. So, no, we're back to that same title now, Toby, the list off all the available AP endpoints. We can search for WordPress, rest a B A and then we can click on this link STP handbook. And now if you scroll down to the bottom, we have this link called references or reference. And now if I scroll down a bit, we can see this is a list off all the available routes for over a p I s O. To get the list of post, as we have seen, we can go to the live p slash v two slash post so we can think off the loopy slash reto as a base ap a U. N. And after that, we have that post. And if you want to get postal regions. We can use that region throat and get the categories. We have that getting episode and so on. No, this is only get to quest. So we're getting the post from the server. So there's five. We can We were inside our brother. And this is not the best way toe see or to run the rest request. So what we can do is we can use an application called Postman so we can head over to get postman dot com And then we can click on get started link here and then we Condoned postman four, our specific platform, as currently I am on Windows 64 machines, so I will download that. So I have already downloaded and installed this application so we can run this application all No, this is how the application will look when do first run this application and toe, Do they get request or an it Crist. We can select it from this list who can't leave their saving. Want to get all the posts from the WordPress ap A. So we will use that get request. And for the Ural, we can use scdp, local host slash WordPress and then we have WP Jason's and after that we can upend a low p slash 32 slash bush. So now we can send it. And here you can see the list of posts. So we have many options here. So in the coming videos you will see how we can use the postman for doing post requests and authentication, etcetera. 6. Installing Plugins: In this video, we will install some of the WordPress plug ins required to get through the scores. Currently, we're on the WordPress dashboard. So to install a plug in, we can go toe plug ins menu item, and then we can click on Air New. Now, the first plugging that we want to install is JWT authentication. Plug in so we can search for JWT here, and then we can install this and after the insulation finishes frickin click on activities . So this will activate this plug in. And now what we can do is we need to configure this plug in a never wordpress install so we can click on view days here, and then we can look at the description. So first, we need to air this relied rules inside off our STX s file so we can copy that. And now we can open this WordPress directory inside off our core editor, and I'm using with your studio cord so we can actually right click in this folder and then open with court insiders as I am using the insiders build off es court. So now we can open as G excess file and then we can add a very light rule here so I can paste it here so we don't need that first line so we can remove it. And now we can save it. And next, we also need to air this inside off as Texas file so we can paste it here and now we conceive it next week in school on a bit, and then we have to define that JWT ought secret key inside off the l A P conflict dot PHP . So we can actually copy that. And then we can go to WP config dot PHP and we can scroll down a bit and we can add this key here. All right. And then we have two aired our top secret key, so we can add anything here, so this will also work. But we have to add something sing like this so we can actually copy that and paste it here and now you can save it. And next we have to configure the core sport Gross a year quest so we can copy that. And and then we can paste it here. So this is it for the configuration. So when now we see this endpoints or these will just work. So let's test it out. So what we have to do is we can use this endpoint, and we have to do the post request with the user name and password, and we should be getting back their token. So I'm gonna clean inside off the postman so we can select the post Request here, and then we can paste over JWT and point so we can actually move this former slash and then inside off the body, we can add the form data fields. So the 1st 1 will be user name, and that will be the admin. So that one we have created for overboard person stole, and then we have a password. So password waas password. And now we can press send. Okay, so you can see we're getting the token back here. So this is over authentication token that we have to send with each and every request to make out antiquated request with the word processed a p a. So let's scope with this token, so we can also very late over token. So what we can do is we can duplicate the staff and then we can add validate So this is the end point that we need to use. And then we have that authorization. And in here we can use that beat Erdogan. And no, we could based it here. And after that, if you hit send So we're getting alteration had not found. So if you go back to overhasty access file, we can see this is not saved correctly so we can save it. And now we contest over a p a again. And now if we send, we conceive you're getting in JWT both very token. So this is working? No, the JWT plugging is successfully installed. The next plug in that we want to install is boards forever. So we will be using it toe add custom post A so we can search for boards and then we can install this plug imports, custom content types and fields so we can install it. After the insulation finishes, we can activate this plug in and after this plugging is activated, we were greeted with this bores admin menu item on the left hand side. So in the coming videos we will see how we can use port stream work to create custom post type 7. Making Authenticated Requests Using Postman: in this video, we will take a look at how we can make the authenticator requests. Using postman toe the WordPress rest a p a. So inside off postman, we can click on new tap and then we can make a post request Do WordPress post so WP slash three to slave posts and then we can go to the body. And here we will select X www for mural encoded data. So here we can pass the arguments or the perimeters like title. So this will be able posed title from forced men. So this can be anything. And the next time I want to use is content so opposed content for postman and then last one able to use its status. So this can be the status for the post. So either this can republished draft or something like that So we can add Publish here because we want to publish this post. No, to see the list off all the available arguments weaken Goto WordPress rest a p a. And here in the handbook we can select reference and then we can select pose and in the post, we can select, create, opposed and here we can see all the available arguments. So one, we're using its title content. Erin students. All right. And now we can hit send, and then we can see the other messes here. The rest cannot create. Sorry, you're not allowed to great posts as this user because we're not making an authenticated requests. So what we can do is we can go toe overall tradition tab. And in here we can select beer token. And we have to pace to talking here. Or what we can do is we can go to overhead a staff and then add authorization and then be there token manually here. So I will use this matter, and then we have to ever talking here. So to get the token, we can go to the step, and then we can copy this token, and here we can based it. And now we can preview over request. Okay, so this will add the or tradition inside off the headers. And no, I can send this request again. And here you can see, we have successfully greeted a new post with the title both title from Postman. And now, if you go back to our dashboard and then we click on all posts again, we can see we're getting that post title from Postman. And if I click on that, we're getting post content from Postman. And here we're getting that public staters because we set over status to publish. So we can also check the get request to the posts and see all the posts available. So I have already created Recollection Gold WordPress, where I have saved a couple of requests here. So if I click on get posts here so you can see we're making get request to local host and then they will PB two slash post here. So if I click, send here so you can see I'm getting to address here. So the one is we have created that supports tighter from postman. And then the 1st 1 waas that title with hello world. Okay, Now let's see how we can edit our posts using the WordPress rest a p a. So inside my WordPress collection, I have already added that put request for updating, oppose, so we can click on that. And then here we can see we're using liver put. And then this Ural is similar to what we use with get or the post request. But after that, we have toe ad post i d with a slash now to get the post tidy when we open opposed inside or for press dashboard at the tall we conceive, you're getting post it could depend. So this is a post i d. So we can use that. So to go here, we can go toe all post. And then if I click on any post so we're getting that you are all right. So instead of seven, we will use 10. And after that we can go to the body Deb here and then we can update our title content and status. So I have already added update here. So know what we can do is we can hit send. Okay, So if I scroll down, we can see our title is updated. And also, if I click on all posts again, we can see we're getting that update here. So let's save their to quest. And now if it weaken, get post here. And if I send the request again so we can see we're getting the title updated in that get request also now, the last request we want to see is how we can delete opposed so we can open our delete posts. So we're using their delete world. So this is very similar to the put request, Ural or the endpoint. But we're using their delete world, and here instead of seven. We want to delete that post with the post title 10. And here we only have to wear the authorization headed, okay? And we don't have to add anything inside off body. So now we can send it. And he had were getting so be posed that we have removed. And now if we go toe get posts and then I clicked consent. So you can see I'm only getting live on 90. And also, if I refresh this page, you can see we have removed or move the item to the trash. So here we can see this. It deleted. Okay, so all the requests are working. Fine. Get posed. Put and delete 8. Creating Custom Post Type Quote: In this video, we will take a look at how we can create a custom post type gold court. Currently, we're inside the WordPress dashboard. So custom post type is a type of content types similar to posts and pages. So we will create one with the help of a plug in cold pours favor that we have installed initially. So with the help of this, we can go to poor, sad men and then we conflict own at new. Now we have two options, so we can either create a new post type or we can extend the existing one. So we want to create a new one in this example. So I will click on, Create New and so the content type is selected as custom post tape and then for the singular level I want to use court and for the plural level, I want to use courts, Okay. And now we can click on next step. So overboard is greater to successfully so poured or we can say custom both type, so you can see on the left hand side, we have that courts, and now we have to add a new fears to it. So the one field I want to add is the title field. So title is already dear. When we create a new custom force type and then the next feel I want to created the writer . So what we can do is we can add a level for writer and then for the fear type, I want to use plain text and then we can save this field. Okay. And after that, we can go to labels. So this seems okay and then the admin you I So this also seems OK. And then we have the loss option. So inside of days, if you scroll down a bit. So here you can see. As I said before, we have title already there. And we also have that actor or the content field there. So we don't want that. So we have the title and then the one be created manually. Delight referred. Okay. And after that, we can number this and then we have rest. Api, I So yes, we want will never let s j. P. A. And the rest ways we want to use is courts and show all fields read only and allow all fails to update we want to check both of these. Okay, so now we can save this board. So here we're getting some fields have changed that a note saved yet so we can click. OK, and then we can, I think, go to manage field and we can actually save this. I think I saved it. Okay, so now we can go to rest a p a. So this seems OK. And now we can I think support. Okay, so this is working. And now what we can do is we can open courts custom post type, so we can click on that. And then we can see there is going clean, no court, so we can add a new one. And here we can add a title. The title will be our actual posts. And then the writer will have a writer name. So first cold, let's say we want to use is my life is my message. So this is a post or court by Mahatma Gandhi so we can add it and no, we can publish it. So now if you go to old courts, we conceive you're getting this. My life is my message code here and now to access these courts with the help of rest A p a . We can open the rest api a base first so we can open local host slash wordpress slash the blue pds since last of loopy slash veto. And currently I'm using an extension called the SN viewer for grown so we can click on this fold unfold all total. So here you can see this help contractors all the adjacent fields So we can click on this and here we can see all the routes that we have. All right. And in here you can see we have that course Lotos All right, now, to get all the courts, we can uses the blue PV two courts so we have toe a pen dash courts. Okay, so currently we have only one course. So let's why we're getting this area off one item, and here we can see my tight. My life is my message. And then the right to we're getting is Mahatma Gandhi all right? We can also see the courts inside of Postman. I have already added some items inside of WordPress collection so we can click on get goods . So this is the route were using with the get requests so we can send it, and then at the bottom of your saying, we're getting the same result here. 9. Adding a Quote Using Postman: No. Let's see how we can add a new court using postman so we can click on this post courts. So we will use that port boast request to the course throat. All right. And then for the board e. What we want to use is so yes, we want to use title for our court. So court, we want to air now is no guts nor story. And then we don't need content. So instead of content, we want to use writer and the writer for this court is disability. And then the status is published because we want to publish this coat. All right. And then we have to update our authorization headers so we can click on or tradition. And here we have to operate the were token. But before that, we have to get the token so we can create a request with the user name and password Two over Get a will be token route so we can send it. And now we can copy this token again. And here in the course we can basted. And now we can preview request. And after that we could go to the body and then we can send this request. All right, So we have successfully created a new court so you can ignore this message. And now if you go to get courts and then we send this quest so we can see so we have that one object and then the second object. So we have that first court. So I think in the first object, we will have that. No guts, no story by Chris. Ready? Correct. So we're getting both. Of course here. Now let's see how we can update a court. So if I scroll up a bit, we can see the court. I just added, Has I d off 19? So we want to update this so we can go toe our I think Post put boast wrote and reveal er's duplicate the step. Okay. And then here instead off posts we want to use courts. And here I want to air 19. So let's actually save it first so I can save it into the collection. So this should be courts and I want to save it to the WordPress election. And then for the body inside of Daido, we can use no goods, no story, and then we can add our update here just for checking and then for the writer. So we want to use it is spread e So we're just updating the title here and now we can hit send, so you can see if I scroll down a bit, we can see the Our court is updated here. And if you go back to the browser we connect, We close that and inside off the WordPress dashboard. If I click on all courts, we can see we're getting this. No guards, no story update here also. And at last, let's see how we can delete a coat solar to save it first. And maybe let's save it also So we can close this and no, maybe Let's duplicate a tab. And then we want to delete a court and the court I d v wanted lead is 19. So the court by Chris Birdie So we can actually save as And I want to use his death a court and inside of WordPress collection. So even save it. And no, we have that alteration head to set. We don't need body, actually, but this won't affect it, so we can keep it. So now we can send this crest. And here we're getting the court that is deleted. And now if I go back to get courts and send it, we can see we're only getting the vanity here. And also, if they go to the Dashwood and I refresh the speech, you can see we're getting one coat here and then one inside off the trash that we have just returned. 10. Ionic Installation and Setup: in this section we will take a look at how we can create an ironic for application by using were processed a p a as a beckoned. So let's start with Ionic installation and set up first we need to make sure we have nor dears install on our system. For this we can go toe over terminal and then we can type nolde dash V So if you're seeing somewhere she number that means nor the successfully a stroll on your system when were sold . Lord, we get north back in manual with it so we can also check for it. So if northern note back in, manage it out in stores so we can go ahead and install. Ironic. But if you don't have noticed all on your system, you can goto nor d s dot org and then don't either the LTs long term sport or the card version. Both will work fine, know to install Ionic we can use and PM so we can run and PM and stall deskee because we want to install irony globally on our system and then we can type ironic. Now this will go ahead and install the ironic framework globally own over local machine. So we can then run the irony command from anywhere in our system. No, I am Nikki successfully installed on our system. So to confirm the isolation weekend type irony Dash V. So here you can see if you're getting an X eli for door to door. Jiro, this might with different on your machine. Also, you can see all the global Camara's that are available with the mxcl a 11. Creating New Project: In this video, we will take a look at how we can create a new project using the Ionic cli so we can open the terminal in the directory off choice where we want to create a new ironic project. And then we can start by typing Iron Ik start than the name of the application. And I want to give it a name are unique for Dash WordPress, and after that we have to specify the temperature. So I only comes with three temperatures by the Fort Blank Dave's and then side menu Sophie Goto Ironic Framework Documentation and then weekly called C L A installation and we scroll down a bit and here we can see we can on our next art than the name of the application and then the template. So we have that blank template so we won't get anything with it. We have to wear everything manually. And then we have that taps template where we will get the taps at the bottom by default and then we have aside menu compared way, we will be getting a side menu that we can slide from left to right. And in this project, I want to use the taps templates. So I will add steps here and then at the end, we can specify the type of the product we want to use. So in this product, we want to use angular at a friend for so we can air Desta Stipe equal to angular. Okay, so now we can press, enter. So this fear down Lord and extract the started template for us. And then it will install the dependencies so it might take some time, so I will back when it finishes. Now our project is great to successfully, so we can change the directory to our newly great the project. And then we can open our project inside the core editor, as I am using the video story accord insiders build so we can type code insiders then dot Now this will go ahead and open the project inside, Off over, Editor. Now let's see how we get another application so we can go toe terminal and then we can click on new terminal and then here we can run our unique. So not this will go ahead and build or product for the first time. And then it will open it inside the browser. So this is how the taps template with iron. It looks like by default. So we have three taps at the bottom, have won have two and type three when we click on any of the staff. So this will open different pages for us. So V right click and then click on, inspect or repress after El on the keyboard. So this will open the developer council for us. And here we can click on this. No, well device toolbar. So this will show how the application will look on different devices. So currently we have selected iPhone 67 and eight. So we can also select pixel to excel and baby Lexie s five. So you can check for different devices and different or conditions how our application will look in these 12. Ionic Project Structure: in this video, we will take a look at our ironing projects structure. So let's closer to a middle for now. And if you have worked with the angler product before, you can see the project structure is very similar. So let me get the angler purchase either side. So here you can see both ionic food and anger, but excite beside and here. Also, you can see the project structure is very similar. So we have eat. We folder on both sides of this issue is for end to end testing and then we have no more use for the and then we have source directory so you can see the director structure is very similar on both the sides. So we have Ionic specifications, irrigation on the and Excite, and we also have other specific verification. But we don't have any clarification on the angler side. So these are some of the changes. And if you open the source directory on the English side and I and Excite, we can see the structural is still the same. So we have a directory, Esther's folder and then Environments folder and the one thing that additional here on the and Excite is we have Team Folder where we can define the sauce very evils and then update our team and inside off our nick. We're calling over global style, says Global. Odysseus is And on the angler side, we're calling best. I sorta see Assis, apart from their things, are very similar. So let's open the air folders on both sides so we can see we have They're dropping more deal on both sides and then we have APP component orders Jamil and then we have spec filed for testing and then app component or two years and then the app More deal. So the structure is very similar. So let's maximize this ironic window. So if he open indexed urged email, we conceive in the body we have defined uproot which is a selector for AP component or ts. So this one And if we can open up component or html and in here we're defining iron route raw declared. So this is how our outer is working and a free open air plotting more dildo ts And here you can see we have specified that outside here. So for over route throughout the year, opening the taps paid model. So this is how we're lazy. Reloading it. So we are adding the model name here. They have start more deal and after their to be after the hash, were specifying the class name for that. I have paid model. And if you go to tabs and then that's more deal. Here we can see we are importing taps, period outing model here. And if you're pontiffs after model, this is very were defining their outing for the taps here. So the part, we're adding its steps and then we're adding the Children's for each and every time they have won, have toe and tap three. So we're going to expand it, and then you can see we're lazily loading all the more DUIs. So let's say for the Taliban, we're lady loading. Have one paid model. You have to pay more dearly here and similarly, the depth three paid model. So this is how all living together and then if you can open Taiwan and inside of that we can open. I have one more deal 30 years. So this is where you're adding the child part here for Tavon page and then a few open Devon pays rs human. This is a stimulus we're seeing on the Devon pitch. So let's say if we have to update Welcome toe ironic to welcome to my Yep. So we can see we're adding Welcome toe ironic inside off any card title component. So then what we can do is so instead, off ironing, we can air. Welcome to my So now we can save it. So now this full auto reload over application. And then after that, we can see Welcome to my Yep. 13. Adding New Pages and Updating Tabs Menu: in this video, we will take a look at how we can aired or generate the pages required for our application . And then we will also see how we can update the taps menu. So let's start by opening the terminal window and then we can create a new terminal and then we can start typing, are unique, generate. And then here we have a couple off options, so we can either do it a page components service. More do etcetera. But in this example, we want to denote a page and the baby won't regenerate is courts. But if you originate a paid inside of her directly that that pages slash courts, then here we can put pages slash courts. So no, we can press enter. So this would go ahead and then generate a paid called courts for us. And here you can see under the hood. It is using the angler generator to generate a page for us so it will create the page with STM Inspector 30 years. Two years have excesses filed and it also creates a model file for us inside off the page. And it also updates AARP routing more Jill Dougherty as Well, no. The next page we want to generate is go detail space so we can also do I need can read and then every page and then we can add coat details and we also want to generate a page gold added court. So this is a page we can use for creating a court. Or we can use this page for editing a certain court and then the next wave, even degenerate is about Paige. And after that, the last baby want to generate is profile page. We will urge our log in form here. And when we hit logging, then we can perform the actions later toe that logged in user. Now, I think this will do for now. So know what we can do is we can go to our AARP routing more dildo RTs file. And here we can see we have these parts here, but we don't need these parts inside off over applauding more your tortillas. We actually need them in their outre model. So we can comment these out here and then we can go to our Taves router model tortillas. And here we can start by updating or adding the new parts. So the first part we want to ed is the court spot, so I can actually duplicate this. So here you can see I am operating simultaneously. So here I am, getting one step behind or out off the fuller, and then I'm going to a course folder, And inside of that, I am going to courts more do. So this will be this one. Gore Smallville tortillas. And at the end, we have to wear this class name affordable course paid body sold. This one. Okay, so now we can save it. And if you scrolled out So this route part is redirecting toe the tab slash devil. Now, this is not there, so we have to add it or operated toe staff slash courts. And similarly, we have to update it to courts also. Okay. And now we can go toe have space. Georgia's demon, and here for the death. I want to use courts. So this is actually the part. So if you go to the taps off the more dual door ts So this step out I'm talking about and then the ICA name I want to use is coat. So if you take a look at this website called I only cold. So this hosts all I can start. We can use in our ironic project so you can search for any I can hear You can scroll down, or you can search for something like Mary coat. So when you search and if you click on that, I can. And here you can see the way you can use this Aiken. So we already have their to boilerplate code, so we just want to copy that name. So this is how I know what to put here inside off the name here. So now instead of the label have one. I want to use groups. Okay, so now we can save it. And if you take a look at inside of the browser weaken See, we no longer have that, Devon. And now we have that courts. And then it is opening the court space Torres demon. So if I scroll up a bit and I opened course space or the Shema so we can change the text here to maybe courts and we'll be left at ahead driven deck, and then we can add course speech, so no, If you save it and here in the browser, we can see we're getting this court speech. Similarly, we can up their their hours for about Paige and profile page so we can close is course page or as chairman, And then we can go toe taps router model. And here instead, off have two and three we can operate it with about Paige and profile page. So here we can add about and then this will be about page more deal, and in the last one will be profile. And then this should be for a file page. More do. And after that, we can go toe, have space Terashima and for they have to be able to use about. So this will be this spot and then the name of the Aiken I want to use is information circle. And then the Dev level will be about and for the ter tev. I want to use the there part profile with all. And then the name of the I can I want to use is person and for the level I want to use profile. So now we can save it. And here on the bottom, you can see we have three taps goats about, and then profile. And now we will be working on the court step 14. Adding UI for Showing Quotes: in this video, we will air the user interface required for showing the courts. So we can first close all the taps that are opened so we can close all and then weaken. Goto the page Court start page Torres. Gemma. So this is a paid very want to show all the courts and here we can remove this. Ach won tak. And instead, we can use iron. Great. So we can add I then great. And then we can click on this icon. So I am using this nippers plugging for Eirik four, as I'm usually via score so you can go to the accession stuff here and then you can search for or look for I like food snipper splayed in y 53 So if you don't have installed it, please install it. So now you can close it. And now we have this I really good gold by the extension so we can actually use the developed column layout for showing all the courts so we can add the size 12 here if you are familiar with board stripe. Great. So this is very similar. So you have 12 column layout or 12 column grade. So that means currently we're using all that well columns to show everything there will be inside the iron coal tag and also have their fixed attribute here after the iron grid. So this will add the fixed container to our content. So let's say fear being over content on the medium screens. So this won't be full with content, so they really affects container. So now we can add I list. So I am again using the snipper splitting so I can and I list so here, inside of that I can add, I item Okay. And now we have our label inside off that and inside off fire level. We can use I an item so I can add I or they can just type I and item and inside off that we can add an edge to tell. So this is very we will place our court. So let's add Lottum text for now. So I will add Laura 100 So 100 direct you too much. So let's sexually removed this upto this. No, we can add another iron item so we can do I'll item So this is were we will air our water name so we can add a paragraph tag and then some Taylor sign. And here we will lead over alternative. So for now, I am reading Lottum of some here. So now we can save it here in the browser, we can see we're getting the coat and then the alternative. Now we can make some modifications. So we conceive, you're getting the lines or the border at the bottom off each I an item so we can add an activity called lines equal to none. So this will get rid of that. And then we want to show the entire court not just some content from the court so forth. I label we can add text rap and I also want to add the detail Aero at the right for each I an item. So we have one attribute for I an item called details so we can add that and then we can save it. So now you can see this looks much better. Now let's add a couple of more items. So to see it more clearly, so we can use angular Andy four directive in our I an item detail. So what we can do is we can use our nd four and then we can do let item off. Then we have to provide an airy so we can acclaim accuse off a constructor function. So we will do a raid or constructor and here we can pass the number of items that we want to create. So here I am creating then so no, he can save it. And here in the browser, we can see we're getting the 10 items from that area and also weaken, see ever you even more clearly. 15. Creating Service: in this video, we will take a look at how we can create a service in our iron IC applications so that we can get the data from the WordPress rest ap A beckoned so we can start by opening the terminal window. And here we can first clear the terminal and then we can type are unique, generate, and then we can select service from the list and then we can press enter. And the service team that we want to create is data. So no, we can press enter. So this will create a service cold data for us and then the files it regenerate is data dot serviced Ortiz and then data door service door spec tortillas. And now we can close terminal and then we can scroll down of it and then we can open data door serviced RTs and inside of that we can create our get date omitted. And so this matter we will provide a Ural off type string and then this will return Ah data with the get requests for the word process T p a. But before using any STT rivers, we have to import as to typically light model inside off our moral tortillas so we can open this. And here we can edge a city p client more deal. So this is not auto importing. So what we can do is we have to go at the top, and then we have to add the import statement manually and we have to import it from Angola . Common. Then as to Tippi and then the method for the class name we want to import is a city peak light Morty. Okay, so now this will do. And now we can close is. And here inside the constructor, we can inject this Esther depict client so we can add play. It s too tippy. Then I city p glide and here we're getting our order complete. And then if we select here on the right side, we can see we can auto import it from angler communists. TTP. So if I press enter on the top, you can see this has already importer the s typically light from angler common and a studio p. And now to use the get request, we can do return this dot Sgtp don't get as we want to get the data. So this is a get request and then inside. Of course, we can use the service or the server, Ural. And if you remember from the WordPress side our server a bur Elise Sgtp local host slash wordpress slash the loopy essence Rest of loopy slash we to all right and then as you want to get the court so they should be slash courts. So no, we can save it. And if you see, we want to get the UL from the user input so we can use this. You're a very evil instead of courts. So this will be Plus you are in so this will work Fine. And now the next step is we want to effect of this court so we don't want to put the entire euro in each and every function. So what we can do is we can cut this your l and then we can add it inside off our environments variable here so we can open this and inside off environment RTs file. So this is the file for development purposes. So we can add a variable. Let's say a p a u l. And then we can add this base. You're all here and Now we can save it and close it. And here, inside, off duty service. Let's add a constant cold ap urine were we want toe use this environment dot ap you're so now we can save it. And here what we can do is we can actually use templates things, so we don't have to use this plus sign anymore. So what we can do is we can actually move this, and then we can use back ticks. So to use the variables inside off this template strings, what we do is we air, dollar sign, and then God lib races. And here we provide over Ural. So over your release ap urine. So this is a base urine. And after that, we have to wear slash, and then we have to provide our You're so this Ural corresponds with this one, and then this one is coming from. And why men Not AP, your All right. So now we can save it. 16. Showing Quotes From the Backend: Now let's see how we can show the course from the back end. Using service, we have yes, created so we can scroll up a bit, and then we can open court space door ts. And this is where we will inject our data service so we can do brave it, need a service, and then we want to air the data service here. And now we can percenter here and make sure to wear this import statement if it is not added automatically. So now we can add a course property here. Can we have type any and we want to give it a empty every and no, we can use the details service to get the detail from the back and rest a pia so we can use this store data service dot get date omitted, and then I have to pass the U. N. Perimeter. So I want to use courts. So this will get the courts from the back and rest a p a. And now we can subscribe with their data because this is over the river, so we can subscribe to it. And now this will give us back the data and then we can use this data to output to the council and see if we were getting any data back. So now we can save this. And here in the brother in the console, currently being on the staff slash courts. So this will execute this code and we're getting this one coat inside off our counsel. So if we expand it, we can see we're getting our post with the or court with the title. My life is my messes. And if you go toe local host slash wordpress slash WP admin, and then we go to the courts. So this is a custom post type. So this is the court we're getting. All right, maybe. No, let's add one more court here. So we're not adding this time from the rest. AP A. We're just heading in from the dashboard so we can add new and then we can urge Screw it. Let's do it. So this is a court by Richard Benson, and now we can publish it. And now if you go back to our ironic application and I refresh this page on the right hand side, you can see couldn't leave. You're getting do chords. So the 1st 1 is now the new one. Ceviches screw it. And then the 2nd 1 is the with the title. My life is my message. And now let's see how we can show these courts inside off our page so we can actually open course paged or a semen. But before that, we have to go toe court space 30 years and then assign this course to over courts. So what we can do is we can do this door courts equal to data, so know I can save it and go back to course page or estimate. And here instead off. Let item off this area off, then elements we can add. Let item off Goard's or Toby More clear. Let goed off course. So, no, we can save it. And now, on the left hand side, you can see we're getting only two items. But we still haven't updated the court and then the author name. So if we expand this area on the right hand side, we can see we have this title property and then we have that rendered inside of it. And then we have that writer property. So these are the properties. We will use to fill these court and then the writer, So here, inside, off, over as today, we can use court door title dot Surrendered alright. And here instead off a lot of myths. Um, we can use go dot writer So now we can save it. And now on the left hand side, we can see we're getting the course that we have a noble wordpress restaurant. Pay beckoned. But here you can see we're north, rendering the estimable correctly. So what we can do is we connect. We use an angler tag for that. So instead of just out putting it inside of the strings, what we can do is began. Got this. And here we can use attack gold in arrest, UMA. And then we can paste it here and now we can see this is rendering correctly. 17. Adding Skeleton Screens For Perceived Performance: in this video we ridicule okayed how we can air the skeleton text or skeleton screens inside off the course space so that it will show something before the content is actual order. So here inside, off course start page or STM, we can make you soft This I list so we can actually duplicate it. But before that, let's add NGF tag. So what we can do is we can check four if courts nort lend is great toe then Jiro then we want to use this list and now we can duplicate it and here we can face it And here we want to check for if course Shortland is diabolical 20 We can also check for typical toe if you like and know what we can do is so here inside off Andy full We can use let coat off so this shouldn't free courts. So what we can do is we can use our constructor function again and here we can add return items And now what we can do inside off this I an item maybe instead of s true, we can use skeleton text and then we have to specify the wits so let's say 100. So this will be the entire fifth and we can actually duplicate it because I want where? Two lights for our court. So this first item is for showing the court so the court can be either one or two lies. So I want to zoom. It is two lines, so this can be 80. And after that we can edge this skeleton next four I would. So here we can add the width off, maybe 40. So now we can save it. And here in the brother is very fresh. You may have seen the skeleton screen for a split second and if Nord we can use one heck, we can go to our core start page or TS. So just to see this working, we can actually cut the school and then we can use set time out function. So here we will air that would function. We can use the other function here and for the second perimeter, we can use maybe two seconds. So the data for our application so we won't be adding this course data to our course property until two seconds. So this will show the skeleton screen for two seconds. So if I reload the page again, you can see the skeletal screen is showing for two seconds. But also this did a lycan is showing. We can actually remove that so we can actually move it from here. And also, I want to air the animated property after the skeleton next. So this will show the skeleton screen inside off the ripple effect. So no, if very fresh again, you can see the skeleton screen and you're no longer seeing their detail like, but the one issue I can see, we're only seeing that wall line for Overcoat. We have actually added these two skeleton texts, so let's see how we can fix that. We can actually change I an item here toe iron text so we can actually create it in all the places here so we can add I in text so no, we can save it. And now, if very fresh, you can see we're getting two lines here for the coat. And then the next line is food author as now it is working so we can go here and then remove or comment this set time old coat. So that means a record is working. So now they should show this calendar test until our data is loaded from the back end. 18. Working on Quote Details Page: in this video, we will take a look at how we can work on the court details space. So whenever you click on any coat on the course, pay so this will take us to the core detail speech. So let's start for closing the additional types and we will keep their course toward page or a semen. And then we can open. Have said Dr Mardell 30 years and here we can add a new road so we can copy that previous wrote and then we can paste it. So what we can do is we can add additional wrote. If we go to courts, then we will pass any dynamic i d. And in that we will open our core details space. So if it's cool up here, we can see it even toe open this page so we can edge good it is. And this should also be good details start more duel and then we have to opt it. This God, it is paid model. So we will go here and then we can open this file And here we can copy this glass name and we can paste it to you. No, they should do And now we can go toe course, start page, arrest, email. And here we can urge without the link attribute inside off I an item component so we can do without link and then we can go toe taps, slash courts. Then we have to pass our dynamic idea. So this will be court dot i d. So if you're wondering, how do we know this is that I d field? If we go here inside of the browser and we expand these in third of the console, we can see we have two items here, So if you expand anyone off that we have that I d property. So this is a one we're passing. And now if it league own any court, you can see very director toe the court it in space. And if you go back and I click on anyone else you can see again very detector toe, the court details page and on the top, you can see here passing their dynamic I d. Now let's see how we can get that dynamic idee inside off Go details space so we can go to court. It is door page, 40 years and let's start by creating a property called Post. And here we can create our private variable called activated Note, and this should be off type, activated it out and make sure to wear this import statement. And now we can create a constant called I d to get the data from their dynamic I d feels so we can make use off activated route so we can tothis start activated route, door, snap short dart for a map Don't get And then we have to pass that i d or the dynamic idea if you're talking about and now we can out put it to the council. So let's see if it is working. So no, If you click on any court on the right outside in the console, you can see we're getting that coat I d. So the victory con 2nd 1 again, we're getting that Go tidy. Now, if you remember to get all the courts were using the throat and if we send this request, we're getting all the courts. And if you pass an additional parameters So let's say we aired the I d 36 that we have seen in the council so you can see we're getting our single court here. So this is it out we want to use now. And if we open our data service tortillas file, you can see we have to get data method, and we want to just parcel you are all here. And then it will give us back the result that you're expecting. So we can make use off that matter again. So we can't actually inject our data service first. So they should be off lively that service and make sure to wear this import state printer the top and know what we can do is we can use this door data service dot get data method. And here again, we can use temperate stings. And now we can pass a your l. So they should be not composed judicially. Courts, then slash We have to pass the i d here, so no, we can use our constant here like this. And now we can subscribe to it. Now, this will give us back the data, and now we cannot put it to the council and see if you getting any data back. So now if I click on any court, you can see we're getting the idea here and then we're Yes, we're making the get request, and then we're getting single coat here and here you can see all the daughter that we can use. And now, as we're getting the data here so we can assign our data toe this post property, so actually, they should be caught. So what we can do is we can do this Lord court. It could do data. So now we have that core property which holes all over data. And now we just have to add the data inside off over course page arrest Yemen so we can open court details, page arrest, email here and here. Let's see the edge. Good de it is. And now we can actually copy the court from our course page or esteem in. So what we can do is we can cope with this item court, and then we can pay. Sit here inside off the in grade so we can heard or use I good snippet. So this should be fixed. And then we can use size equal to 12. So this will expand close all the screen or all the available columns. So no wiggle paste. The an item called here and then we don't need detail and the full and then the ultra link here so we can actually move that and no began civet. And now if I click on any coat, you can see we're getting the coat. But we're getting some error on the council. So this is saying, cannot re property title off undefined. So that means we're trying to access the data or use in the average family before the data is actually ordered. So what we can do is we can hurt the caution mark here, and then he is. So this will make sure we're only renting the data whenever it is available, and now you can see they're no longer getting that. And also, if you go to court speed again and I click on the court again, we are no longer getting their tears. Also, we don't need that lying at the bottom for our court details space. So let's see how we can remove that. So if you see on the iron item, we asked using that lines equal to none for over Nestor Diane items so we can add that lions equal to none on the pain and item also, So this should get killed off and yes, it has. No. Let's see how we can add that back button before that court date is text so we can go to the top and after I am told, while component we can make use of a snippet, I back but a default. So here yes, we want toe add the button at the start and then we have to up their default a trip for the back button so they should be the tabs. And when we goto tabs. So if you remember, that tabs route is is and VR director toe have slash courts for our first road, so they should do the trick and no, here you can see we have that backwards in here and when we click contact, we are directly back to our course pay. So this is where to find? No, Let's see how we can add added and elite patents below this coordinator space text so that we can use the department's toe l attend lead our court so we can create our new iron column with the size 12 and then we can add our Burton so we will use this iron, but with I consider it. And we don't need that click listener for now. And the slaughter start that is okay. And then first I want to wear the edit button. And next, I want to use the name off the icon for this added Britain, which is create and for the color I want to use primary. And then we can go Pittis and best it. And the second button a delete button. So I want to use a color danger. And here, instead of edit, we can add delete and I can. I want to use is fresh so we can save it. And now here, inside of court details page we can see editor gently. It wouldn't currently they don't do anything, but we will make it work. 19. Authentication with Wordpress Rest API: in this video, we will take a look at how we can do the authentication with the word processed a p a. So let's start by closing all the tabs and maybe collapsing the steps. And then we can go toe source app and then we can go to the profile page and profile Page Torres chairman. And this is there. We will air the form toe locking over user so we have a president toe profile and then we can inside of the content. We can use I in grade snippet and again we will use that well column layout. And inside of that we can create our form. Now in angular, we have two ways to create a form. We can either use template driven approach or reactive form approach. But in this example, I will be using their temper Devon approach. So what we can do is we can start by creating a form tag or component, and then we can create a local variable and then we can assign it toe any form, and now we can create ah Andy submit event, which will call a method. So let's name it own logging, and we will pass it that local reference for evil or h no, we can create. And I write, um component. And inside of that we can create an eye level, so this should be labeled and then I can add floating here, so that will be a floating level. And then the level I want to use first is user name. So we will use the name and password fields and then we will add a log in with their and and now after that, we can add I input. And here we have to specify name, which is very important. So we can say use the name and then we have to specify the type and the type we want to use for user name is next. And after that, we have to a red and immortal and that we can bone to the property. Solar TSI model dot Use the name. All right. And similarly, we canopy this pattern for password also. So here we can add password and then this should be password in the Yes, we want to keep the type text and then this will be mortal dot password. He has yet to create a property model So we will do that. And next weekend aired in Burton. So this Canvey submit and I want to make it a block button. This should be off type submit and then we can add the calorie cool do family. All right, So know what we can do is we can create this own logging matter and then we can also add this property gold mortal, So we can go toe profile, page or TS, And in here, let's start adding a property model which can be of type any and then we can assign it an empty object. And now we can create a method on logging, which is expecting Ah, formerly so we can add maybe a feather perimeter here also. And then we can output f here on the council for let's see if it is working. And now actually, we can save it also. And now inside the browser perfectly can provide and then click on user name and I conceive an problem here, the labour side not floating, So we will fix it in a second. So let's first ad Ah, use the name and maybe a password and maybe try to submit it all right, so we're not getting anything, So let's see what we can do. So what we can do is so first, let's see. So we're reading Andy Submit. So this is wrong that this should be and he's submit. We cannot just add floating here we have where position ical floating. So they should fix that floating issue so we can now copy that and then we can paste it here so no, we can save it. And now if I click here, you can see the label is floating and dollars said I use name and password and then let's click on Submit. And on the right, we can see we're getting that form data and the Value V interested in is that where you property which will contain the object with the user name and password. So what we can do is began, actually, output f dot value. So this will give us they use the name and a password. So if we add user name and password again and submit, you can see we're getting there to use the name and password. So now let's see how we can atone Decatur user with this data. So first we can create an all service. So let's create a new terminal window and then we will generate a service. Gold ought. So here you can see we have their service created. Now we can close the terminal and if you scroll down a bit and we can click on or service Torti, Yes. So this is where we can aired our mattered for logging our users. So let's create a matter for maybe there's a post logging. So let's first inject the http service so that we need to import from mangler common sgtp and know what we can do. We can expect the data here that we will pass from over profile page so we will use this matter here and then What we can do is we can use return this Dort Sgtp door post and then we need to use a peer. You are soul. Its first aired a constant for a peer Ural here that we will get from environments dot a Puno. So we're we can use that template string so we can our dollar sign and Carly braces. Then if your urine and after that we have to wear the ul four hour authentication your So if you go toe postman and then we open the WordPress collection, then we can click on their JWT or stoking. So this is the euro that we want to use. So we can actually copy this gold or the U. N. And then we can paste it here. But now the problem is, if we go toe over a p a, you are environment. You're so we have added that w p slash v to work the and also so what we can do is we can actually remove this from here and then weaken directly added inside off over data service . So this will fix the issue and we connected here and after their that go, shura will also work fine. And then our oath Ural will also work fine. And now the second betterment of that we need to pass is data. So that data we will be passing from our profile page so we can go here inside off the profile page and then we can inject the or service so we can add or service then our service. We need to import it first here and know what we can do is we can use this. So what? We can do it. We can do this dot or service dot They're exactly one problem. We're importing it inside off, Andy owning it. So this should be inside off, constructor. So know what we can do is this Start out service dot boss blogging, and we can pass over data here, and then we can subscribe to it as it was off the dribble. We will get some data back, and then we can out put it to the council. So now, inside of the browser, weaken aired our user name and password. And if this submitted, you can see we're getting our token data back. So this year token that we can use to authenticate our requests, and if he ended wrong user name and password, we would get some error. So let's see how we can output the other on the council. So inside, off off the level we can catch the error by passing the second perimeter like this. And then we can output error dot messy. So when we get some better, we will out. Put it to the council. No, Let's see if he had at green envy and the wrong password and we submit We're getting an error. And then we're seeing this message as she typified the response. And for 34 Britain. And when we aired, right password and use the name, then we will get that open back. 20. Sharing Auth State: in this video we ridicule okay at how we can share the old state between different pages for sharing the Allstate. We will make use, often behavior subject, so we can multi cast of off the level. So what we can do is we can go toe ought service. Torti? Yes. And here we can create a new property. Gold is authenticated and then we can assign it new behavior subject. It can be off by bullion and then we can pass the initial value as false. We don't need to specify this bullion because we're passing these value, so this will infer from it. But let's keep it So now what? We can do it. The initial value is false. And then when we log in and here after logging is successful, we can do this. Start off service dot is authenticated dot Next. So this is how people were the next value to over of the river. So here we can add True. So that means we're successfully loading, and also if you're getting some matter, So let's make it false. All right, so now what we can do is we can go to your profile page and then maybe let's add a button here. Four law goat. So what we can do is so this should be off type Barton. And I'm not a said one thing, so this shouldn't be block, so this should be expanded call to block. So then it will show as a block warden. So now we can add block. So know what we can do is we could check for went to show these buttons. So what we can do is so we can hide the phone. So here, we can check forward is authenticated property inside off our art service. All right, as it is observable. So we have to make use off our A sync operator. All right, so now we can save it. So here, we're getting an error. Identified our service reference. True. Are private member off the comm border. So what we can do is we can go to opera profile page or two years, and here the constructed we can add public instead of private, and now they should fix that at it. And we've only use this phone when the user is not authenticated. So that means we have to read our north signed before that. All right. And now we can cope with this. And if statement and then we can place it here. I think we should move that I am better to separate and columns. So what we can do is we can do. I call, they should be off size drill. And maybe, let's add, Andy, if here. So this will work when the user is authenticated. And now we can got this Iron Burton and basted here so they should work Fine. And now let's see currently were not Lauren. So that means we're seeing that form and move Enric, Lincoln, Edwin and password. So overpass. What is right and know we're getting this low vote and so that means that is working fine. Similarly, we can use is authenticated method to hide thesis added and delete buttons inside of court details space. And also, we will add a create court Burton here inside off court page, so we can actually cope with this court for nd if and then we can go to court details, speech and we can open core data space Georgia Schimmel and we can add over and if here and we also need toe make sure toe add or injected or service inside off court details Page or Dia's. So here, inside of constructive, we have to bake it actually public, and then we can do all service. And then we connect. What service? Here next we can go toe gore speech and here, inside, off the toolbar. At the end, we can add in buttons and the slaughter should we end and we will create on click. We want to make this on could get and then the item slower should we start And I don't want to add any text here, so I think they should work Fine. So let's save everything. And we only want to show this button for create when the user is logged. And so what we can do is we can copy this code again, and then we can place it here and now we have to inject the or service again. So here we can air public all service. We have to inject all service here so we can save it. And now you can see we have added a button here in the course at the top, right? So we're not seeing it. And when we click on it, so there is no additonal it, but and also And if you go to profile currently we're seeing the phone. And when we aired the calculations and mean and password envy, click submit. So here we're seeing the log out button, and when we goto courts, we can see that. Plus I can hear. And when we click on any court, we can save you saying this addict and let wooden. And also if you go to profile and I click on log out. But the thing is happening solar to fix it so we can go toe over profile page. And here inside of border, we can add a click listener. And here we can add own love out all right. And then we can go with this message and we can add that mattered after all, logging. So when we click on that, we just want to make over is authenticated property fall so we can use that so no, we can save it. So currently we have to wear user name and password. So via North authenticator, and now we can click submit. And now we're getting log out here and we go to courts. We can see that. Plus I can and then edit and delete buttons. And if you go toe profile and now I click on longer, you can see that use animate pastor form again. And now if I goto courts, we can no longer see these weapons said it and delete. And if I go back, we're no longer seeing that cleared product. 21. Creating Quote as Logged in User: in this video, we will take a look at how we can create a new coat as a logged in user. So first, what we can do is inside off our data service. We can create a new property called token, which we will use to save the toca when v log in a new user. So here we can see inside a profile page. So this is where we are authenticating the user. So this is where we can inject our data service and popular this token feel. So what begin to is we can do public new to service, and then we can import our data service here. All right. And now what we can do is we can do this door on data service dot Tokcan It could, too. Data then. Stoker regulates movement. Before that is, it indicated of the rule. So no, we can save it. And now our token property is populated. When we Logan No, let's create a posted. I'm 1/3 that we will use to create a court so we relate false data. Now, this will have urine off type string and then we will also pass data along with it and next we need to add the little statement. So they should be this daughter Sgtp note paused and no, we again want to use of a p a. You are another base and after that we have to provide. I think we can cope it This exact urine. So this is a UL that we're going to be in putting. And after that, what we can do is a second perimeter weaken Pazar Data and as a turd perimeter, we need to boss the headers also, So I can do head us then he could do head. It's so this is what we need to create so we can create a constant gold headers here. And then we can do new s TTP header. So this is the one we want and then we can create an object with Well lets me scroll down. So this will be content. Dyp and I want to make this application slash Jason as we want to pass a decent data and then the next his authorization And this Philby be it a token and then the token I want to pass. Is this start token? So this is a property I want to pass here, all right. And after the successful, we're passing the headers here with the return to a city people studio now over services ready. So we can actually close the other taps. And then we can go toe our taps. Router more do. And here we can add a couple of parts. So what we can do is we need one part for creating a court and then another one for editing a court. So what we can do is we can Bassitt a couple of times and here courts slash add it goat and then the lower Children property will be We want to use our added court model. So this will be add it court and then add it, goat. And here for the more do I want to copy this added coat paid more do name so we can paste it And no, I click and copy this and again bested here and for the edit fun I want to pass dynamic I d And then I want to go toe that editor wrote So this route will be for creating a court and then this route before editing a court. But we're using the same page for that. And now we can go to our core space or less Jamil. And we actually don't need own create. But in here or actually listener here, we can actually aired out the link. And here we can add a link tab slash cordes slash at it. Good. All right, So if you see in the brother, we're not seeing a button here. That means we first need to log in so we can log in with that mean and password, and we click Submit. Now we're log in. And when we click on courts were seeing that plus, Aiken and manically conduct, you can see the area. Tector, toe edit coat. So this is very we will let our form. So now what we can do is we can go toe, uh, edit gold page, and then we can start adding our form here, so may be deterred. Uh, create slash added, court ordered and inside off the content we can actually make you so far would profile pay because we have already added a form here so we can actually go with the anti grid here, and then we can paste it here, and we don't need that load. What? In here, we can remove that. And after that, we can remove this. And if and now we don't really use a limit possible, we actually need ah title. So the name will be title. And then again were we will be aired model, daughter tighter. And the next property even to use is, uh, like to and then model dot by two. Then the name will be later also. And the type is text for what? This is correct, all right. And I also want weird another item for the status. So we can a Riunite. Oh, and then we can aired I select. So this will aired district one with the options. So the slippery will already give us I an item. So we can I could remove the one we have Edgar. So here for the level we can add Ah, select status again select status. And for the values we can add, the one is publish and the 2nd 1 is draft. So there are many more but I am using these tools here. So then no Kaneda publish here and then draft here. And after that we don't want to select multiple values. And then we can add a name, equal toe status, and then I won't wear any model. So this will be model dot status. So now we can save it, and then we can go toe added course page 40 s. And here I can add a mortal property off type any all right. And when I hit some it, we can see we had clicking on that own logging matter. So what we want to do is we won't wear it on. Ah added court. All right, so now we can copy this, and then we can place it here and let's output the form value to the council. So here, let's see. Title right. And then we can select the title for status. And then if I hit, submit, weaken, see, were getting tighter, lighter and status. So these are they really that we need toe push toe, add the court to the WordPress dashboard, and no, we can inject the data service here, and then we can go here, and then we can call this store data service, start post data and then the Ural that we want to use his boats. Actually not post that they should be courts. And then after that, we can see the better mattress. Easier than the second perimeter is data, and the data we want to pass is f dart value. And now we can subscribe to it. And if it is successful, we should be successfully creating a new good. All right, so now we can save it. So first we need to log in so we can add win and password, all right? And then we can go to court. So we're already own create slash added court. So we let school one step back and click on plus, and now we can add our title Life is ah example and the right to graze anonymous. And the stage is that I want to select is publish. And now I can click submit. And here you can see we have subscribed to that post request. So that is why we're getting that data back. And now if you go to court spade again, we're not seeing the data. But if the refresh the page, we can see we're getting that data 22. Fixing Quotes Page Refresh Issue: in this video, we will take a look at how we can fix the issues with the pay very fresh in the court speech. So let's first close on wondered deaths here. And then we can open our data service nort es file. And here we can create a new property gold, very fresh goats. And then we can assign it, Ah, subject And this Kennedy of type number. And we don't need to pass. And it's a with it. And let's make it public, all right. And now what we can do is whenever I create a new coat and in here, we want to pass a next value toe, this of the people or Alexia subject. So what we can do is begin with their store data service, start the fresh courts don't next. So we don't do to pass anything here also. All right, so this will just work. But we need to redirect our page to record spade when we create a new court. So what we can do is we can pass angler outta here, which will be off type router. And here What we can do is we can do this dot router, not navigate by U R l And then we want to know year to slash steps. All right. And now inside, of course. Paid. We can listen for this three fresh course of the river. So what we can do is we can go to our course page. So this will be this one and inside off our constructor, we can actually first, let's create a new matter for this. We can actually cut this and then we can add get this store, get courts and no, I have to create this method, get courts, and we can paste it here and now we can subscribe to our refresh courts off the river so we can do this door data service dot refresh goats don't subscribe as we're not passing any data so we can make the argument empty, and then we can go will get course mattered again. Whenever there is a new value in our subject. Now we need to log in again so we can do at me password and then we can go toe course pitch and then we can click on Plus, I can hear and we can add a new court. You have to dream before your dreams can come true. So this is a court by of Bill Collomb and I am setting the status to publish. And no, I can press submit, and here you can see this time I didn't refresh the page, but we're seeing that code by Abdul Kalam at the top here. 23. Updating and Deleting Quote: in this video, we will start forking on updating and deleting a court. So let's first close course speed and added court page tab. And then we can go toe go detailed speech. And here we have added and delete button. So when we click on edit, we want to use off the link and we want to goto our edit page so we can go toe slash steps slash courts. Then we have to wear the dynamic I d. So this should be court dot i d and then we want to goto the edit bitch. All right. And if you remember on Cordelia's bed we have access to that court property and now we can go toe added court page 40 s and here we can inject, activated, wrote and make sure to wear the import for evacuated wrote. And inside off Andy owning it. Let's create a constant gold i d. And then we can check for our i d dynamic property for construct for activity Drought dart snap short thought baram map not get and we can check for i d. And now if we can check if I d That means if we have any I d Then we can call over, get data Mitter from data service with their diet E. So what we can do is we can do this, nor data service don't get data mattered, and then we can go toe courts slash. And then we have to add the i d. Here. All right. And now we can subscribe to it. We will get the detail back. And in here. What we can do is we can populate our mortal so we can first output the data with the council. And then we can do this. Dort. Mortal tickle, too. Title. So this should be data title, and then we want to access surrendered property. If you remember, then we want to access the writer. So they should be data right to And then the last one is status. So they should be data students. All right, so now we can save it. No, let's slogan. And if you click, submit and we go toe courts and select any coat. So we're getting another here. Can it really property idea of fun. Defined called details, page or estimable line number. 20 years. So let's see. So if you go to court details Page arrest. Emma, online number 28 where we add our link. So we have to change it to course, I think. And no, we can save it. And now if you log in again with over conventions and we click on any court So we're still getting that and we will fix it in a second, but we physically can't add it. We can see our fields are being populated. So this is for confined. Now, to fix that, I defined issue. We can negotiate mark here so they should fix it. And next, what we can do is inside off our adult court speech in here own at it court, we can check for our I d property and if we have any 80. So that means we want to make update requests or put request. If we don't have any i d. We want to keep that post requests. So what we can do is instead of gone study, Let's make it this start I d. And then we have to wear the i d. Here. All right. And now this should be this daughter I d. All right. And now what we can do is we can check full If this start i d. And here we want to make the port request. And if we don't get any ideas, we want to make the Post request. So lest based that poor Syquest and let's change this name, toe put request, and I will actually make that matter in a second. So here, instead of courts, I have to add the U. N with idea. So they should. With this start, I d. And we no longer need that single course. We will air tactics here, so they should fix it. And now we have to create the put data matter inside off data service so we can go to data service and we can actually copy this post eight. I mattered, and we can face it here and let's make it put. Data mattered, and this will be a port request. And other than that, everything should work Fine. Yeah. So let's log in one more time, so we will add mean and password and click submit. And now, if you go to courts, life is exam. And now you can see we're no longer getting that idea. And if I click edit and I try updating it with Maybe that said update, and I save it so you can see we're getting that life is exam update. So that means our updated quest is working fine. And let's all see how we can do their duty. Quist. No, if you go toe go details space or Osama. And in here we have their delete method. And let's add our click listener here and here. I've led on the elite. We don't need wear coat I d here because it is already inside off our court details page 30 years so we can go to coordinate a spade tortillas and let's create a method on delete. And here we have already injected that data service. Let's create a Met it. So this will very similar to a put request matter so we can go toe added court page and maybe copy this and then we can paste it here. So let's make it our delete data and we don't need toe had any value here, and we will get the data back that we delete. And maybe, let's add are out of here so we will be led Private router. This will be our out. All right, so now we have to. So there shouldn't be this start idea to this will be go dot i d. All right. Actually, this start cord already. So now we can go to a word. So let's close the other tabs. We can go toe data service, nor ts, and here we can actually go pee this court, and then we can create a method. The lead data. We don't need to add any data here. All right, So we can I could remove that. And I think this should work, so no, we're seeing the courts here. What? Currently we're north logging. So let's slogan first. So we will click admin and then password, and now we can submit. And if you go toe courts and I click on that life is exam. So now I can click on delete. Okay, so we're getting are not raised, so we fit like a network, and then we click on their 37. Okay, so we're making a put request, so this should be delayed so inside off our data service. So this should be delete instead of port, so, no, we can save it. So currently, we're no longer seeing that area toward delete button. So let's log in first and I can add add mean password and no, I can submit. And if they go to courts back and let's click on that one and likely condemn late, you can see our court is deleted successfully and also over page for courses refreshed. 24. Course Roundup: So this is the end. I hope you have enjoyed discourse. And now you know how we can use for press rest A p a with ionic full and angular, including authentication I've issue Look for the future. I also encourage you to ask questions and help others in, like you're in the section signing off and thank you.