Angular 2 Contact Management Part 3: Components

contact.ts

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

app.component.ts

import { Component } from '@angular/core';
import {Contact} from './contact';


const CONTACTS: Contact[] = [
  { id: 11, name: 'Shalvin', specialization : '.Net' },
  { id: 12, name: 'Praveen', specialization : 'Big Data' },
  { id: 13, name: 'Anuraj', specialization : 'Asp .Net Core' },
  { id: 14, name: 'Praseed', specialization :'C++' },
  { id: 14, name: 'Yaneesh', specialization :'.Net' }
];

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>My Contacts</h2>
    <ul class="Contactes">
      <li  *ngFor="let Contact of Contacts"
        [class.selected]="Contact === selectedContact"
        (click)="onSelect(Contact)">
         {{Contact.name}}
      </li>
    </ul>
    <my-hero-detail [contact]="selectedContact"></my-hero-detail>
  `
})
export class AppComponent {
  title = 'Contact Management 2';
  Contacts = CONTACTS;
  selectedContact: Contact;

  onSelect(contact: Contact): void {
    this.selectedContact = contact;
  }
}

hero-detail.component.ts

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

import { Contact } from './contact';
@Component({
  selector: 'my-contact-detail',
  template: `
    <div *ngIf="contact">
      <h2>{{contact.name}} details!</h2>
      <div><label>id: </label>{{contact.id}}</div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="contact.name" placeholder="name"/>
      </div>
     
    </div>
     
  `
})
export class HeroDetailComponent {
  @Input()
  contact: Contact;
}

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { AppComponent }  from './app.component';
import { HeroDetailComponent } from './contact-detail.component';
@NgModule({
    imports: [
    BrowserModule,
    FormsModule
    ],
      declarations: [
        AppComponent,
        HeroDetailComponent
      ],
      bootstrap: [ AppComponent ]
    })
    export class AppModule { }

Angular 2 Contact Management Part 2 :Binding to Array of Class

app.module.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 { }

On to the existing app.module.ts import FormModule which is essential for implementing two way data binding.

app.component.ts

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

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

const CONTACTS: Contact[] = [
  { id: 11, name: 'Shalvin', specialization : '.Net' },
  { id: 12, name: 'Praveen', specialization : 'Big Data' },
  { id: 13, name: 'Anuraj', specialization : 'Asp .Net Core' },
  { id: 14, name: 'Praseed', specialization :'C++' },
  { id: 14, name: 'Yaneesh', specialization :'.Net' }
];

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>My Contacts</h2>
    <ul>
      <li  *ngFor="let Contact of Contacts"
         (click)="onSelect(Contact)">
         {{Contact.name}}
      </li>
    </ul>
    <div *ngIf="selectedContact">
      <h2>{{selectedContact.name}} details!</h2>
      <div><label>id: </label>{{selectedContact.id}}</div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="selectedContact.name" placeholder="name"/>
      </div>
       <div>
        <label>Specailization: </label>
        <input [(ngModel)]="selectedContact.specialization" placeholder="specialization"/>
      </div>
    </div>
  `
})
export class AppComponent {
  title = 'Contact Management';
  Contacts = CONTACTS;
  selectedContact: Contact;

  onSelect(Contact: Contact): void {
    this.selectedContact = Contact;
  }
}

 

 Clicking on a Contact it's details will be displayed below.

TypeScript Part 2 : Classes

TypeScript class

class Contact{
    constructor(
        public name: string, public location: string)
    {

    }
}

var aPerson: Contact = new Contact("Shalvin", "Kochi")
alert('I am ' + aPerson.name + ' from '+ aPerson.location);

ES5

var Contact = (function () {
    function Contact(name, location) {
        this.name = name;
        this.location = location;
    }
    return Contact;
}());
var aPerson = new Contact("Shalvin", "Kochi");
alert('I am ' + aPerson.name + ' from ' + aPerson.location);

TypeScript Part 1: DataTypes and Array

TypeScript is an open source, cross platform and  strongly typed super set of  JavaScript. TypeScript can be  transcompiled into ES5, so that it can be used along with HTML.

TypeScript Data Types

var sName: string = 'Shalvin';
alert(sName);

ES5

var sName = 'Shalvin';
alert(sName);

let

let can also be use to declare memory variable. let can be used to circumvent “hoisting”.

let sName: string = 'Shalvin';
alert(sName);

Tryout


TypeScript Array

var myArr: Array<number> = [1, 2, 3];
for (let n of myArr) {
    alert(n);
}

JavaScript

var myArr = [1, 2, 3];
for (var _i = 0, myArr_1 = myArr; _i < myArr_1.length; _i++) {
    var n = myArr_1[_i];
    alert(n);
}