[Angular 2] Create Angular 2 Porject with Angular CLI

Install:

npm i -g angular-cli

 

Create a project:

ng new hello-angular2

 

Run the project:

cd hello-angular2
ng serve

 

Change the port:

ng serve --port 4201 --live-reload-port 49153

 

Create a component:

ng g component contact-list-component

The component will be created in src/app/contact-list-component.

// app.component.ts

import { Component } from '@angular/core';
import {ContactListComponentComponent} from "./contact-list-component/contact-list-component.component";

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [ContactListComponentComponent]
})
export class AppComponent {
  title = 'app works!';
}

 

Generate a child component:

The child component should live inside parent component, for example, we create a contact-detail-component:

cd ./contact-list-component
ng g component ./contact-detail-component

 

//contact-iist-component.ts

import { Component, OnInit } from '@angular/core';
import {ContactDetailComponentComponent} from "./contact-detail-component/contact-detail-component.component";

@Component({
  moduleId: module.id,
  directives: [ContactDetailComponentComponent],
  selector: 'app-contact-list-component',
  templateUrl: 'contact-list-component.component.html',
  styleUrls: ['contact-list-component.component.css']
})
export class ContactListComponentComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

 

If everything went well, you should see: