Angular

Reactive Formsでフォーム作成方法 - Angular 項目 バージョン Angular 16.0.2 node 18.16.0 npm 9.5.1プロジェクト作成プロジェクト作成します。$ ng n reactive-test...

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を押します。そうするとChromeが起...

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と同じ階層のdistデ...

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

Angular の@HostListener の使い方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

AngularとTypeScriptでSPAを作成する前提 項目 バージョン OS Windows10 node v18.16.0VS Codeが「VS Live Share」なんて便利なものを出してきたのでペアプログラミングができるし、エ...