Learn Components in Angular for Beginners

Introduction

In this article, we will learn about components in Angular applications. This article is the continuation of my previous article that is "Learn Angular's Folder Structure & Execution Flow For Beginners - Part Two". Before reading this article, please read my previous article for your easy understanding.

Whenever we create a new Angular application, by default a component will be created that is AppComponent which is a parent or root component.

By default, the application will come as a component, i.e. appcomponent within the src/app folder.

Learn Components In Angular For Beginners

Each component contains files such as:

app.component.html
app.component.css
app.component.spec.ts
app.component.ts

From the above files, we will write the HTML related code in app.component.html, CSS code in app.component.css, app.component.spec.ts file is used for testing the component functionality and business logic in app.component.ts.

In app.Component.ts we have @Component decorator class which instructs that this is not a normal class, but an angular class. @component contains metadata such as a selector, templateUrl, and styleUrls, if we want to write the application inline then we can write the HTML and CSS code in the same app.component.ts by using template and styles.

Selector

Here, the Selector contains the value from where the components can be rendered, each selector will have a unique name, we can provide our own selector name, by default app.component.ts selector will come with 'app-root'. If we want to navigate from one component to another component, we use the selector value for rendering. For example, if we want to navigate from the parent component to the child component. In the parent component app.component.html file, we use the child selector for rendering the child component.

templateUrl

The templateUrl contains the app.component.html file of the component, where we will write the HTML code.

styleUrls

The styleUrls contains the app.component.css file of the component, where we will write the CSS code, which will be applied only for the current component. If we are working with Inline code we use the below,

template

In this, we define the complete HTML code by using the below syntax.

Syntax

template: `<h1>It is a Inline statement</h1>`

Styles

In this, we define the complete CSS code by using the below syntax.

Syntax

styles: ['table {font-family: arial, sans-serif;border-collapse: collapse;width: 100%;}td, th { border: 3px solid #1a1717; text-align: left;padding: 8px;}']

If we want to create a new component, we will use the below command.

ng generate component Test
ng g c Test

Let's create a new component with ng generate component Test command.

Create a new component with ng g c Test1 command.

When we create a component say Test and Test1, it will be reflected in src/app folder with name Test, Test1 components folders.

The entries or registry will be added in app.module.ts folder, like below.

Let's see an example of a component, open the app.component.ts file and place in the below code.

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
EmployeeId = 1702356;
FirstName = 'Khaja';
LastName = 'Moizuddin';
EmployeeName: string = this.FirstName + this.LastName;
EmployeeDesignation = 'Software Engineer';
DateOfJoining: Date = new Date('Mon Apr 22 2016 07:44:57');
EmployeeAddress = 'Malakpet, Hyderabad';
EmployeePhone = 8019804474;
EmployeeAge = 29;
Salary = 20000;
City = 'Hyderabad';
CompanyName = 'Legato Health Technologies';
employeeList: any[] = [
{
EmployeeId : 103621,
EmployeeName : 'Khaja Moizuddin',
EmployeeDesignation : 'Software Engineer',
DateOfJoining : new Date('Mon Apr 22 2016 10:30:57'),
EmployeeAddress : 'Gacchibowli, Hyderabad',
EmployeePhone : 8019804474,
EmployeeAge : 29,
Salary : 10000,
City : 'Hyderabad',
CompanyName : 'Legato'
},
{
EmployeeId : 103622,
EmployeeName : 'Pavan Kumar',
EmployeeDesignation : 'S.Software Engineer',
DateOfJoining : new Date('Tue Jul 19 2012 09:27:45'),
EmployeeAddress : 'DLF City, Bangalore',
EmployeePhone : 9030344566,
EmployeeAge : 25,
Salary : 15000,
City : 'Bangalore',
CompanyName : 'Infosys'
},
{
EmployeeId : 165893,
EmployeeName : 'Vikas',
EmployeeDesignation : 'S.Software Engineer',
DateOfJoining : new Date('Wed Mar 02 2015 08:48:23'),
EmployeeAddress : 'Electronic City, Bangalore',
EmployeePhone : 9030344566,
EmployeeAge : 23,
Salary : 20000,
City : 'Bangalore',
CompanyName : 'TCS'
},
{
EmployeeId : 1045896,
EmployeeName : 'Vivek Sharma',
EmployeeDesignation : 'Delivery Manager',
DateOfJoining : new Date('Wed Mar 02 2015 08:48:23'),
EmployeeAddress : 'Madhapur, Hyderabad',
EmployeePhone : 9030344566,
EmployeeAge : 23,
Salary : 20000,
City : 'Hyderabad',
CompanyName : 'Microsoft'
}
];
}

