環境
- Node.js v16.13.2 (npm v8.1.2) (2022/01/10)
- Angular CLI 13.2.2 (2022/02/02)
- Google Chrome 98 (2022/02/01)
- PrimeNG 13.1.0 (2022/01/19)
- PrimeIcons 5.0.0 (2021/11/04)
0. 環境構築
0-1. Node.jsをv16.13.1からv16.13.2にアップデートする
インストール済みのバージョンを確認する。
cd /home/mizuki/workspace/angular13
nvm ls
-> v16.13.1 # ここに現在のバージョンが表示されている。
default -> 16 (-> v16.13.1)
node -> stable (-> v16.13.1) (default)
stable -> 16.13 (-> v16.13.1) (default)
lst/gallium -> v16.13.2 (-> N/A) # ここに新しいバージョンが表示されている。
新しいバージョンをインストールする。
nvm install 16.13.2
Now using node v16.13.2 (npm v8.1.2)
インストール済みのバージョンを確認する。
nvm ls
v16.13.1
-> v16.13.2
default -> 16 (-> v16.13.2)
node -> stable (-> v16.13.2) (default)
stable -> 16.13 (-> v16.13.2) (default)
lst/gallium -> v16.13.2
nodeコマンドでバージョンを確認する。
node -v
v16.13.2
0-2. ワークスペースのAngular CLIをv13.1.2からv13.2.2にアップデートする
インストール済みのバージョンを確認する。
cd /home/mizuki/workspace/angular13
npx ng version
Angular CLI: 13.1.2
インストール可能なバージョンを確認する。
npm info @angular/cli versions
[
'13.2.2',
'14.0.0-next.0'
]
インストール可能な個別のパッケージを確認する。
# コマンドに引数がない場合はリストを表示するだけになっている。
npx ng update
Name Version Command to update
------------------------------------------------------------
@angular/cli 13.1.2 -> 13.2.2 ng update @angular/cli
新しいバージョンをインストールする。
npx ng update @angular/cli
インストール済みのバージョンを確認する。
npx ng version
Angular CLI: 13.2.2
0-3. Google Chromeを最新版にアップデートする
ウィンドウ右上のGoogle Chromeの設定 > ヘルプ > Google Chromeについて
バージョン 98.0.4758.80 (Official Build) (64ビット)
0-X. 参考になるサイト
1. 準備
1-1. GitHubのリポジトリをHTTPSで操作するためのトークンを作成する
github.com/yvafdevnsk
Settings
Developer settings
Personal access tokens
Generate new token
Note: EGit
Expiration: 30 days (default)
Select scopes: [x] repo (Full control of private repositories)
1-2. トークンをEclipseに設定する
Eclipse
Window > Perspective > Open Perspective > Other... > Git
Git Repositoriesビュー
github [main] - /home/mizuki/workspace/angular13/github/.git
Remotes
origin
https://github.com/yvafdevnsk/angular13
右クリック > Change Credentials...
2. Angular13とPrimeNG13でDropdownのoverlay panelをitemの幅に沿って広げる
2-0. GitHubのプロジェクト
https://github.com/yvafdevnsk/angular13/tree/main/angular13-primeng13-dropdown-overlaypanel-width
2-1. プロジェクトを作成する
コマンド
cd /home/mizuki/workspace/angular13/github
npx ng new angular13-primeng13-dropdown-overlaypanel-width
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ]
2-2. プロジェクトにPrimeNG13をインストールする
インストール可能なバージョンを確認する。
cd /home/mizuki/workspace/angular13/github/angular13-primeng13-dropdown-overlaypanel-width
npm info primeng versions
[
'13.1.0'
]
npm info primeicons versions
[
'5.0.0'
]
バージョンを指定してインストールする。
cd /home/mizuki/workspace/angular13/github/angular13-primeng13-dropdown-overlaypanel-width
npm install primeng@13.1.0
npm install primeicons@5.0.0
プロジェクトにPrimeNGのスタイルシートを指定する。
angular.json
{
"projects": {
"angular13-primeng13-dropdown-overlaypanel-width": {
"architect": {
"build": {
"options": {
"styles": [
"src/styles.scss",
"node_modules/primeng/resources/themes/saga-blue/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeicons/primeicons.css"
],
}
}
}
}
}
}
2-3. プロジェクトにPrimeNGで必要なライブラリをインストールする
cd /home/mizuki/workspace/angular13/github/angular13-primeng13-dropdown-overlaypanel-width
npm install @angular/cdk
2-4. Dropdownの項目にDropdown本体の横幅を超える長さの文字列を設定して表示する
src/app/app.modules.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DropdownModule } from 'primeng/dropdown';
@NgModule({
imports: [
BrowserAnimationsModule,
DropdownModule
]
})
src/app/app.component.html
<p-dropdown [options]="items" [style]="{'width':'200px'}"></p-dropdown>
src/app/app.component.ts
export class AppComponent {
items: any[];
constructor() {
this.items = [
{label:"あいうえお", value:"1"},
{label:"あいうえおかきくけこ", value:"2"},
{label:"あいうえおかきくけこさしすせそ", value:"3"},
{label:"あいうえおかきくけこさしすせそたちつてと", value:"4"},
];
}
}
ブラウザで表示する。
cd /home/mizuki/workspace/angular13/github/angular13-primeng13-dropdown-overlaypanel-width
npx ng serve --open
PrimeNGのバージョン13ではDropdownのoverlay panelはitemの幅に沿って広がるので何もしなくてよい。
