月: 2018年3月

## 発生したエラー app.component.tsで、コンストラクタにHttp型の引数を指定するとNo provider for Http!エラーが発生した ### エラー内容 ```language-typescript ERROR Error: No provider for Http! at injectionError (reflective_error...

Angularを使って、htmlのtextareaに入力可能な残り文字数を表示させるサンプルプログラムです。 残りの入力文字数が少なくなってきたら赤文字にして警告し、文字数オーバーしたら太字で強調します。 ## プログラム ```language-typescript import ...

## 発生した事象 formに設置したsubmitボタンのdisabled制御にFormのinvalidプロパティを使おうとしたが、下記のエラーが発生する。 ```language-typescript AppComponent.html:3 ERROR TypeError: Cannot read property 'invalid' of undefined ...

Angularを使っていると、ブラウザのconsoleに下記のメッセージが表示される場合があります。 ```language-bash Angular is running in the development mode. Call enableProdMode() to enable the production mode. ``` これは、Angularが開発モ...

Angulerでは、ngIf, ngSwitch, ngForなどを使用することで、if,switch,forの制御を行うことができます。 下記のコードがngIf, ngSwitch, ngForを使ったサンプルです。 ## サンプルコード ```language-typescript import { Component } from '@...

AngulerでngModelを使用したとき、ブラウザのconsoleに下記のエラーが出る場合があります。 ```language-typescript Unhandled Promise rejection: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input' `...

Angulerで、JavaScriptの日付型データを書式して表示したい場合は、パイプの`date`を使うと良いです。 ```language-typescript import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` {{curDate | date...

Angularでiframeを使ったページを作っているとき、iframeで表示させるページを動的に決定させようとすると、エラー"unsafe value used in a resource URL context"が出ることが有ります。 ## サンプルコード ```language-typescript import { Compo...

Angularではjsの変数をhtmlへバインドする時、変数にHTMLが入っている場合はHTMLタグが自動で取り除かれます。 これはセキュリティを考慮した振る舞いです。 ```language-typescript import { Component } from '@angular/core'; @Component({ ...

jsのフレームワークであるAngulerでは、QuickStartプロジェクトというひな型プロジェクトが用意されています。 今回は、このQuickStartプロジェクトを手元のPCで実行する方法を説明します。 ## node.jsのインストール 下記のページからnode.jsを...

## 発生した現象 angularのQuickStartで、npm startすると下記のエラーが出る。 ```language-bash $ npm start ... C:\angular\quickstart\node_modules\concurrently\src\main.js:230 spawnOpts.env = Object.assign({FORCE_COLOR: s...