Join Alexander Zanfir for an in-depth discussion in this video Our first Angular component, part of Building Applications with Angular, ASP.NET Core, and Entity Framework Core.
- [Instructor] In this chapter we'll create a form that will allow us to submit a new question to our backend. Eventually these questions will be part of quizzes that other users can take. But in order to create our new question form, we first need to create an Angular Component that will contain the html and TypeScript code for our new question form. A component will contain both the visual html template we built and the TypeScript code that will make our components function. Components are also the main type of elements we will be building in our app, next to services, directives and modules.
So let's begin by making the new components. Make sure you have your app folder selected inside your source, then let's click on the new file button and we'll call it question.component.ts. First thing we will need inside our component is the component library from Angular. So let's import that from Angular Core. Now let's create a component decorator. The decorator allows you to mark a class as an Angular component and provide any additional metadata on how the components should behave.
Next let's define a placeholder template. And we'll alt add a property to our decorator called template. And a placeholder value, maybe this is our question. Finally, let's create the class we are decorating. So I'll start with export, then class, and we'll call the class question component. And that's all we need for now, so I'll save that. There are a few ways to use components, so let's start with the simplest.
We will use it in our main app components and display it as a sub or child component. In other words, our main app component will be composed of the question component. And we've seen our app component earlier, when we changed the title from app to my app. And our question component will be a child component inside our app component. Since the template for our app component is inside an html file, let's open that up. Let's scroll down to the bottom, and below everything I'll add a new element and call it question.
But how does Angular know about an element called question? What defines it? Nothing for now, so let's fix that. We have to define a selector in the component decorator just like our app component has a app route selector. And we can see that on line four. We need a selector inside our question component decorator. So let's add that. And I'll call it question.
Now we can see that or selector question matches the element inside our template question. If we try to run this, we will get an error. Let's take a look at it. So inside our browser, let's take a look at the console and we're getting an error, question is not a known element. So there's a few extra steps we need to do in order to use that component. Back inside our editor, let's close out the html file and let's look in our app components.
As we can see, we first need to import our question component. So I'll do that on line two. Let's save that and give it another try. And we're still getting the same error, question is not a known element. The last thing you need to know is that every component has to be registered with our main module in order for it to be used in other components.
Let's take a look at our main module. We'll do that by opening up app.module.ts. And here we can see the decorator ng module. Inside the ng module decorator, we can see a list of declarations. We simply need to add all our components here to register them. And of course in order to access our question component inside our app module, we need to import it first. So let's go down below line four and add that.
And I don't like to use semicolons, so I'm removing them as we go along. But that's just a personal preference, so you can choose to leave them if you'd like to. Now let's go ahead and add our question component to our declarations list. Save that and then let's give it a try. Now we can see that we are no longer getting any errors in the console and we are seeing our question components placeholder template. At this point everything's working.
Next let's take a look at how to create a form in order to submit our question.
- Creating and configuring the Angular project
- Creating forms with Angular
- Creating get and post routes in an ASP.NET Core controller
- Updating Angular service to post to API
- Persistence with Entity Framework
- Displaying and editing data in Angular with ASP.NET Core
- Navigating to different views in Angular
- Associations between entities with Angular and Entity Framework
- Setting up Identity Framework