基本コマンド

// node.jsのバージョン確認
node -v

// Angular CLIインストール
npm install -g @angular/cli

// Angular Version確認
ng version

// Angular のバージョンアップ
npm uninstall -g @angular/cli
npm cache verify // キャッシュの整合性確認
npm cache clean // キャッシュ削除
npm install -g @angular/cli

//
// アプリケーションのAngularバージョンアップ
// 【オプション】 --allow-dirty --force
// 【メモ】バージョンは一気に上げることはできず、１つずつ上げる必要があるようです。
//
ng update @angular/core@バージョン @angular/cli@バージョン

// Angular アプリケーション
ng new アプリ名

// Angularのバージョン指定する場合
npx @angular/cli@バージョン番号 new プロジェクト名

cd アプリ名

// アプリ起動
ng serve

// コンポーネント作成
ng generate component コンポーネント名

// サービス作成
ng generate service サービス名

HTML出力方法

1. マスタッシュ構文

できること

tsファイルに定義している変数や関数を呼び出しての結果出力
通貨フォーマット

HTMLファイルの記述

<p>金額：{{ 1000 * 1.1 | currency: "JYP" }}</p>

HTML出力結果

<p>金額：￥1,000</p>

2. 属性

属性値設定

[属性]="プロパティ"

イベント属性設定

JavaScriptイベントの「on」を除外した文字列をイベントに記載する。
例： click, change, blur, keypress, keydown, keyup, etc

(イベント)="メソッド"

属性値参照

<input type="text" #price (blur)="check(price.value)" />

#price は、「id="price"」と同じ意味
price.value は「document.getElementById('price').value」と同じ意味

Styleバインディング

[style.CSSプロパティ]="値"

CSSプロパティには、colorやfont-sizeなどを指します。

<p [style.color]="'#ff0000'" [style.font-size.pt]="36">こんにちは。</p>

文字列はシングルクォーテーションで囲む必要あり。

属性ディレクティブ：ngClass, ngStyle

[ngClass]="プロパティ|オブジェクト"
[ngStyle]="プロパティ|オブジェクト"

コンポーネントcssファイル

.l { font-size: 36pt; }
.b { font-weight: bold; }
.c { color: #f00; }

コンポーネントtsファイル

myClass={
  'l': false,
  'b': true,
  'c': true
};
myStyle={
  'border-style': 'double',
  'border-color': 'blue'
}

コンポーネントhtmlファイル

<p [ngClass]="myClass">まいど</p>
<p [ngStyle]="myStyle">おおきに</p>

出力結果

「まいど」は、太字の赤文字で出力される
「おおきに」は、青い二重線で囲まれている

構造ディレクティブ：条件表示

*ngIf

*ngIf="条件"

*ngFor

*ngFor="let 変数 of 配列; index as 変数"

「*ngFor」の「index」以外にもローカル変数があり。「count, first, last, even, odd」
https://angular.io/api/common/NgForOf#local-variables

[ngSwitch], ngSwitchCase, ngSwitchDefault

[ngSwitch]="プロパティ"
*ngSwitchCase="値"
*ngSwitchDefault

<div [ngSwitch]="greetingTime">
  <p *ngSwitchCase="'morning'">おはようございます。</p>
  <p *ngSwitchCase="'noon'">おはようございます。</p>
  <p *ngSwitchCase="'afternoon'">おはようございます。</p>
  <p *ngSwitchDefault>おはこんばんちは。</p>
</div>

文字列の場合、シングルクォーテーションで囲む必要があり。

起動コンポネントの設定

１．app.module.ts の bootstrap を importしているコンポーネントに置き換える

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { SampleComponent } from './sample/sample.component';

@NgModule({
  declarations: [
    AppComponent,
    SampleComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [SampleComponent]
})
export class AppModule { }

２．index.htmlのコンポーネントタグを書き換える

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-sample></app-sample>
</body>
</html>

関連記事

参考資料

『Angular超入門』著者：掌田津邪乃
npx を利用して特定バージョンの Angular プロジェクトを作成する