Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

6.5 Adding the Edit Lawn Markup

This UI component will be displayed when the user clicks on the Edit button next to a lawn in the View Lawn component. This will display a modal with a simple form to edit an existing lawn.

1.Introduction
2 lessons, 07:21

1.1
Introduction
01:02

1.2
Prerequisites
06:19

2.Getting Started
3 lessons, 30:48

2.1
Creating the App Structure
11:46

2.2
Creating the Server-Side Entry Point
10:14

2.3
Starting the Angular and Express Apps
08:48

3.Setting Up the Mongo Database
4 lessons, 27:53

3.1
Getting MongoDB Up and Running
06:08

3.2
Connecting to MongoDB
06:47

3.3
Creating the Database Schema
07:49

3.4
Creating a Simple Data Access Layer
07:09

4.Creating an API With Express
6 lessons, 29:16

4.1
Handling Requests in Express
09:57

4.2
Taking Advantage of the Express Router
05:52

4.3
Adding the `GET` Handler to the API
05:34

4.4
Adding the `POST` Handler to the API
03:18

4.5
Adding the `PUT` Handler to the API
02:17

4.6
Adding the `DELETE` Handler to the API
02:18

5.Building the Front-End Angular App
6 lessons, 45:52

5.1
Creating the Front-End Models
06:57

5.2
Creating an Angular Service
07:31

5.3
Making HTTP Requests From the Service
08:33

5.4
Setting Up the User Interface
09:05

5.5
Creating All the Components
05:28

5.6
Adding Routing to the App
08:18

6.Creating the App Components
12 lessons, 1:00:02

6.1
Adding the View Lawn Markup
05:55

6.2
Adding the View Lawn Code
06:51

6.3
Adding the Add Lawn Markup
04:34

6.4
Adding the Add Lawn Code
07:41

6.5
Adding the Edit Lawn Markup
03:06

6.6
Adding the Edit Lawn Code
04:11

6.7
Adding the View Application Markup
02:54

6.8
Adding the View Application Code
07:46

6.9
Adding the Add Application Markup
02:16

6.10
Adding the Add Application Code
04:49

6.11
Adding the Edit Application Markup
04:20

6.12
Adding the Edit Application Code
05:39

7.Conclusion
1 lesson, 03:18

7.1
Conclusion
03:18


6.5 Adding the Edit Lawn Markup

At the bottom of our view loan component, we're still left with a little bit of editing functionality in a model. So let's go ahead and uncomment this. Now, I had to make a slight modification just so that you'll be able to see this model show up and that gonna bunch of errors in our browsers. So lets go ahead and save this, just that you can see what this gonna look like and interestingly enough. This is gonna look strikingly similar to what the ad looked like so we're gonna have another model pop down here and you're gonna see edit lawn works. What I had to do to get it to the point where you could at least take a look at it was I had to go into my component and I had to add this input statement. Now, we haven't talked much about it. We'll talk a little bit more about it in the next lesson. But just suffice to say that it's similar to the output that we talked about in the Add Lawn Component, where the output is like an event that we're raising. And the input is a way for us to take into our component some piece of data from somewhere else as an attribute. And that's what we wound up doing here, because within here, within the app-edit-lawn component, we have this lawn property that we're passing in. So we're passing in the selected lawn, and that's why we put that in there. But anyway, we don't really wanna be seeing this generic edit-lawn works. We know that it works, but now we need to add in some markup. So let's go ahead and see what we can do to fix that up. And what you're gonna see is that this is going to look strikingly similar to the add lawn component. So what we're really doing here is we're creating another form just like we did before we had a non submit. We have two-way binding on ngModel. We're going to have this lawn property or this lawn object that exists within our component, which is ultimately gonna be taken in from the parent. And that's why we needed that input into our component, so like I said, we'll take a look a little bit more at that in the next lesson. And we're just binding to these inputs, the existing title address and size and then we have a submit button here. So if all this is typed in correctly and we save it and we come back and refresh as you can see here, and I hit the Edit button. We're now gonna see another form here so we can see all the pre-populated data. We see home, we see 123 Main Street, we see 2000, so we see the appropriate edit dialog for whichever one we're selecting in here. So let's go ahead and add another one and just to see how this could work again. So I could say another home, and then we'll say maybe this is 555 Fifth St. And this one is going to be a thousand, 10,000 square feet, something really big. And hit Save. So now, we see we have two entries here and I can hit edit on the second one, and I'm gonna see another home 555 Fifth St. and 10,000 square feet. So now, we're creating the appropriate model for editing the details of a lawn. And now we want to be able to submit those changes to our backend service. Let's go ahead and take a look at that right now.

Back to the top