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