Menu

Create Component

Posted: November 24, 2021. | By: Admin

In angular2 we are using component to write Business logic of  application and extends with (.ts). Each application consists of Components. Each component is a logical boundary of functionality for the application.

• Class − this is like Java class which consists of properties and methods.
• Template − this is used to define the HTML content in same page to view which is displayed in the application.

• @Component ({ 

     selector: 'my-app', 

     template: '<h1>hello</h1>' 

  }) 

• TemplateUrl: this is used to define the html content in different html page and hear, provide the html page URL in component.ts page like below example.  
• Constructor-this is used to declare the imported services(custom/predefined)  hear to utilize those services in your business logic(component) page 

Example:

app.Component.ts:                 

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

import { AppService }  from './app.service';

@Component ({ 

   selector: 'my-app', 

   templateUrl: 'app/app.component.html' 

}) 

export class AppComponent { 

   appTitle: string = 'Welcome';

constructor(private appService : AppService){

} }