Learn About Components In Angular

In this article, you will learn in detail about components of Angular.

What is component and uses of Component?
What is Template?
What is Class?
What is Decorator?
Default Component Code Explanation
Step by Step Creation of New Component

What is Component?

The component is the heart of Angular 2 and above versions. Coding in Angular 2 and all above versions goes through components. It is the basic building block of Angular programming. It is a group of Template, Class, and Decorator.

Angular is written in TypeScript so in Angular we follow the full syntax of TypeScript.

Default component name is app.component.ts .

app.component.ts is root component.

With the help of component, we can distribute or break the logic and reuse specific parts into other components of the component.

What is Template?

A template is a group of HTML, directives, and data binding which helps to render UI (view).

What is Class?

The class is the same as similar classes of C# and Java. Here we follow the syntax of TypeScript. Angular is using the full syntax of TypeScript. The class contains properties, variable and method, and functions.

What is Decorator?

Decorator symbol starts with @. With help of @Decorator, we define metadata components like this:

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

Component Code Explanation

app.component.ts code

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

Component In Angular

LINESR.NO.	LINE CODE	CODE EXPLANATION
1	import { Component } from '@angular/core';	This line will import the functionality of component from @angular/core library. This is the same as writing USING in C# and IMPORT in JAVA languages.
2	import {member} from './member';	This line will import the class called “MEMBER”.
3		Blank line
4	@Component({	Define @decorator of a component. Inside this bracket we define selector, template (HTML) code, and style sheet code.
5	selector: 'app-root',	Selector means we call or render this component in HTML with this name. <app-root></app-root>
6	templateUrl: './app.component.html'	Template URL defines HTML file path where we code our HTML code.
7	styles: ['./app.component.css']	StyleUrls define CSS file path where we define CSS code which attached above said HTML file.
8	})	End of @Component.
9	export class AppComponent {	Create a class called AppComponent, we had prefixed this with export because in other classes we call this class easily.
10	title = 'app';	Define title property and assign value “app”
11	}	End of class

We can divide our component into two parts:

PART 1

Component In Angular

In all components of Angular part 1, we defined our various imports and defined the @component decorator.

PART 2

In Part 2 we had defined our class functionality like property and method.

Hope you understand Component very well.

6 Comments

Join the conversation! Your thoughts help the community grow.

Roshan Mule8y ago
Hello sir, Thanks for this article. I started learning angular and this article is very helpful for me.
- Manoj Kalla8y ago
  Thank You...Roshan sir
Debasis Saha8y ago
Nice Post.... awaiting for the next part...
- Manoj Kalla8y ago
  Thank You Debasis Saha sir
Manav Pandya8y ago
All in one , Great post sir Manoj Kalla
- Manoj Kalla8y ago
  Thank You Manav Pandya Sir