AngularJS Component
Component:
· The Components are self-contained, reusable pieces of code that encapsulates the data, behavior, and presentation of a specific part of your application.
· In AngularJS, components are built using a combination of HTML templates, CSS styles, and JavaScript code.

How to create components in AngularJs:
· Navigate to your Angular project directory.
· Create a new file, <component-name>.component.ts.
· At the top of the file, add the following import statement.
import { Component } from ‘@angular/core’;
· After the import statement, add a @Component decorator.
@Component({
})
· Choose a CSS selector for the component.
@Component({
selector: ‘app-component-overview’,
})
· Select the styles for the component’s template. In most cases, you define the styles for your component’s template in a separate file.
@Component({
selector: ‘app-component-overview’,
templateUrl: ‘./component-overview.component.html’,
styleUrls: [‘./component-overview.component.css’]
})
· Add a class statement that includes the code for the component.
export class ComponentOverviewComponent {
}
Message Component:
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { MessageComponent } from ‘./message.component’;
@NgModule({
imports: [BrowserModule],
declarations: [MessageComponent],
bootstrap: [MessageComponent]
})
export class AppModule { }
· In this example, we’ve imported the MessageComponent and added it to the declarations array of our app module. This makes the component available for use in our application.
· We’ve also specified the bootstrap property of our app module to be MessageComponent. This means that the MessageComponent will be the root component of our application.
Example:


This image shows the blue-colored “Hello, world!” message displayed within a <p> element on the page