Angular For Beginners - Part Two - Overview Of Component

In this following article, I will explain about components in Angular and their usage and we will have a demo on how to create a component. Before we get started with Angular components, you can have an overview of the basics of Angular from the following link.

Components

Components are the most important basic UI building blocks for an Angular project. They are used to design and build an application. Every Angular app contains at least one component and it is known as the parent component that is created along with creating a new Angular project. Or, we can say, it is a root component. The parent component will have the file structure that consists of the following files by default on creating an app.

app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app. module.ts
app-routing.module.ts

The app-routing.module.ts file is an exception. If the user selects Angular routing on the project setup, the files will be created and added to the files folder.

The default component will have these files as mentioned above. Let’s take a look at the usages of the files in the folder.

app.component.css => CSS file for the styling purposes.
app-cmp.component.html =>the HTML file is created.
app -cmp.component.spec.ts =>this file is used for unit testing.
app -cmp.component.ts =>in this file we can define module, properties.

Creating a new component

First, we need to create a new Angular application. The Angular CLI has a command to create a user-defined component. The component which is created by default is known as parent and the next components which are created by us are the child components. Now, we will create a new Angular application and a new child component. For creating a new Angular application, we can use the following command.

ng new component

For creating a child component, we can use the following command.

ng g c child

The mentioned above command is used to create a child component. We can open up the app.module.ts file. In this app.module.ts file, we can see some library files which are imported automatically when we create components. In some cases, we need to manually import the libraries. One of such scenarios is while using forms. We will see about Forms later in an upcoming article.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ChildComponent } from './child/child.component';
@NgModule({
declarations: [
AppComponent,
ChildComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

In this app.component.html, we can see that it has the HTML code and the variable title inside of curly braces. It gets replaced with the value which is present in the app.component.ts file. If you open the app.component.ts file, you can see in the class file that the application name is assigned to the title. This is known as binding. We can have a discussion about binding in an upcoming article.

<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2>
<a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a>
</h2>
</li>
<li>
<h2>
<a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a>
</h2>
</li>
<li>
<h2>
<a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a>
</h2>
</li>
</ul>
<router-outlet></router-outlet>

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'component';
}

Now, we will compile the project and let’s see the output in the browser. Use the following command in terminal and view the output in the browser.

ng s -o

Now, we can see the output and information provided in the parent component is displayed. Now, let us open the child.component.html file. We can see a line of a code which is saying in a tag, child works.

Here, we need to include the selector child component inside of root component so that the content of child component is displayed after the parent component, for that the selector child component is included inside the parent component like mentioned below and we can see the output again showing that the child component is now working.

<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2>
<a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a>
</h2>
</li>
<li>
<h2>
<a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a>
</h2>
</li>
<li>
<h2>
<a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a>
</h2>
</li>
</ul>
<app-child></app-child>
<router-outlet></router-outlet>

I hope the beginners will have an understanding of what an Angular component is and how it can be used. In my next article, we will be covering data binding. Please comment below if you have to say something. This will help me to improve in the next article.

<<Angular For Beginners - Part One