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);
}

Bootstrap MVC Layout with Left navigation bar

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
        
    <div class="nav navbar-fixed-top">
        @Html.ActionLink("Shalvin Institute Management", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
    </div>

    <div class="row">
        <div class="row col-md-2">
            <div class="navbar navbar-inverse">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                       
                    </div>

                    <div class="row">
                        <ul class="nav">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="row col-md-10">
            @RenderBody()
        </div>
    </div>
    
    <div class="container body-content">
       
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Shalvin P D</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Bootstrap TextBox with DropDown

<div>Name <div class ="dropdown">
     <input type="text" data-toggle="dropdown"/>
           <ul class ="dropdown-menu">
               <li>Shalvin</li>
               <li>Bibbin</li>
           </ul>
</div> 

Abstract Class C#

An Abstract class is a class with incomplete functionality.
It shall or shall not have abstract methods. As in the case with Interface you can't create an object of Abstract class.

abstract class Person
{
        public abstract void Print();
        public void Blog()
        {
            Console.WriteLine("ShalvinPD.blogspot.com");
        }
}

class Shalvin : Person
{
        public override void Print()
        {
            Console.WriteLine("Shalvin P D");
        }
}
   
class Program
{
        static void Main(string[] args)
        {
            //Error cannot create an object of Abstract Class
            //Person p = new Person();

            Shalvin s = new Shalvin();
            s.Print();
            s.Blog();
            Console.ReadLine();
        }
}

Here I am having an Abstract class called person with an abstract method called Print and an ordinary method called blog. In the sub class I am overriding the abstract Print method.

Method overriding C#

class  Person
    {
        public virtual  void Print()
        {
            Console.WriteLine("Hello Person");
        }
    }

    class Shalvin : Person
    {
        public override void Print()
        {
            Console.WriteLine("Hello Shalvin");
        }
        
    }

   class ShalvinPD : Shalvin
    {

    }
    class Reshma : Person
    {
        public override void Print()
        {
            Console.WriteLine("Hello Reshma");
        }
    }

    class Program
    {
        static void Main(string[] args)
        {
            Person p = new Person();
            p.Print();

            Shalvin s = new Shalvin();
            s.Print();

            ShalvinPD spd = new ShalvinPD();
            spd.Print();

            Reshma r = new Reshma();
            r.Print();

            Console.ReadLine();
        }
    }
}