Shalvin Interests: February 2017

Thursday, February 2, 2017

Angular 2 Contact Management: Part 1 Getting Started

appmodule.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

appcomponent.ts

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

export class Contact {
  id: number;
  name: string;
  spec:string;
}

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>{{contact.name}} details!</h2>
    <div><label>id: </label>{{contact.id}}</div>
    
    <div>
      <label>name: </label>
      <input [(ngModel)]="contact.name" placeholder="name">
    </div>
     <div>
      <label>specialization: </label>
      <input [value]="contact.spec" placeholder="name">
    </div>
   
    `
})
export class AppComponent {
  title = 'Contact Management';
  contact: Contact = {
    id: 1,
    name: 'Shalvin',
    spec: 'Angular'
  };
  
  
}

index.html

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>