- [Instructor] Our next objective is to create a form that will allow users to type in a new message and identify themselves which then will get sent to our backend with an HTTP post. Let's begin by creating a new component. Inside visual Studio Code, I'll right click on our app folder and go to New File. I'll call this component new-message.component.ts. I will just copy the content from our message component and modify it accordingly. Let's change the selector name to new-message. We can get rid of this template and let's change the class name to NewMessageComponent. We also don't need the messages array, we'll get rid of that. And we'll get rid of the ng on init. We are left with the decorator and a class with a constructor. Next let's register this component with our main module. I'll open up app.module and first let's import it. And then let's register it with our declarations. Finally, let's render it in our app component, so let's open up app.component.ts. And once again let's import it and we can add it above our existing messages component. I'll use the selector we set earlier of new-message. And I'll also replace Hello name and a header to Message Board. Then I'll put everything on its own line. Finally I'll get rid of the name property from our class. Let's save this and give it a try. If that's working, let's create the layout for our new message form. Let's begin by creating a new card and as before as with our other component, we will give it a margin of eight pixels, so let's go to our NewMessageComponent and create an md-card. If I were to set an in line style in the md-card, since we have the same in line style inside our messages component, as you can see here on line eight, we would then have duplicate code between the two components. It's time to consolidate these two styles into one and the best place to do that is in our styles.css. So, let's open that up. Let's create a new style class called card. And I'll set the margin to eight. And we can close that up. Now in the md-card tag, we can just set that to class card. We can also go back to our message component HTML and remove that style and add the new card class. Let's make sure that everything looks okay after saving it. As you can see, the margins are working for both the message list and for our new message which has not been populated yet. Next let's add the card content element. So, I'll just copy that from our messages component and I'll paste it into our md-card element inside new messages. As with the md to mat breaking change, there is also another breaking change for forms. Instead of using mat-input-container to wrap our inputs, we need to use mat-form-field instead. Inside our md-card-content element, let's get rid of the original message.text. And we'll replace it with an input. In order to use Angular material styles for input, we'll need to create an md-input-container first, so let's add that to line nine. And within that we can add in our input. And it will require the md-input tag. We'll also set up placeholder with a value of name. Let's copy these three lines from line number nine to 11. And paste 'em below. And now can add a text area for our message. And I've also changed the placeholder text to message. And finally I'll add an ending tag to textarea. Let's save that and give it a try. As we can see, both the input and the text area are showing now. Finally, we can add an md-card-actions which will allow us to properly position buttons. Let's add that below our last md-input-container, so on line 15 we'll add an md-card-actions. And we'll end the tag as well. I'll also indent everything within md-card-content to make it more readable. And we can add a button with the md-button tag. And I'll also add a property called color. And set that to primary. So that we get slightly more contrast in our button against the background and finally I'll add some text for our bottom called POST in all caps. Let's give that a try. And as we can see, we have our POST button and if I hover over it, we get our material styles applied. That looks pretty good for now. Next let's see how we can access these values in our class so we can get ready to send them over to our backend.
- Setting up the infrastructure
- Displaying data in Angular 2
- Refining your layout with Angular Material
- Getting your data from Node.js
- Saving data to a list
- Creating the component
- Getting your input data
- Creating reactive forms in Angular
- Creating a security middleware
Skill Level Intermediate
Q: This course was updated on 10/17/2017. What changed?
A: We updated five videos to reflect changes to the setup and data retrieval and display processes in Angular 2. For example, instead of using a Git Angular template, the updated course uses the Angular CLI to generate a starting template, for a smooth runtime experience.