Forms in Angular are not much different from standard HTML

forms that you might be used to.

They all have the same paths.

Radio buttons, checkboxes, inputs, text areas, dropdowns, and buttons.

Let's dive in.

In our application, the comments are included as part of the entry component.

This is fine for our use case.

But, we should not include the comment form as part of the entry component.

Let's create a separate component for the comment form.

We'll do this in the entries,

entry directory, where we'll create two new files.

entry-comment

-form.component.ts.

And then,

entry-comment-form.component.html.

We'll be adding this component to the entry components soon enough.

In entry-comment-form.component.ts

we'll need to stub out the skeleton of a component.

Import component.

From, angular/core.

Then create a class

EntryCommentFormComponents.

It doesn't have any properties yet.

Using the Component Decorator We'll

set the selector to app-entry-comment-form,

And the components.html file.

Entry-comment-form.component.html.

Remember to export the class.

Now, open up the index.ts file in the entries directory, and

export this new component.

Remember, we do this to make the component available from the entries directory so

that the app module doesn't have to dig through the whole directory path.

If we were to change this directory structure in the future,

we'd only need to fix it in one place.

In appmodule.ts, we need to import the EntryCommentFormComponent.

Then, we need to include it in our declarations array.

Our new component is ready to use.

Let's add it to the entry component HTML file so we can start building our format.

If you're not already running the depth server, go ahead and

start it now using npm run serv.

Let's take a look at the browser.

And if we did everything right, we shouldn't see anything in the console,

now let's go back to the entry comment form.component.html.

We can start building our all form here.

We'll start off like any other HTML form, with the form element.

We don't need to give it any attributes for now.

Behind the scenes, Angular with pick up on the form element and

apply the NG form directive, which is part of the forms module we installed earlier.

Let's add a names input.

There is nothing specific to angular here.

Next, we'll add a text area for incoming message.

And then a submit button.

Our fun won't work right now but the basic layout is there.

You're doing great.

In the next video we'll connect the form with the code behind the scenes using

two-way data binding.