What Is Component in Angular?

Introduction

In this article, we’ll understand how to build our first basic component, and step by step We create a component. then arrange them to form our application, define metadata. and import what we need from external modules and we discover how to Bootstrap the app component to our application.

What Is a Component?

An Angular components includes a template which lays out the user interface fragment defining a view for the application. so, It’s create with HTML and defines what is render on the page.in our following example. We use Angular binding and directives in the HTML to power up the view. We’ll understand binding and directives in an application module. and Add to that a class for the code associated with the view. The class is create with TypeScript. The class contains the properties or data elements available for use in the view.

For example, if we want to display a title in the view, we define a class property for that title. The class also contains methods, which are the functions for the logic needed by the view.

//app.component.ts

//import the dependancies 
import { Component } from '@angular/core';
//Metadata & Template
@Componenet({
      selector: 'root',
	  template:
	  <div><h1>{{EmployeeName}}</h1></div>
})
//class
export class AppComponent {
 EmployeeName: string = 'Michel';
}

The component also has metadata, which provides more information about the component to Angular. The metadata defines with a decorator as Angular components.

A decorator function that adds metadata to a class, its members, or its method arguments. So a component is a view defined in a template. its associated code defined with a class, and metadata defined with a decorator.

Creating the Component Class

A class is a construct that allows us to create properties with it’s type. that define the data elements and methods that provide functionality.

//app.component.ts

export class AppComponent {
  employeeName: string = 'John';
}

In our following example, We define a class using the class keyword followed by the class name. so, the common Angular convention is to name each component class with the feature name. then append the word component as the suffix. so it’s Also by convention, the root component for an application is called AppComponent. The export keyword exports this class, thereby making it available for use by other components of the application.

Defining the Metadata with a Decorator

@Componenet({
      selector: 'root',
	  template:
	  <div><h1>{{employeeName}}</h1></div>
})

When the class becomes an Angular component. then, we give it component metadata. so, Angular needs that metadata to understand how to instantiate the component, construct the view, and interact with the components. In our example define a components metadata with the Angular component function. Inside the TypeScript, we attach that function to the class as a decorator.

Decorator

The decorator is a function that adds metadata to a class, its members, or its method arguments.

@Componenet()

The decorator is a JavaScript language feature that is implemented in TypeScript. so, scope of the decorator is limited to the feature that it decorates. It is always prefixed with an @ sign. and Angular has several built-in decorators we use to provide additional information to Angular.

We use the @Component decorator to identify the class as a component. Since the decorator is a function, we always add parentheses. We pass an object to the component function as indicated with the curly braces. The object we pass in has many properties. We are only using two of them here.

Selector

If we want to reference the components in any HTML, we specify a selector. The selector defines the components directive name. A directive is a custom HTML tag.

Importing Class and Function

In our components we can use an external function or class, we need to define where to find it. We do that with an import statement. so, The import statement is part of ES 2015 and implemented in TypeScript. It is conceptually similar to import statement in Java or the C# using statement. The import statement allows us to use exported members from external modules and also it is part of ES 2015 implemented in TypeScript.

We use the import statement throughout our code to import any third-party library, any of our own modules, or from Angular itself. so, We can import from Angular because Angular is modular.

It is a collection of library modules. Each library is itself a module made up of several related feature modules. If we need something from Angular, then we import it from an Angular library module. like we import from any other external module. Use the following link if you want to view the list of available Angular library packages and their current versions.

import { Component } from ‘@angular/core’;
import { Component } from ‘@angular/animate’;
import { Component } from ‘@angular/http’;
import { Component } from ‘@angular/router’;

Creating the AppComponent

Let’s go to Visual Studio Code and open then we build our app component, which is the root component for our application.

When we build a class, we first type in the export keyword to ensure that other parts of the application can use this class. After that we type in the class keyword, then the name of the class. Since this is our application component class, we’ll follow conventions and name it AppComponent. Inside this class, we’ll define one property, the page title. We type the property name followed by a colon and the property data type, which for the page title is a string.

export class AppComponent {
employeeName: string = ‘John’;
}

After that, we need to define the component decorator above the class. The component decorator always begins with an @ sign, then the name of the decorator and we’re using the component decorator. The component decorator is a function so we’re going to pass in an object inside it.

import { Componenet } from '@angular/core';

@Componenet({
	selector: 'root',
	template:<div>{{employeeName}}</div>
})

export class AppComponent {
  employeeName: string = 'John';
}

Bootstrapping Our AppComponent

Bootstraps mean a self-starting process that loads and goes. We need to tell Angular to load our root component through a process that is called Bootstrapping.

Here, we need to set up the index.html file to host our application. Then we define our root Angular module to Bootstrap our root component. The Angular applications have an index.html file that contains the main page for the application. This index.html file is often the one true web page of the application.

The selector is the name of the component. when we use it as a directive in HTML and the template defines the HTML that we want to display.

//index.html
<body>
<root></root>
</body>

// app.component.ts

import { Componenet } from '@angular/core';

@Componenet({
	selector: 'root',
	template: <div><h1>{{employeeName}}</h1></div>
})
export class AppComponent {
 employeeName: string = 'Robin';
}

In the index.html file, we added the selector where we want our template displayed. A directive is a custom element. the HTML defined in the components template is inserted between the selector element tags and appears on the page.

Angular NgModule

The Angular modules help us organize our application into cohesive blocks of functionality and provide boundaries within our application. They also provide a template resolution environment. so we declare the AppComponent in an Angular module so the compiler can find it. We also use the module to Bootstrap our startup component. which is our AppComponent and we want our application to work in the browser. so we add Angular’s browser module to our Angular module’s imports.

 //app.module.ts
 
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
 
 @NgModule({
	imports: [ BrowserModule ],
	Declaration: [ AppComponent ],
	bootstrap: [ AppComponent ]
 })
 export class AppModule { }

We identify the class as an Angular module by attaching the NgModule decorator. and passing in metadata defining the details of this Angular module.

For the @NgModule decorator, the properties are arrays. In the declarations array, we define which of our components belong to this module. So, root application component, AppComponent, belongs to the application’s root Angular module. AppModule, so we declare it here. We can add other components here as well.

@NgModule({
	imports: [ BrowserModule ],
	declarations: [ AppComponent ],
	bootstrap: [ AppComponent ]
})
export class AppModule { }

So here, all of our components will be declared here. In the imports array, we define the external modules that we want to have available to all of the components that belong to this Angular module. External modules could be modules provided by Angular, a third party, or our own Angular modules. we have imported browser module, which every browser application must import. Browser module register is important to application service providers such as error handling. The Bootstrap array defines the startup component of the application, which is our AppComponent. The startup component should contain the selector we use in the index.html file.