Angular

Angular

Angularで時間入力もできるdatetime-pickerのフォームを作る

はじめに最初は「@angular-material-components/datetime-picker」というパッケージを使っていたのだが、Angular17以降はサポートされなくなっていました。そのため、代わりのパッケージとして「@da...
Angular

Angular Materialのセレクトボックスで項目をフィルタする

はじめにAngular Materialには、MatSelectというセレクトボックスがあります。そのセレクトボックスの項目リストに対して、検索キーワードを入れて、項目リストをフィルタする機能を作っていこうと思います。実装方法環境Angul...
Angular

Angular Materialを使ったページング機能の実装

はじめにページングは、多くのデータを扱う際に非常に重要な機能です。ユーザーが効率よくデータを閲覧できるように、データを複数のページに分割して表示します。この記事では、Angular MaterialのMatPaginatorを使用して、デー...
Angular

assetsを使って環境ごとに画像を切り替える[Angular]

assetsを使って環境ごとに画像を切り替える画像を環境ごとに切り替えるのに使えたのが、angular.jsonのassetsオプションでした。以下のように、angular.jsonで、書く環境のビルド設定の箇所に、以下のようにassets...
Angular

index.htmlを環境ごとに置き換える[Angular]

きっかけ環境によって、画面デザインを変えようとしたが、angular.jsonのfileReplacementsで、enviroment.tsと同じような感じで置き換えようとしたが、以下のように、htmlの拡張子は対応していないとのエラーが...
Angular

MatCheckboxでチェックボックスを作る[Angular Material]

MatCheckboxでチェックボックスを作るAngular MaterialのMatCheckboxでチェックボックスを作るのは、以下のように必要なモジュールをインポートして、テンプレートでmat-checkboxセレクタを呼びだすだけで...
Angular

ng buildしたファイルでローカルにサーバを起動させる[Angular]

ng buildしたファイルでローカルにサーバを起動させるangular-http-serverというnpmパッケージがあり、これを使うことで、ng buildしたファイルを使って、webサーバーを起動することができます。angular-h...
Angular

本番や開発などの環境ごとに固有の設定値を使用する[Angular]

概要本番環境や開発環境などで、APIのURLの向き先など、環境によって異なる設定値(環境変数)を設定していくやり方を備忘録として残していきます。やり方はenviroment.tsを使って行います。環境はstaging環境(本番環境)、dev...
Angular

datepickerの日本日付の日を消したい[Angular Material]

日本日付の日を消したいprovidersで、ロケールを以下のように日本にできるが、カレンダーに日が入っていて、デザインが微妙なので日を消すようにする。 providers: [ ~ { provide: MAT_DATE_L...
Angular

別のコンポーネントのテンプレートを呼び出す[Angular]

別のコンポーネントのテンプレートを呼び出すAngular18のバージョンで実装していきます。まずは別のコンポーネントとして、TestComponentを作ります。import { Component } from '@angular...