Angular16: PrimeNG16: リストボックスを表示する

環境

VirtualBox 7.0.6 (2023/01/17)
Debian 11.7 (2023/04/29)

nvm v0.39.3 (2022/12/24)
Node.js v18.16.1 (LTS) (2023/06/21)
Angular v16.1.4 (2023/07/07)
PrimeNG v16.0.2 (2023/06/21)

1. AngularのワークスペースにPrimeNGをインストールする

1-1. Angularのワークスペースを作成する

ワークスペースを作成するディレクトリに移動する。

$ cd /home/mizuki/workspace/angular16

ワークスペースを作成する。

$ npx ng new primeng16-listbox
? Would you like to add Angular routing? (y/N)   -> [Yes]
? Which stylesheet format would you like to use? -> [SCSS]

ワークスペースに移動する。

$ cd primeng16-listbox

ローカルで実行する。

$ npx ng serve

ブラウザで表示する。

http://localhost:4200/

1-2. AngularのワークスペースにPrimeNGをインストールする

インストールするディレクトリに移動する。

$ cd /home/mizuki/workspace/angular16/primeng16-listbox

インストール可能なPrimeNGのバージョンを確認する。

$ npm view primeng versions
[
    '16.0.2'
]

ローカルにPrimeNGをインストールする。

$ npm install primeng@16.0.2

1-3. PrimeNGの初期設定を行う

スタイルの設定

src/style.scss

/* PrimeNG Theme */
@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";

body {
    /* PrimeNG Theme Font */
    font-family: var(--font-family);
}

コンポーネントのアニメーションの設定。代わりにNoopAnimationsModuleをimportすればアニメーションをオフにできる。

src/app/app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    imports: [
        BrowserAnimationsModule
    ],
})
export class AppModule { }

2. 画面1を表示する

2-1. 画面1のコンポーネントを追加する

ワークスペースに移動する。

$ cd /home/mizuki/workspace/angular16/primeng16-listbox

画面1のコンポーネントを追加する。

$ npx ng generate component gamen1

画面が見つからない場合のコンポーネントを追加する。

$ npx ng generate component page-not-found

参考情報

Creating a component - Angular Components Overview - Angular

2-2. 画面1のコンポーネントを表示する

<router-outlet/>でコンポーネントを描画する。

src/app/app.component.html

既存のコードを削除して以下の行だけにする。

<router-outlet></router-outlet>

ルーティング情報を記述する。

src/app/app-routing.module.ts

routes変数の中身を書き換える。Gamen1ComponentとPageNotFoundComponentのimport文を追加する。

import { Gamen1Component } from './gamen1/gamen1.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [
    { path: 'gamen1', component: Gamen1Component },
    { path: '', redirectTo: '/gamen1', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
];

enableTracingでブラウザのコンソールにデバッグ出力を行う。

src/app/app-routing.module.ts

@NgModuleのimportsの中身を書き換える。

@NgModule({
    imports: [RouterModule.forRoot(routes, { enableTracing: true })],
    exports: [RouterModule]
})

ローカルで実行する。

$ npx ng serve

ブラウザで表示する。

http://localhost:4200/

参考情報

Router tutorial: tour of heroes - Angular

3. リストボックスを表示する

3-1. [(ngModel)]のモジュールをインポートする

src/app/app.module.ts

import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [
        FormsModule
    ],
})
export class AppModule { }

参考情報

Displaying and updating properties with ngModel - Angular

3-2. リストボックスのモジュールをインポートする

src/app/app.module.ts

import { ListboxModule } from 'primeng/listbox';

@NgModule({
    imports: [
        ListboxModule
    ],
})
export class AppModule { }

参考情報

import - Listbox - PrimeNG

3-3. 画面1にリストボックスのコンポーネントを追加する

src/app/gamen1/gamen1.component.html

<div style="display:flex;flex-direction:column;">
    <p-listbox
        [options]="dataProvider"
        [(ngModel)]="dataProvider_selectedValue"
        optionLabel="name"
        [style]="{'width':'300px','height':'400px'}"
    ></p-listbox>
    <p>SelectedItem: {{ dataProvider_selectedValue?.name }}</p>
</div>

src/app/gamen1/gamen1.component.ts

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

class DataProviderItem {
    name: string = "";
}

@Component({
    selector: 'app-gamen1',
    templateUrl: './gamen1.component.html',
    styleUrls: ['./gamen1.component.scss']
})
export class Gamen1Component implements OnInit {

    dataProvider: DataProviderItem[] = [];
    dataProvider_selectedValue: DataProviderItem | null = null;

    ngOnInit(): void {
        let item: DataProviderItem | null = null;

        item = new DataProviderItem();
        item.name = "ふくむらみずき";
        this.dataProvider.push(item);

        item = new DataProviderItem();
        item.name = "いくたえりな";
        this.dataProvider.push(item);

        item = new DataProviderItem();
        item.name = "いしだあゆみ";
        this.dataProvider.push(item);
    }
}

参考情報

4. アプリケーションをビルドして配備する

4-1. index.htmlの<base href="/">を配備場所に合わせる

src/index.html

<base href="/code/2023/07/dist/17/">

4-2. アプリケーションをビルドする

$ cd /home/mizuki/workspace/angular16/primeng16-listbox
$ npx ng build

4-3. アプリケーションを配備する

dist/primeng16-listbox配下のファイルをサーバーに配備する。

サンプルページを表示する

5. GitHubにワークスペースをアップロードする

5-1. Eclipseを起動する

端末からコマンドでEclipseを起動する。

$ /home/mizuki/opt/eclipse

ワークスペースを指定する。

/home/mizuki/workspace/eclipse

5-2. ワークスペースをローカルリポジトリにコピーする

ワークスペースをローカルリポジトリにコピーする。

$ cd /home/mizuki/workspace/angular16
$ cp -a primeng16-listbox /home/mizuki/workspace/github/angular16

コピーしたワークスペースの.gitディレクトリを削除する。こうしないとローカルリポジトリの中に別のリポジトリがあることになってコミットできない。

$ cd /home/mizuki/workspace/github/angular16/primeng16-listbox
$ rm -rf .git

コピーしたワークスペースをEclipseを使ってローカルリポジトリにコミットする。

Git Repositoriesビュー
    angular16
        Branches
            Local
                main (選択する)

Git Stagingビュー
    変更をすべてコミットする。
    コミットログを記述する。
        [PrimeNG16: リストボックスを表示する]新規追加

参考情報

【 cp 】コマンド（応用編その1）――ディレクトリをコピーする：Linux基本コマンドTips（18） - ＠IT

5-3. ローカルリポジトリのコミットをリモートリポジトリにプッシュする

Historyビュー
    コミットを選択する。
        [PrimeNG16: リストボックスを表示する]新規追加
            右クリック > Push Commit