プログラム Angular Webアプリ開発入門４
Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'wp_filter_content_tags' not found or invalid function name in /home/yuji1114/yuji-ft.com/public_html/wp-includes/class-wp-hook.php on line 287
Angular
プログラムAngular Ng2SearchPipeModule 検索機能の実装
はじめに Angular でJSONファイルに登録されているコードネームのフィルター/検索機能を実装する。 Ng2SearchPipeModule 今回使用するのはNg2SearchPipeModuleである。 インストール方法 np...
プログラムAngular mouseover
はじめに 今回は現在作成してるアプリケーションのボタンにマウスカーソルを合わせると自動で画像が表示される機能を実装していく。 mouseover() mouseover()は、マウス系のイベント処理でカーソルが特定のHTML要素内に入った...
プログラムAngular Material サイドメニュー
はじめに 今回はAngular Materialのdrawerを利用しヘッダーとフッターの間に折りたたみ可能なサイドコンテンツを表示できるようにしてみる。 Angular Material, Angular CDKのインストール プロジェ...
プログラムAngular ngClass ngStyle
ngClassについて スタイルには、classとstyleの他に、「ngClass」「ngStyle」というものがある。 これはAngular独自のスタイル設定のためのディレクティブである。 今回は3つのチェクボックスをON/OFF...
プログラムAngular ngFor ngSwitch
ngForによる繰り返し処理 繰り返しタグの表示を行いたい場合は、「ngFor」という構造ディレクテイブを使う。構造ディレクテイブとはテンプレートの中に記述できる、特別な役割を持った命令みたいなものである。 下記のようなものを作る he...
プログラムAngular 日時のリアルタイム
日時のリアルタイムを表示させる方法 hello.component.html <div id="body"><h1>{{title}}</h1><p>{{ today() }}</...
プログラムAngular Webアプリ開発入門２０
はじめに 今まで、コマンドラインから「ng serve --open」と入力し、Angularが持つ内部Webサーバーを使って、アプリケーションの動作確認をしてきた。この方法ではレンタルサーバーなどのWebアプリケーションを配置することが...
プログラムAngular Webアプリ開発入門１９
はじめに 前回の続きで、今回は項目を増やす。そのため、データモデルであるRecipeクラスを修正する。これまで、「id」「name」「miniute」「feature」の4項目だったが、「manner」「serve」「ingre」の3つの...
プログラムAngular Webアプリ開発入門１８
はじめに 今回からテキストボックスに文字列を入力すると、データを検索できる仕組みを作っていく。一覧ページと詳細ページともに、RecipeServiceを経由してデータを取得できるようにする。 データを管理するサービスを導入する 今回はデー...
プログラムAngular Webアプリ開発入門１７
はじめに 画面遷移では、「一覧をクリックすると、その詳細情報が表示される」というように、「主たるデータページ」から「その詳細ページ」に遷移する方式のものもある。こうした構成をとるものを「マスター／ディテイルアプリ(master-detai...
プログラムAngular Webアプリ開発入門１６
はじめに これまで、simpleformというプロジェクトに、「テンプレート駆動版足し算」「リアクティブ版の足し算」「FormBuilderを使ったコーヒーの登録」という3つのコンポーネントを作った。これらのうちどのコンポーネントを表示す...
プログラムAngular Webアプリ開発入門１５
はじめに 前回はラジオボタン、チェックボタンの作成方法について学んだ。今回はドロップダウンリストについて学んでいく。ラジオボタンとほぼ同じように実装することができる。 選択肢とFormControlを用意する まずは選択肢とFomrCo...