There are several analogies to define components, but consider them as lego blocks used to create a final well-structured product. In simple terms, Angular Components are the building blocks of an application. They define different aspects of the user interface. This article on Angular Components will cover the following topics:
- What Are Angular Components?
- Creating Your First Angular Component
- Component Decorator Metadata
- Demo
What Are Angular Components?
Components are the building blocks of a UI in an Angular application. These components are associated with a template and are a subset of directives.
The above image gives the tree structure of classification. There’s a root component, which is the AppComponent, that then branches out into other components creating a hierarchy.
Here are some of the features of Angular Component:
- Components are typically custom HTML elements, and each of these elements can instantiate only one component.
- A TypeScript class is used to create a component. This class is then decorated with the “@Component” decorator.
- The decorator accepts a metadata object that gives information about the component.
- A component must belong to the NgModule in order for it to be usable by another component or application.
- Components control their runtime behavior by implementing Life-Cycle hooks.
The above image shows an App component, which is a pure TypeScript class decorated with the “@Component” decorator. The metadata object provides properties like selector, templateUrl, and so on—the templateUrL points to an HTML file that defines what you see on your application.
In the index.html file, <app-root> tag corresponds to component’s selector. By doing so, Angular will inject the corresponding template of the component.
Creating Your First Angular Component
- To create an Angular Component, Angular CLI is used. In the terminal, type in the command,
ng g c component-name
- This will create a folder named component-name with four files.
You’ll also receive a message:
The update message indicates that the component created is included in the declarations array of the main component.
It is crucial for Angular to know which component is to be run next and its features. For that, some metadata is created. The next section addresses the component metadata.
Component Decorator Metadata
As mentioned earlier, the @Component decorator accepts a metadata object that provides information about the component. Here’s a list of properties of the metadata object:
@Component({
selector: 'app-root',
template: `<h1>Hello! Welcome</h1>`,
templateUrl: './app.component.html',
styles: [`
h3{
color: blue;
}
`],
styleUrls: ['./app.component.css']
Selector
It is the CSS selector that identifies this component in a template. This corresponds to the HTML tag that is included in the parent component. You can create your own HTML tag. However, the same has to be included in the parent component.
Template
It is an inline-defined template for the view. The template can be used to define some markup. The markup could typically include some headings or paragraphs that are displayed on the UI.
TemplateUrl
It is the URL for the external file containing the template for the view.
Styles
These are inline-defined styles to be applied to the component’s view
styleUrls
List of URLs to stylesheets to be applied to the component’s view.
Providers
It is an array where certain services can be registered for the component
Animations
Animations can be listed for the components
Demo: Creating an Angular Component
Now that you have a good understanding of Angular components let me help you create an application using them.
Step 1: First, create a folder in your application to store all your components in.
ng g c components/new-component
Observe that the extension .component is appended to indicate that it is indeed a component.
Step2: Within the component, open the new-component.component.html file to type in whatever you’d like to see on the browser.
<h1>Hey! I'm the first component</h1>
Step3: In the new-component.component.ts file, copy the selector property to incorporate it in the app.component.html file.
@Component({
selector: 'app-new-component',
templateUrl: './new-component.component.html',
styleUrls: ['./new-component.component.css']
})
In the app.component.html, which is the root component, go ahead and define the custom HTML tag. This indicates that the component created is being incorporated for the final render.
h1>Welcome to this tutorial on Angular Components</h1>
<app-new-component></app-new-component>
You can also define any styling conventions for the component in the CSS file.
h1 {
text-align: center;
}
Once you execute the ng serve command, the output looks something like this.
You can create multiple components and define the tags in the app component. The components are executed sequentially.
Here, I’ve created another component within which I’ve embedded the simplilearn logo.
<h1>This is the image component</h1>
<img src= "assets/Angular_logo.png" class="center">
I’ve also specified styling conventions in its corresponding CSS file.
h1 {
color: green;
text-align: center;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
The final output looks like this,
Next Steps
This article on Angular Components helped you get a brief insight into the concept of Components. But to learn more about Angular in its entirety, certification is highly recommended and could act as a catalyst for your coding career. Simplilearn's Angular Certification Training Course will help you master front-end web development with Angular. You will gain in-depth knowledge of concepts like facilitating the development of single-page web applications, dependency injection, typescript, components, and directives with this Angular Course. You will also have the opportunity to apply your skills by building a real-time application.
If you have any questions or feedback, let us know in the comments section of the What is Angular article. Our experts will get back to you immediately.
