Angular4
Angularの復習をしようと思った 今回の開発で、Angularを使った。 基本フロント側は一人で開発をしていたが、 1画面で扱っているコンポーネントの数が600個をこえたり、 画面間で引き継ぐ項目がどんどん増えてきたりで、 だんだん大変なことになってきた。 …
Angular2/4を使ってmodalウィンドウを表示する bootstrap標準のmodalウィンドウを、 Angularから開こうと頑張った話です。 bootstrapとAngular以外は使っておりません。 Angular2/4を使ってmodalウィンドウを表示する 0. 準備 0-1. プロジェクトの作成 0-2. …
ngOnChangesを使って、子に渡したプロパティが変わったことを検知する 親コンポーネント /** app.component.ts */ export class AppComponent { public datas = 1; onClick() { this.datas ++; } } <button (click)="onClick()">押してください</button> <app-child [parentProperty]='datas'></app-child> 子コンポーネント
結論 *ngIfを使うとComponent自体消えてしまうが、 [hidden]を使うと非表示になるだけでComponentはそのまま残る。 *ngIfの場合 <app-sample *ngIf="showFlg"></app-sample> [hidden]の場合 <app-sample [hidden]="showFlg"></app-sample> いきさつ Angular2/4にて、こんなことがあった 2つのComponentA、ComponentBがある タブAがアクティブの時Co…
Angular2/4にてjQueryを使いたい どうしても使いたいときってありますよね。 Angular2/4にてjQueryを使いたい 0. プロジェクトを立ち上げる 1. index.htmlファイルにてjQueryを読み込む 2. AppComponentにて「アンビエント宣言」をする 3. app.component.ts…
Angular2/4にてテーブルのソートを簡単に行ったりpagerを簡単に作ったりしたい pagerだけ作るのであれば以下のmoduleでも良い。 github.com テーブルのソートなども行いたかったので、ngx-datatableを利用することにした。 github.com star数も1800超えで、…
問題 Angular4で作っているアプリケーションにてdatatableを使おうとしたところ、 コンパイル時に以下のエラーが発生 In ambient enum declarations member initializer must be constant expression 解決方法 typescriptのバージョンを上げればよいらしい。…
Googleが提唱している「MaterialDesign」を、Angular2/4上で簡単に使うことができる 「Anglar Material」を導入しようとしたら、moduleの読み込みに失敗しました。 has no exported member 'MdButtonModule'. CHANGELOG.mdを見てみると どうやら2017-10-05の…
Angular2/4にて、ユーザのキー入力を検出する Angular2/4にて、ユーザがフォームへ入力をしたこと検出してみたいと思います。 さらに、ユーザがエンターキーを押したときに、今まで入力した内容を取得してみます。 Angular2/4にて、ユーザのキー入力を検出す…
Angular2/4にてngSwitchを使ってtemplateの切り替えを行う 「routerを使う程ではないけど、templateを部分的に書き換えたいな〜」と思ったので、 ngSwitchを使用してtemplateの部分的な切り替えを行おうと思います。 Angular2/4にてngSwitchを使ってtemplate…
Angular2/4のLifecycle Hooksを理解する Angular2/4のLifecycle Hooksのうち、ngOnInitについて簡単な実験をして、 どのタイミングでngOnInitが発火するのか確かめてみることにします。 Angular2/4のLifecycle Hooksを理解する 前提 0. プロジェクトを立ち上…
コンポーネントから別のコンポーネントに値を送る 親子関係があるときは、@Input()を使用することにより親から子へ値を送りました。 今回、あるコンポーネントから親子関係にないコンポーネントへ、 サービスを介して値を送る実装をしてみたいと思います。 …
Angular4を使ってgoogle mapを表示する 「google map上でクリックしたときにマーカをプロットし、その位置情報をAjaxで投げてDB上に保存する」ということがしたくなりました。 google map上での操作については「Maps JavaScript API」を使用すればできるので…