DEFAULT HEADER TEXT
Angular is a component-based framework, and we are going to show you how to create a new Angular component within that framework. An Angular application will contain one or more components, and each has a specific task. We begin with one main component called the parent, and all others are child components of that parent. A child can also contain and parent other child components.
It might be easiest to compare Angular components to an automobile, wherein the car is the main parent component, and the door, headlight, carburetor, and fuel pump are all child components. A car door also contains window controls and an opening mechanism, which are child components of the door component. Components are similar to classes.
Create a New Angular Component
Let’s take a look at what you’ll need to do to create a new Angular component.
Start a New Project
When creating an application, or website with the Angular CLI, the first thing you’ll need to do is create a new Angular component, which is what we’re going to go over right now. We’re going to start with a new project created by the Angular CLI. If you’re not sure how to start a new project with the Angular CLI, we recommend going over our article Angular CLI For Beginners – Your first Angular Application, then come back here to continue.
With the new project created, we can move into that directory with the command cd my-first-angular-application and run the command ng serve to see our application in the browser. If you look at the page now, you’ll notice that it’s a nice looking website for the Angular framework. It provides some examples, as well as links to get more information.
Understand the Parent Component
When we created our new project using the Angular CLI, the CLI created the parent component for us. The name of the component is AppComponent, and it can be found in the file app.component.ts and should look like Example 1.
Example 1
https://gist.github.com/kevinchisholm/7deab755ab350a625253d2201d785b8b
This is what that file is saying:
- Import a new empty component from the Angular core.
- Name the component AppComponent, and give it one property called title.
- Set the property title to equal my-first-angular-application.
- The component will do what it does when it sees the tag app-root.
- What it does will be contained in the file app.component.html.
- Any styling that is required by this component is in the file app.component.css.
If we navigate to the main index.html file and look at the code, it should look like Example 2.
Example 2
https://gist.github.com/kevinchisholm/8b186020f06f024237924667ef98a371
If we look at the code on this page, we’ll see the tag app-root that we said would tell the component to do what it does. The tag uses an HTML element, and a matching closing HTML element must also be present. Since the app-root is the only tag in the body of the HTML page, we can safely assume the component is responsible for creating the entire page. The working component is even more evident if we change the file to look like Example 3.
Example 3
https://gist.github.com/kevinchisholm/34afc2b03af39359c8b2ad6628ed33d4
Once we change the page to look like Example 3, we can see the angular component is indeed creating all of the HTML for this website.
It’s also interesting to note that the component does not hold up the rest of the HTML on a page. If you were to refresh your browser page, you would notice that the Angular component takes a little bit longer to load than the rest, but the “End” text we placed in the code still shows up before the component. If the component held up the HTML, the “End” text wouldn’t show up until after the component was loaded. We’re going to delete the extra code we used in Example 3, though, because we don’t need it.
Since we have shown that the component is responsible for creating the web page, we should be able to find the code for the page in the app.component.html file. If we navigate to the app.component.html file, we can see that it does contain the code for the website. I’m not going to post it here because it’s a large file. One thing that is interesting to notice about this file, though, is that the CSS is included with the HTML and should be in the app.component.css file in a real project.
Register the Component as an Angular Module
One more thing that we need to discuss that applies to all components, including the parent, is the need to register them as an angular module in the app.module.ts file. If you look at the code in the app.module.ts file, you should see something that looks very much like Example 4.
Example 4
https://gist.github.com/kevinchisholm/bc1aee0b8daf76eee4f491ec52830e9c
The important thing to notice about this file is that we’re importing the AppComponent component. Declare it as an Angular module and make it the bootstrap, which means it’s the main component that starts the Angular application.
Delete the Boilerplate Website
There may be times when you want to modify the boilerplate page, and there are plenty of excellent examples in the code that we might use in the future, to help demonstrate an idea, but for the most part, you’re going to want to start with a blank page and build your application from there.
To remove the boilerplate website, navigate to the app.component.html file, and delete all of the code in that file. Once you have done that and save the file, you should only see a white page in your browser.
Create a New Component File
In Angular, each component gets its own file, so the first thing we need to do is create a component file. The convention for naming these files is, name dot component dot ts. You can see, for example, the main component AppComponent is in a file named app.component.ts.
We’ll call our component MyFirstComponent, so we’ll put it in a file called my-first.component.ts. The easiest way to create the file is to copy the app.component.ts file and rename it so that you can modify the code within, to create a new component. Go ahead and create that file now, and place it in the same directory as the app.component.ts file.
You’ll need to modify the code inside so it looks like Example 5.
Example 5
https://gist.github.com/kevinchisholm/ea71f023de08fefd135c64fd02f55f2e
As you can see, this new component looks very much like the main parent component, as all of your components will.
- Every component will need to import the basic component frame from the Angular core.
- Every component will need a name. In this case, the name is MyFirstComponent.
- Every component can have as many properties as it requires. In this case, we have no properties set yet, except the parent component AppComponent, which has one property called title.
- Every component will require a unique selector, which in this case, is app-first-child.
- Every component will require an HTML file to hold its working code, and the CSS file to decorate that code.
You are not required to follow the naming convention for the HTML file or the CSS files, nor are you required to keep them in the same directory. As long as you have it labeled correctly in the component and the path to the file is correct, it will work. You can also put the code for either in as a literal, bypassing the need for external files, but we recommend using external files to keep the code clean, and using the naming convention so that you remain consistent across all of your applications.
If you haven’t done so already, you’ll need to create the empty HTML and CSS files we named in the component now, and place them in the same directory as the my-first.component.ts file.
Register the New Component as a Module
Just as the parent component needs to be registered, child components will also need to be registered as modules. Registration is how angular knows that your component is part of the application.
To register your module, navigate to the app.module.ts file, and change the code to look like Example 6.
Example 6
https://gist.github.com/kevinchisholm/0f5f1abe4e5d27ea43ed47b592edccdb
In Example 6, you can see that we’ve imported our new component, and included it in the module declarations. Once we’ve declared our component as a module, we are finished.
Test the Components
Now that the new Angular component is complete, we can add some code so that we can see it in action.
Test AppComponent
First, let’s test the parent component AppComponent by adding some code to the app.component.html file. Update your file to add the line of code in Example 7.
Example 7
https://gist.github.com/kevinchisholm/12afb5f52bf64b0ba306be983cbd9c2b
If you check your browser after adding this code, you will see that it now correctly displays our message, showing us that the AppComponent is still working.
Test MyFirstComponent
To see our new component in action, first, navigate to the my-first.component.html file and add the line of code seen in Example 8.
Example 8
https://gist.github.com/kevinchisholm/c7c65166de26d682e51f8b43004a4693
If you check your browser now, you will not see anything new. The reason that nothing is changed is that we need to have our parent component call our new child component, using the selector we have chosen: app-first-child.
Navigate to the app.component.html file and update the code to look like Example 9.
Example 9
https://gist.github.com/kevinchisholm/b5ec2e36b4b318e912eeebceb923c8f1
You can see in Example 9, that we have used our selector app-first-child inside of an HTML element to call our child component from inside the parent component. If you check your browser now, you will see that our new component is displayed.
Worthy of Note
The parent component can only be called once, as we can see if we update our index.html file to look like Example 10. Angular will only respond to the first call.
Example 10
https://gist.github.com/kevinchisholm/5810be4ee1ac324fa6f32d6622cfe018
The child component can be called an unlimited amount of times, as we can see if we update our app.component.html file to look like Example 11.
Example 11
https://gist.github.com/kevinchisholm/8d3dd7554a33e6751032df8be4ef79a0
The child component can only be called by the parent component, as we can see if we update our index.html file to look like Example 12.
Example 12
https://gist.github.com/kevinchisholm/cdffc6e306aaa182d36908c793a9e5a4
Conclusion
As you can see, it’s not very difficult to create a new Angular component, and creating a second, third, or 100th component will follow the same steps. Components keep our code modular and reusable. They also make it much easier to understand later after you’ve been away from the code.
For many of the guides to using Angular CLI that we have created, you begin here, with a new, empty component that can be used for trying out examples. If you are going to move on to our more advanced guides, we recommend saving this project so you can use it as a starting point.
We hope you’ve enjoyed reading this guide on how to create a new Angular component, and have learned something new. If so, please be sure to share it on Facebook and Twitter.
