B-Teck!

お仕事からゲームまで幅広く

【Angular】Angular MaterialのDatePickerで日本語表示をする

Angular MaterialのDatePicker でカレンダーを日本語表示させるメモ。

環境

  • Angular 14
    • 試したのがこのバージョンなだけで、過去のバージョンでも対応方法は変わらなそう。

インストール

  1. Angularプロジェクト上で angular/material をインストールする
ng add @angular/material
  1. app/app.module.ts に必要なファイルのimportを追加する
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatNativeDateModule} from '@angular/material/core';

@NgModule({
  imports: [
    (省略)
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule
  ],
  (省略)
})
  1. 任意のComponentにサンプルの記述を貼り付ける(今回はapp/app.component.ts )
<input matInput [matDatepicker]="picker">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

デフォルトでは下記のように英語のカレンダーが表示される

ロケールを変更する

まずは対象のComponentのProviderを上書きしてカレンダーのロケールを変更する。

import { DateAdapter, NativeDateAdapter } from '@angular/material/core';
export class AppComponent {
  constructor(dateAdapter: DateAdapter<NativeDateAdapter>) {
    dateAdapter.setLocale('ja-JP');
  }
}

すべての日付に がつくものの、日本語表記になっている

日付表示を変更する

  1. 日付表示を変更するためにProviderで上書きするためのAdapterを作成
export class MyDateAdapter extends NativeDateAdapter {
    override getDateNames(): string[] {
        return [...Array(31).keys()].map(i => String(i + 1));
    }
}
  1. Adapterを適用する
providers: [{provide: DateAdapter, useClass: MyDateAdapter}],

日が取れて直感的な表記になった

サンプル

https://stackblitz.com/edit/angular-ivy-f6sxt1?file=src/app/app.component.ts

【振り返り】2022年5月

前月の振り返り
【振り返り】2022年4月 - B-Teck!

学習

今月やったこと

所感

GW前にGWでやることバックログを作って、優先度高い順に消化したら結構良かった。
長期休暇では毎回やっていきたい。
今月もフロント強化月間。
色々手を動かしつつ、定着のために一個新しいリポジトリを作った。
Github Actions試したろ、気になってたライブラリ突っ込んだりできて良い感じ。

あと、ここ一年ぐらついていたメンタルがいい感じに安定してきた感がある。
未だにキャリアイメージはつかめないままだけど、とりあえず読書のペースも戻ってきた。

5月から週2日の出社再開となり、転職後初めて定期的な出社をしている。
というか、4月以前は1日しか出社したことがなかった。
体力の低下とか、人のいるオフィスで働くとか、色々と動き方が変わってきている。
コミュニケーションは取りやすいんだけどねえ。

【Angular】AngularのアプリケーションをGithub ActionsでビルドしてGithub Pagesで公開する

Angularのアプリケーションを、Github Pagesでも公開してみようと思い立った。
せっかくなので、Github Actionsを利用して、自動でビルドされるようにしてみます。

Github Actionsの設定

yamlの作成

  1. リポジトリのActionsタブを選択

  2. set up a workflow yourself をクリック

  3. 編集画面でyamlを編集する

例)

name: Build and deploy website

on:
  push:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 17.x
    - name: Install NPM packages
      run: npm ci
    - name: Build website
      run: npm run build --if-present -- --configuration production --base-href /booklog-viewer/
    - name: Test
      run: npm test -- --watch=false --browsers=ChromeHeadless
    - name: Deploy 
      uses: JamesIves/github-pages-deploy-action@v4
      with:
        BRANCH: gh-pages
        FOLDER: dist
        CLEAN: true

yamlの内容は、

  1. masterへのpush時に実行するよう設定
  2. Ubuntuのlatestの環境を利用
  3. ソースコードをチェックアウト actions/checkout@v2
  4. nodeの設定 actions/setup-node@v3
  5. npm ci でpackageのインストール
  6. productionを指定してアプリケーションをビルド
    base-href/{リポジトリ名}/ を指定している。
    この設定はGithub Pagesとして公開されたときに、JSやCSSの参照を正しく行うために必要。
  7. UT実行
  8. Github Pages用のブランチに実行結果を格納
    ここで対象のブランチ・デプロイする成果物のディレクトリを指定している。
    また、Angularの成果物が dist 以外に出力される場合はFOLDERの記述を変更する必要がある。

Github Pages公開のための設定

Actionsの実行権限を変更

  • SettingsのActions>GeneralからWorkflow permissionsを Read and write permissions に設定する
    この設定がないとビルド結果を指定のブランチに格納できない

    Github Pagesの設定

  • gh-pages ブランチ、あるいはyamlで指定した名称のブランチを作成
  • SettingsのPagesから Source を下記のように設定する

angular.jsonの変更

ここまで設定すれば、 https://{ユーザー名}.github.io/{リポジトリ名}/ で表示できる状態になっているはず。
うまく表示されていない場合は、Actionsがfailしていないか、成果物を格納するためのブランチがどうなっているかを見ると良さそう。

参考