Overview Of Angular5 Components

Introduction

In this blog we are going to discuss about the basic components of Angular5, structure of component and will demonstrate to create custom component.

Getting Started

Angular components are the basic building blocks of Angular5 app, it reside within the /src/app folder. Angular5 components consists a component decorator, which includes properties that allow you to define the template, CSS styling, animations, etc.. and a class, which is where your component logic is stored. It also contains any necessary imports like metadata needed by the component.

The template in components represents a view which is a simple HTML page for creating a user interface. The class nothing but codes which support view and is created by TypeScript. Like any other program language, the class also contains data property and methods.

Metadata contains information about classes, it decides whether a class is a component or regular class and is defined by decorated. A decorator is a function which provides information about the classes attached to it. Below code is the example of basic component of Angular5.

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

Custom components can be created in Angular5, the below command line is the example of creating component in Angular CLI.

 $ ng generate component ComponentName  
 $ ng g c ComponentName  

Thanks