【Angular Material】Iconのテーマを切り替えたい。
はじめに Angular Material Icon で 使えるアイコン一覧にはベースとなるものの他に「Outlined」「Rounded」「Two-Tone」「Sharp」というテーマが用意さ...
6
1
Comment0
27 search resultsShowing 1~20 results
Stocked
You need to log-in
【Angular】Angular + Scullyでつくったブログアプリにスマホから記事を投稿できるようにする。
はじめに Angular + Scullyでブログアプリを作ったものの、仕事から疲れて帰ってきて 「記事を書くのにPCを起動する」 という行動が自分的にはものすごくめんどくさかった。 iosには...
6
0
Comment0
【Angular】なぜTemplateから関数を直接呼び出すとパフォーマンスの低下を起こすのか、とその対策
はじめに よくAngularのパフォーマンス改善で言われている「Templateからメソッドを直接呼んではいけない」はなぜなのか、をこちらの記事を参考に実際に試して確認、そしてその対策方法を共有...
17
10
Comment0
【Angular】引数を複数渡すPipeの作り方とその呼び出し方を知りたい
はじめに 今回は複数の引数を持つカスタムPipeの作り方およびその呼び出し方について共有していく。 作るもの 長い文の時に指定された文字数で表示し、余った部分は指定された文字に置き換えるというカ...
9
7
Comment0
【Angular】MatDialogRef.afterClosed.subscribe()内のテストコードを書きたい
はじめに 例えばMatDialogを閉じたあとの処理を実装するとき、 example.component.ts public onDialogOpen() { const dialogRef =...
5
5
Comment0
【Angular】`ChangeDetectionStrategy.OnPush`の効果を確認してみる
はじめに Angularのパフォーマンス改善で「ChangeDetectionStrategy.OnPushを指定する」というのをよく見るが、これを設定するとどんな良いことがあるのか、を実際に見...
21
17
Comment0
【Angular】ngForでObjectを表示させる際にKey, Valueを利用したい
はじめに 今回はObjectをngForで表示する際に、KeyValueを利用する方法を共有していく。 keyvalueパイプを使う key-value-example.component.ts...
8
5
Comment0
【Angular】`[routerLink=""]`を使ってパスの階層を一つ下げたい
はじめに この記事はAngularにおけるルーティングで、パスの階層を下げるのにわざわざ「Router.navigate」を使わずにrouterLink=""を使ってシンプルにできるよという記事...
1
0
Comment0
【Angular】ngx-translateを使った多言語化で、複数の多言語ファイルを利用したい
はじめに タイトルのユースケース例としては、複数のAngularアプリが存在しそれらには固有のアプリIDが振られておりそれぞれのアプリで文言のカスタマイズができるというケース。そこで、 どのアプ...
4
4
Comment0
【Angular】ngx-translateをLazyLoadされるModuleでも使用したい
はじめに 「ngx-translate」を使って多言語化対応するとき、LazyLoadされるModuleのTemplateでtranslateを記述しても翻訳されない。その時どうしたら良いかを共...
1
0
Comment0
【Angular】アプリの初期画面表示より前に処理を行いたい
はじめに 以前書いたこの記事では、データ取得からスタイル反映までにラグがあったためチラついたように見えるのが問題だった。 具体的にはこんな感じ。ネットワークが遅いとより顕著だ。 そこで今回はそも...
8
4
Comment0
【Angular】DBのデータを元にテーマカラーを動的に変更したい
はじめに DBのデータ(カラーコード)を元にAngularのテーマカラーを変更する方法を共有していく。 環境 Angular 8.2.11 Angular Material 8.2.3 glob...
1
2
Comment0
AngularのStateを確認できるChrome拡張機能「Angular state inspector」
はじめに AngularのStateを確認できるツール「Angular state inspector」の紹介をしていく。 Serviceクラスでのデータ管理の際、わざわざConsole.log...
2
2
Comment0
【Angular Material】`mat-icon`を動的に表示したい
はじめに 今回はAngular Materialの「MatIcon」を動的に表示する方法を共有する。 今回使用するソースコード icon-example.component.html <h...
1
0
Comment0
【Angular】`ng build --prod`した資源をブラウザで開いたら、[Uncaught NullInjectorError: StaticInjectorError(AppModule)[HogeModule -> ParamDecoratorFactory]と出てしまった。
環境 Angular 8 Node.js 12.13.0 NullInjectorErrorは突然に 実装した画面を開発環境で実際に確認するべく、いつも通りng build --prodしてS3...
0
0
Comment0
【Angular Material】Expansion Panelで表示されるアイコンを変更したい
はじめに Angular Materialで提供されている「Expansion Panel」のアイコン（画像でいうと赤枠の部分）を変更するやり方を共有していく。 まずはドキュメント通りのコード ...
2
1
Comment0
Ionic3にAngular-materialを導入してみる。
はじめに 現場でIonic3を使ってアプリを作っているのですが、webviewで表示されるページでAngular-materialを使用しており、ネイティブとwebページでデザインが変わってしま...
2
2
Comment0
Angularの@Input(), @Output()を理解する。
はじめに 業務でボタンの複数回クリックされたときの対策を実装するときがありました。そこで「このコンポーネントを使ってボタンを実装すればそういった対策は内部で勝手にやってくれる」魔法のようなボタン...
80
58
Comment1
AngularでUXを意識したメールアドレス入力欄のバリデーションを実装してみた。
はじめに 「UXを意識した～」と一丁前に言ってますが、CodeGridというフロントエンド関係を主に扱うサイトの、「よりよいメールアドレス入力欄を求めて」という記事の内容を一部実装しただけです ...
5
4
Comment0
Angularで各フォームを子コンポーネントとして切り出す。
はじめに 今回は再利用性や保守性をより高めるため、各フォーム項目をコンポーネントとして切り出すことをしていきます。 経緯 以前自分がこちらの記事を投稿し、現場の新規サービスにもこのやり方を取り入...
9
8
Comment0
27 search resultsShowing 1~20 results
Qiita is a knowledge sharing service for engineers.
- You can follow users and tags
- You can stock useful information
- You can make edit suggestions for articles