大田区から発信するゆるゆる日記

主にITエンジニアに関する備忘録日記。たまに趣味も。何か不備があればコメント頂けると幸いです。Twitterアカウント https://twitter.com/ryuzan03

プログラミング-Angular

【HTML/Javascript】フロントエンドでCSVデータを出力する方法

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 概要 CSVデータ出力方法 処理の流れ 多次元(2次元)配列を使った理由 多次元(2次元)配列とは? 画面とメソッドを作成 2…

【Firebase/Angular】AngularFireAuthのauthプロパティ削除について

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 概要 AngularFire authプロパティの変更 AngularFire6.0での変更点 使い方 Firebase AngularFireAuth(おまけ) 参考資…

【Angular】ngTemplateOutletディレクティブの使い方

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 概要 ngTemplateOutletの使い方 ngTemplateOutletとは? 構文 例 応用編 $implicit ngTemplateOutletで複数のオブジェ…

【Ionic/Angular】Android Studioの初期設定で少し躓いたところ

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 概要 Android Studioの初期設定で少し躓いたところ 1 ライセンスが許可されていないため一部のAndroid SDKパッケージ…

【Angular/TypeScript】Spread Operator(...)【ドット3つ】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 概要 Spread Operator(...) 意味 使い方 今後に向けて 参考 概要 Angular After Tutorialに取り組んでいると、見慣れ…

【Angular】Excelやスプレッドシートのような表を作ってみた⑥【テキスト修正時のフォント色変更(クラス付与)編】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 概要 実装した機能(?)紹介 テキスト修正時のフォント色変更(クラス付与)編 テーマ 前提 コード ポイント 今後に向けて…

【Angular】Excelやスプレッドシートのような表を作ってみた⑤【要素(div/input)切り替え(スタイルバインディング)編】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 概要 実装した機能(?)紹介 要素(div/input)切り替え(スタイルバインディング)編 テーマ 前提 なぜindexを使わない? …

【Angular】Excelやスプレッドシートのような表を作ってみた④【mat-button-toggle-group編】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 概要 実装した機能(?)紹介 mat-button-toggle-group編 テーマ 前提 コード ポイント 今後に向けて 参考 概要 この度、…

【Angular】Excelやスプレッドシートのような表を作ってみた③【デザイン修正編】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 概要 実装した機能(?)紹介 デザイン修正編 テーマ 前提 コード ポイント 今後に向けて 参考 概要 この度、作りたかっ…

【Angular】Excelやスプレッドシートのような表を作ってみた②【mat-icon編】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 概要 実装した機能(?)紹介 mat-icon編 テーマ 前提 コード ポイント 今後に向けて 参考 概要 この度、作りたかった表…

【Angular】Excelやスプレッドシートのような表を作ってみた①【mat-table編】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 概要 実装した機能(?)紹介 完成画像 mat-table編 テーマ 前提 コード ポイント 今後に向けて 参考 概要 以前にmat-tab…

【Angular】ngModelChangeイベントとchangeイベントの比較

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 概要 ngModelChangeイベントとchangeイベントの比較 ngModelChangeイベント 使い方 changeイベント 使い方 比較 発火…

【Angular】disabledプロパティによるフォームの有効性確認【[disabled]】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 概要 disabledプロパティによるフォームの有効性確認 disabledプロパティとは? Angularにおけるdisabledプロパティの…

【Angular/Material】ネストがある配列データをmat-tableで表示させる

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 背景 ネストがある配列データをmat-tableで表示 前提条件 mat-tableの基本フォーマット ネストがある配列データの表示…

【Angular/MongoDB】ネストが深いオブジェクトの表示

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 背景 深いネストにあるオブジェクトを表示させる 前提条件 1.Keyを指定(objectName.propertyName) 2.Object.keysメソ…

【Angular/MongoDB/エラー】オブジェクトデータの表示

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 背景 オブジェクトの表示 問題の内容 原因 解決方法 1.Keyを指定(objectName.propertyName) 2.パイプjson 3.Object.ke…

【Angular】Angular Materialの導入

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 背景 内容 Angular Materialとは? 導入方法 使用方法 今後に向けて 参考 背景 Angularアプリで簡単にレスポンシブデ…

【エラー解決】error TS2339: Property 'map' does not exist on type 'Observable<User>'【canActivate/Rxjs/Udemy】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 背景 解決方法 エラー内容 参考サイト 解決コード 解説 参考 背景 UdemyのAngular講座で勉強中です。 ページ遷移の時…

【Angular5】モジュールのまとめ【最新ではない】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 背景 NgModuleで機能を整理する NgModule app root Module(ルートモジュール) Feature Modules(機能モジュール) Share…

【Angular】Pipe(パイプ)を使った日付の日本語表示【エラー】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 背景 Angular(TypeScript)日付の日本語表示 localeとは? エラー再現 解決 参考 背景 UdemyのAugular講座をしていたら…

Angular CLI

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 Angular CLIについて Angular CLIとは? 何ができる? コマンド例 Angular CLIについて Angular CLIとは? Angularの…

【Angular】ルーティングを分割して複数ファイルで管理する【loadChildren】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 背景 ルーティングを複数ファイルで管理する index.htmlを編集する app.component.htmlを編集する app-routing.module…

【Angular】console.logの表示方法【基礎中の基礎】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 背景 内容 component.htmlにクリックイベントを追加 component.tsにメソッドを追加 開発者ツールで値「ok」を確認 今…

【Angular】ルーティング(app-routingを使う場合)

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 背景 app-routingを使うルーティングの実装 今後に向けて 参考 背景 Angularのルーティングを学習したので、備忘録を…

【Angular】ルーティング(app-routingを使わない場合)

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 背景 app-routingを使わないルーティングの実装 今後に向けて 参考 背景 Angularのルーティングを学習したので、備忘…

【Angular】DOMとデータバインディング【気付き】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 背景 内容 AngularとDOMについて データファーストの考え方 今後に向けて 背景 以前Reactで個人アプリを作っていた際…

【Angular × Laravel 連携・環境構築④】Angularのビューを表示させるまで【全4回】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 背景 概要 Laravel×Angularの環境構築 welcome.blade.phpを編集 routeを作成 PageControllerを作成 index.htmlのBase…

【Angular × Laravel 連携・環境構築③】Angularのビューを表示させるまで【全4回】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 背景 概要 Laravel×Angularの環境構築 NPM ANGULAR CLIのインストール LaravelにAngularプロジェクトを導入 Laravelの…

【Angular × Laravel 連携・環境構築②】Angularのビューを表示させるまで【全4回】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 背景 概要 Laravel×Angularの環境構築 MySQLのDATABASEの値を変更 MySQLコンテナに入ってみる(動作確認) workspaceコ…

【Angular × Laravel 連携・環境構築①】Angularのビューを表示させるまで【全4回】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。 【目次】 背景 概要 Laravel×Angularの環境構築 Laradockのインストール .envファイルのコピーと編集 コンテナの起動 Laravelプ…