First of all my special thanks to the C# Corner community and everyone for supporting me and encouraging me to post articles. In the previous
article we discussed the introduction of Angular 8 and its features, set up Angular 8 and finally created a new project in Angular 8 using CLI. You can find more about that article from the following link. I hope my previous article was helpful to the beginners. Now, in this article, I will explain about creating components and uses of it.
So, first of all, we can take an overview of what is a component. The component is a basic building block of a User interface (UI) of an Angular application. Basically component is made up of three parts. They are Template, Class, and Metadata.
Template-> The template represents the view. This will be great in using HTML since it will be used to build the UI in our application.
Class-> The class is a code that supports the view; it can be built-in Typescript. It contains Data properties and methods that can be used to control the logic of the view.
Metadata-> The metadata is nothing but information. This is just a function that provides information about a class attached to it. It is defined by using a decorator which is a feature in typescript. If we put together a template, class and some metadata we get an Angular component.
Angular provides a facility for developers to create their own components. Multiple components can be created by using Typescript. Basically components views are based on MVC (Model View Controller) architecture and it is based on the following ways as mentioned below.
Reasons for the need of component-based framework
- The main reason is that we can reuse the component again and again. A component-based architecture approach allows the Angular application to be used anywhere we need an Angular application.
- It improves the development speed. Generally, an Angular application will consist of one default application which we can call as parent component; in other words we can say it is a root component. Speaking of default component, we can use the default component for building a simple page web app, but when it comes to major requirements we can use the multiple numbers of components and we can use the components in required places in Angular applications.
- A new Angular application will contain the default files as I mentioned below, these files will be created on creating an Angular application.
![]()
- app-component.css - The app.component.css is a default parent component file in which we can use to add styles to the application.
- app.component.html- The app.component.html file is where we used to code for creating responsive WebPages.
- app.component.ts - The app.component.ts file where we can define and work with modules and properties.
- app.component.specs.ts – The app.component.spec.ts file is mainly used for testing purposes specially used for unit testing.
Now, here comes the main part, now we have created a new Angular application.
And now we are going to create a child component by using this following command. Open a terminal and enter the following command.
ng g c component name
Here the component name states the name of a component.
So as you can see we have created a new Angular project and now we are going to create a new child component. So, same as creating a component by using the following syntax and in which we will use the inside of parent component.
For using child component in the inside of a parent component just open-> app.component.html and enter the following command.
<app-child></app-child> and compile and run the project by using the command ng s -o and we can see the output in the browser representing the component content to be projected.
Summary
In this article, we have seen about components, how to create them and use them. I hope this article will be useful for you and in my next article we will be seeing about data binding. If you have any queries please comment below.