Creating a traditional template form in Angular.
- [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 ngOnInit. We are left with the decorator, and the 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.comonent.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" in the header to "Message Board". Then I'll put everything on its own line. Finally, I'll get rid of the name property for my 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 with our other component, we will give it a margin of eight pixels. So let's go to our new message component, and create an MD card. If I were to set an inline style in the MD card, since we have the same inline 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 we 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. 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 a placeholder. With a value of "Name". Let's copy these three lines from line number nine to 11. And paste them below. And now we 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 text area. 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 in 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 button. Called POST in all caps. Let's give that a try. As we can see, we have our POST button, and if I hover over it, we get our materials 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.