Creating Your First Angular 4 App Using Angular IDE

Prerequisites

• Angular IDE or CodeMix or MyEclipse 2017+—Choose any of these Eclipse-based IDEs to follow along.
• Node.js, NPM, Angular CLI—These are the core tools for Angular development. They are installed automatically by the IDE.
• Basic TypeScript, HTML and Eclipse usage knowledge.

Creating a New Angular project

Creating Model classes & Elements

export class Vehicle {
  id;
  name;
  type;
  mass;
}

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-vehicle-list',
  templateUrl: './vehicle-list.component.html',
  styleUrls: ['./vehicle-list.component.css']  
})
export class VehicleListComponent implements OnInit {
 
constructor() { }
 
  ngOnInit() {
  }
 
}

• The first line is importing the Component decorator function and OnInit interface. This decorator function is describing metadata for any Angular 2 reusable UI component, OnInit interface extension is used to register init lifecycle hook (see below).
• Selector specifies the tag name that would trigger this component’s insertion.
• TemplateUrl and styleUrls specify file names that contain an html-based template for the component UI and css styling for it.
• Class VehiclesListComponent should contain almost all inner component logic written in TypeScript. For now it contains only an empty constructor and empty ngOnInit lifecycle hook. This hook can be useful for some “heavy” initialization like network or database calls, constructor should be used only for basic initialization, without any heavy IO.

Service

import { Injectable } from '@angular/core';
 
const vehicles = [
  {
      id: 1,
      name: 'Trailer - 1',
      type: 'Truck',
      mass: 40
  },
  {
      id: 2,
      name: 'An-2',
      type: 'Plane',
      mass: 5
  },
  {
      id: 3,
      name: 'LandCruiser 80',
      type: 'Jeep',
      mass: 2
  },
];
 
@Injectable()
export class VehicleService {
 
  private vehicles;
 
  constructor() {
    this.vehicles = vehicles;
  }
 
  getVehicles() {
    return this.vehicles;
  }
 
}

  constructor(private vehicleService: VehicleService) {
    this.vehicles = this.vehicleService.getVehicles();
}

<table class="tftable">
  <tr><th>ID</th><th>Name</th><th>Type</th><th>Mass</th>
  <tr *ngFor="let vehicle of vehicles">
    <td>{{vehicle.id}}</td> <td>{{vehicle.name}}</td> <td>{{vehicle.type}}</td> <td>{{vehicle.mass}}</td>
  </tr>
</table>

• *ngFor is a built-in directive iterating over a list (vehicles in our case).
• {{ }} tells Angular to read a given property from the TypeScript model and render it.

Plugging In

<app-vehicles-list></app-vehicles-list>

Master-Details

<div *ngIf="vehicle">
    <h2>{{vehicle.name}} properties</h2>
    <table>
        <tr>
            <td><label>ID: </label></td>
            <td>{{vehicle.id}}</td>
        </tr>
        <tr>
            <td><label>Name: </label></td>
            <td><input [(ngModel)]="vehicle.name" placeholder="name" /></td>
        </tr>
        <tr>
            <td><label>Type: </label></td>
            <td><input [(ngModel)]="vehicle.type" placeholder="type" /></td>
        </tr>
        <tr>
            <td><label>Mass: </label></td>
            <td><input [(ngModel)]="vehicle.mass" placeholder="mass" /></td>
        </tr>
    </table>
</div>

• *ngIf=”vehicle”—Designates to only proceed with the content when vehicle field has value, which is needed to avoid errors when selection is empty.
• [(ngModel)]=”vehicle.name” (same for type and mass)—Implements bi-directional data binding between input field and corresponding property.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
 
import { AppComponent } from './app.component';
import { VehicleListComponent } from './vehicle-list/vehicle-list.component';
import { VehicleDetailsComponent } from './vehicle-details/vehicle-details.component';
 
@NgModule({
  declarations: [
    AppComponent,
    VehicleListComponent,
    VehicleDetailsComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, OnInit } from '@angular/core';
import { VehicleService } from '../model/vehicle.service';
import { Vehicle } from '../model/vehicle';
 
@Component({
  selector: 'app-vehicle-list',
  templateUrl: 'vehicle-list.component.html',
  styleUrls: ['vehicle-list.component.css'],
  providers: [VehicleService]
})
export class VehicleListComponent implements OnInit {
 
  vehicles: Vehicle[];
  selectedVehicle: Vehicle;
 
  constructor(private vehicleService: VehicleService) {
    this.vehicles = this.vehicleService.getVehicles();
  }
 
  ngOnInit() {
  }
 
  onSelect(vehicle: Vehicle) { this.selectedVehicle = vehicle; }
 
}

<table class="tftable">
  <tr><th>ID</th><th>Name</th><th>Type</th><th>Mass</th>
  <tr *ngFor="let vehicle of vehicles"
      (click)="onSelect(vehicle)">
    <td>{{vehicle.id}}</td> <td>{{vehicle.name}}</td> <td>{{vehicle.type}}</td> <td>{{vehicle.mass}}</td>
  </tr>
</table>
<vehicle-details [vehicle]="selectedVehicle"></vehicle-details>

A Little Bit of Styling

.selected { background-color: #CFD8DC !important;}

table.tftable tr:hover {background-color: #DDD; left: .1em;}

Inspecting

Debugging

Conclusion

Resources