Angular

Angular8で追加された新機能Differential Loading(差分ロード) 去年の末あたりにAngular7がリリースされたと思ったのですが、もうすでにAngular8がリリースされました。大体半年スパンでメジャーバージョン...

The serve command requires to be run in an Angular project, but a project definition could not be found. ng serveとコマンドを...

Angular5の@ViewChildと@ViewChildrenの違い Angular の@ViewChildren もしくは @ViewChildを使用して親コンポーネントから子コンポーネントのメソッドなどにアクセスできるようになりま...

Angular7からドラッグアンドドロップが色々できるようになっています

Angular7ではIvyは含まれておらず、開発中とのことです 次世代レンダリングエンジンのIvyは、Angular7には含まれていないようです。 公式ブログによると、「現在、下位互換性を検証中！」とのことで、もうじきIvyになると思わ...

Angular6からAngular7にバージョンアップする方法 Angularは6か月毎にメジャーバージョンアップしていますが、2018/10/19にAngular7が正式にリリースされました。 Angular6からAngular7にバ...

Could not find module "@angular-devkit/build-angular" こんなエラーが出たら npm install --save-dev @angular-devkit/build-angular ...

Cannot find module '@angular/compiler-cli' ng serve --oでこのエラーが発生したら、node_modulesを一旦消して npm install で解決しました。

Angular で右クリックを検知する方法

Angular をIEでデバッグする方法 VSCodeのプラグインにChrome for Debuggerをインストールしておきます。 launch.jsonに「」を登録しておき、ng serveしたらF5を押します。 そうするとCh...

Angular で別端末のブラウザからng serveを確認する方法 MacのVSCodeで開発していて、WindowsのIE11で動作確認したくなりました。 VSCodeのターミナルでng serveの--hostオプションを使用する...

Angular のJITコンパイラとAOTコンパイラ AngularにはコンパイラがJITとAOTがあります。 JITは実行時にブラウザでアプリケーションをコンパイルします。 AOTはビルド時にアプリケーションをコンパイルします。また...

Angular でウィンドウズアプリ(EXE)を起動する方法

Angular CLIでプロキシファイルを設定する方法 Angular開発時にフロントエンドがAngularでAPIがJavaだったりするとそれぞれローカル開発環境が異なると思います。 Angular : java: こんな感じ...

jasmineのitに第三引数でミリ秒が指定できる Angularのテストコードの書き方については「Angular でテストコードの書き方を纏めました」でほぼほぼ書きました。あとはディレクティブのテストがダミーのコンポーネント作ってあげた...

AngularのテストをChromeではなくIEでしてみる方法 Angularのテストコードの書き方については「Angular でテストコードの書き方を纏めました」で結構書いたつもりです。新たに新規記事でIEブラウザでテストする方法を書い...

Angular でサブディレクトリにビルドする方法 Angularでビルドするには ng build もしくはpackage.jsonのnpm-scriptsを変更していないなら npm run build を実行すれば、srcと...

Angular の@ViewChildの使い方 Angular の@ViewChildを使えば、parent to view child というように親コンポーネントから子コンポーネントのメソッドなどにアクセスできるようになります。 ま...

Angular の@HostListener の使い方

Angular でカバレッジレポートを出力する

Angular でテストコードの書き方を纏めました

Angular の#（シャープ）がつく変数

Angular でデコレータを作成してみる Angular で独自にデコレータを作成してみます。例えばあるイベントハンドラが呼ばれたときにDBに登録する、といったことがデコレータで実現することができます。 が、面倒なのでここではコンソー...

Angular でpipeの使い方 Angular にはpipeという機能があります。データをフォーマットするための仕組みです。 {{式 | パイプ名}} というように記述します。Angular には標準でいくつか標準で提供されている...

Angular でEnum型を初期化してテンプレートで使用する方法

Angular のテンプレート参照変数の使い方

Angularにng-bootstrapをインストールする方法と使い方 ng-bootstrap をインストールする方法です。 npm install --save @ng-bootstrap/ng-bootstrap ng-boot...

Angular の[disabled]バインディングはtrueかfalseで効くようです

Angular のngClass ディレクティブの使い方

Angular のルーティングの基本とRoutes の使い方 Angularにはルーティングという機能があります。描画領域をコントロールする仕組みです。 ルーティングを実現させるには、RoutesとRouterModuleをインポートす...

Angular のObservable とSubject でRxJSの仕組みを理解する RxJSを使って簡単なデータの受け渡しをします。 まずコンポーネントを作成します。 ng generate component abc ちなみに...

Angular の@Output の使い方 @Inputの使い方は理解しやすいですが、@Outputの使い方は理解するのが少し難しい気がします。 コンポーネントとコンポーネントの連携ではなく、コンポーネントの中にコンポーネントが存在する...

Angular のtrigger 関数でアニメーションを実装する方法 trrigerをインポートしてアニメーションを実装しますが、app.module.tsファイルにBrowserAnimationsModuleをインポートする必要があり...

Angular のサービスクラスの作り方 コンポーネントは部品です。テンプレートはビューです。ではサービスはというと、サーバーからデータを取得してくるビジネスロジックに当たります。 Angular のサービスクラスの特徴として、@Inj...

Angular で複数コンポーネントを連携する Angular でコンポーネントとコンポーネントを連携する方法です。 abcとdefというコンポーネントを作成して実際に連携させてみます。 コンポーネント間の連携ではclassを定義して...

Angular の標準のパイプ機能の使い方 Angular にはパイプというビュー上の変数を加工（整形）する機能です。 例えば姓名が格納されている変数の末尾に「様」をつける、などがパイプを使って加工する機能例になります。 記述例は以下...

Angular でコンポーネントのスタイルシートをcssからstylusに変更する方法 ng generate component コンポーネント名で、コンポーネントを作成すると以下のファイルが作成されます。 ファイル名 ...

Angular のngFor ディレクティブの使い方 AngularにはngForディレクティブというディレクティブが標準で用意されています。 for文でループする機能です。記述方法は以下の通りです。 <xxx *ngFor='...

Angular のngIf ディレクティブの使い方

Angularのデータバインディングという仕組み

Angular で初期化時にTitleサービスを使用してタイトルを設定する

Angularにngx-bootstrapをインストールする方法 ngx-bootstrapをインストールして、Angular6で使用する方法です。 npm install ngx-bootstrap --save ngx-boots...

AngularとTypeScriptでSPAを作成する VS Codeが「VS Live Share」なんて便利なものを出してきたのでペアプログラミングができるし、エディタはVS Codeを使いましょう。 nodeはnodistでとりえ...