Introduction

• Install NodeJS and NPM from https://nodejs.org/en/download/.
• npm install : executed in root folder containing package.json to install required packages
• npm start : executed in project root to start the application

Angular CLI

1. Install NodeJS and NPM from https://nodejs.org/en/download/.

2. Install Angular CLI by running npm install -g @angular/cli

3. Create a project folder

4. In VS Code, go to

View -> Terminal or Alt+F12

5. In the terminal, create a new workspace (installs the necessary Angular npm packages and other dependencies)

ng new angular-tour-of-heroes

It creates the following workspace and starter project files:

• A new workspace, with a root folder named angular-tour-of-heroes.
• An initial skeleton app project, also called angular-tour-of-heroes (in the src subfolder).
• An end-to-end test project (in the e2e subfolder).
• Related configuration files.

6. Install all required npm packages by running npm install from the command line in the project root folder (where the package.json is located).

7. Start the application by running the command line in the project root folder.

cd angular-tour-of-heroes ng serve --open

Your browser should automatically open at http://localhost:4200 with the demo Angular 7 login page displayed.

More changes

8. navigate to the src/app,

• in app.component.ts change title
• in app.component.spec.ts no change
• in app.component.html change template e.g. replace contents with <h1>{{title}}</h1>
• in style.css change code to

---

/* Application-wide Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[type="text"], button {
  color: #888;
  font-family: Cambria, Georgia;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

---

6. Component creation: heroes component

ng generate component heroes

It creates a new folder src/app/heroes/, and generates the three files of the HeroesComponent.

1. selector— the component's CSS element selector : heroes.component.css
2. templateUrl— the location of the component's template file. : heroes.component.html

change contents to

example 1

{{hero}}

example 2

<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

3. styleUrls— the location of the component's private specs. : heroes.component.spec.ts
4. styleUrls— the location of the component's private CSS styles.: heroes.component.ts

change property example 1

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  hero = 'Windstorm';

  constructor() { }

  ngOnInit() {
  }

}

example 2

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };

  constructor() { }

  ngOnInit() {
  }

}

Create src/app/hero.ts

export class Hero {
  id: number;
  name: string;
}

7. Component usage

To display the HeroesComponent, it must be added to the template of the shell AppComponent.

1. app-heroes is the element selector, So add an element to the AppComponent template file src/app/app.component.html, just below the title.

<h1>{{title}}</h1>
<app-heroes></app-heroes>

Scaffold Usage

Component ng g component my-new-component

Directive ng g directive my-new-directive

Pipe ng g pipe my-new-pipe

Service ng g service my-new-service

Class ng g class my-new-class

Guard ng g guard my-new-guard

Interface ng g interface my-new-interface

Enum ng g enum my-new-enum

Module ng g module my-module