Here, in the above code, we are creating employeeList object with type as any[]. The same object we use in our HTML code for rendering to HTML table.

Now open the app.component.html file and place the below code.

<h2>Components in Angular - Employee</h2>
<hr />
<table>
<tr>
<th>EmployeeId</th>
<th>EmployeeName</th>
<th>EmployeeDesignation</th>
<th>DateOfJoining</th>
<th>EmployeeAddress</th>
<th>EmployeePhone</th>
<th>EmployeeAge</th>
<th>Salary</th>
<th>City</th>
<th>CompanyName</th>
</tr>
<tr>
<td>{{this.EmployeeId}} </td>
<td>{{this.EmployeeName}}</td>
<td>{{this.EmployeeDesignation}}</td>
<td>{{this.DateOfJoining}}</td>
<td>{{this.EmployeeAddress}}</td>
<td>{{this.EmployeePhone}}</td>
<td>{{this.EmployeeAge}}</td>
<td>{{this.Salary | currency: 'USD': true}}</td>
<td>{{this.City}}</td>
<td>{{this.CompanyName}}</td>
</tr>
</table><br><br>
<h2>Components in Angular - EmployeeList</h2>
<hr>
<table>
<tr>
<th>EmployeeId</th>
<th>EmployeeName</th>
<th>EmployeeDesignation</th>
<th>DateOfJoining</th>
<th>EmployeeAddress</th>
<th>EmployeePhone</th>
<th>EmployeeAge</th>
<th>Salary</th>
<th>City</th>
<th>CompanyName</th>
</tr>
<tr *ngFor = 'let employee of employeeList'>
<td>{{employee.EmployeeId}} </td>
<td>{{employee.EmployeeName}}</td>
<td>{{employee.EmployeeDesignation}}</td>
<td>{{employee.DateOfJoining}}</td>
<td>{{employee.EmployeeAddress}}</td>
<td>{{employee.EmployeePhone}}</td>
<td>{{employee.EmployeeAge}}</td>
<td>{{employee.Salary | currency: 'USD': true}}</td>
<td>{{employee.City}}</td>
<td>{{employee.CompanyName}}</td>
</tr>
</table>

Here, we are using two HTML table to render the data from app.component.ts. In the second HTML table, to iterate from a list of employee objects we used, ngFor directive, which works similar to a Foreach loop. Here, we will iterate through the collection of employeeList and display each employee in HTML table.

Now open the app.component.css file and place in the below code.

table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 3px solid #1a1717;
text-align: left;
padding: 8px;
}

