How to create simple component in Angular 2

admin Angular 39 Comments

First create a file firstcomponent.ts inside app foldder and then import the Component module and type following code in our type script

 
import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>Hello World First</h1>'
})
export class FirstComponent { }

For any component we need at least three things
1) Decorater @Component
2) View selector
3) Class AppComponent

Now in app.modules.ts file add this files

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FirstComponent }   from './firstcomponent';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ FirstComponent ],
  bootstrap:    [ FirstComponent ]
})
export class AppModule { }

and this is for main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

You can download the angulras 2 files from this link Angular 2 files

39 thoughts on “How to create simple component in Angular 2”

Leave a Reply

Your email address will not be published. Required fields are marked *