If we want to work with the inline code we need to keep all the HTML, CSS and Typescript code in only one file that is app.component.ts. Comment the code in app.component.html & app.component.css files. Here, we use @component metadata such as selector, template and styles whenever working with inline code. Open the app.component.ts and place the below code.

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h2>Components in Angular - Employee</h2>
<hr />
<table>
<tr>
<th>EmployeeId</th>
<th>EmployeeName</th>
<th>EmployeeDesignation</th>
<th>DateOfJoining</th>
<th>EmployeeAddress</th>
<th>EmployeePhone</th>
<th>EmployeeAge</th>
<th>Salary</th>
<th>City</th>
<th>CompanyName</th>
</tr>
<tr>
<td>{{this.EmployeeId}} </td>
<td>{{this.EmployeeName}}</td>
<td>{{this.EmployeeDesignation}}</td>
<td>{{this.DateOfJoining}}</td>
<td>{{this.EmployeeAddress}}</td>
<td>{{this.EmployeePhone}}</td>
<td>{{this.EmployeeAge}}</td>
<td>{{this.Salary | currency: 'USD': true}}</td>
<td>{{this.City}}</td>
<td>{{this.CompanyName}}</td>
</tr>
</table><br><br>
<h2>Components in Angular - EmployeeList</h2>
<hr>
<table>
<tr>
<th>EmployeeId</th>
<th>EmployeeName</th>
<th>EmployeeDesignation</th>
<th>DateOfJoining</th>
<th>EmployeeAddress</th>
<th>EmployeePhone</th>
<th>EmployeeAge</th>
<th>Salary</th>
<th>City</th>
<th>CompanyName</th>
</tr>
<tr *ngFor = 'let employee of employeeList'>
<td>{{employee.EmployeeId}} </td>
<td>{{employee.EmployeeName}}</td>
<td>{{employee.EmployeeDesignation}}</td>
<td>{{employee.DateOfJoining}}</td>
<td>{{employee.EmployeeAddress}}</td>
<td>{{employee.EmployeePhone}}</td>
<td>{{employee.EmployeeAge}}</td>
<td>{{employee.Salary | currency: 'USD': true}}</td>
<td>{{employee.City}}</td>
<td>{{employee.CompanyName}}</td>
</tr>
</table>`,
styles: ['table {font-family: arial, sans-serif;border-collapse: collapse;width: 100%;}td, th { border: 3px solid #1a1717; text-align: left;padding: 8px;}']
})
export class AppComponent {
EmployeeId = 1702356;
FirstName = 'Khaja';
LastName = 'Moizuddin';
EmployeeName: string = this.FirstName + this.LastName;
EmployeeDesignation = 'Software Engineer';
DateOfJoining: Date = new Date('Mon Apr 22 2016 07:44:57');
EmployeeAddress = 'Malakpet, Hyderabad';
EmployeePhone = 8019804474;
EmployeeAge = 29;
Salary = 20000;
City = 'Hyderabad';
CompanyName = 'Legato Health Technologies';
employeeList: any[] = [
{
EmployeeId : 103621,
EmployeeName : 'Khaja Moizuddin',
EmployeeDesignation : 'Software Engineer',
DateOfJoining : new Date('Mon Apr 22 2016 10:30:57'),
EmployeeAddress : 'Gacchibowli, Hyderabad',
EmployeePhone : 8019804474,
EmployeeAge : 29,
Salary : 10000,
City : 'Hyderabad',
CompanyName : 'Legato'
},
{
EmployeeId : 103622,
EmployeeName : 'Pavan Kumar',
EmployeeDesignation : 'S.Software Engineer',
DateOfJoining : new Date('Tue Jul 19 2012 09:27:45'),
EmployeeAddress : 'DLF City, Bangalore',
EmployeePhone : 9030344566,
EmployeeAge : 25,
Salary : 15000,
City : 'Bangalore',
CompanyName : 'Infosys'
},
{
EmployeeId : 165893,
EmployeeName : 'Vikas',
EmployeeDesignation : 'S.Software Engineer',
DateOfJoining : new Date('Wed Mar 02 2015 08:48:23'),
EmployeeAddress : 'Electronic City, Bangalore',
EmployeePhone : 9030344566,
EmployeeAge : 23,
Salary : 20000,
City : 'Bangalore',
CompanyName : 'TCS'
},
{
EmployeeId : 1045896,
EmployeeName : 'Vivek Sharma',
EmployeeDesignation : 'Delivery Manager',
DateOfJoining : new Date('Wed Mar 02 2015 08:48:23'),
EmployeeAddress : 'Madhapur, Hyderabad',
EmployeePhone : 9030344566,
EmployeeAge : 23,
Salary : 20000,
City : 'Hyderabad',
CompanyName : 'Microsoft'
}
];
}

Now run the application by using ng serve command and navigate to http://localhost:4200/ to see the output. We get the same output by using external files or by using inline code, whenever executed the code using inline by keeping all HTML, CSS, Typescript code in app.component.ts file. The below is the ouput with two different scenarios.

Conclusion

In this article, we learned the Components in Angular by using inline code with the metadata, such as selector, template & styles & as well as working with the external files with the metadata, such as selector, templateUrl & styleUrls, etc. We get the same output with two different scenarios.

In the next article, we will learn how to navigate between the multiple components.

Thanks, I hope this article helps you.