Angular

Angular

Reactive Formsでフォーム作成方法 – Angular

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

Visual Studio CodeにESLintプラグインをインストールする方法(Prettier連携) – Angular

Visual Studio CodeにESLintプラグインをインストールする方法(Prettier連携) - Angular プラグイン VSCodeにESLintプラグインをインストールします。 依存関係インストール $ npm i -...
Angular

Angular8で追加された新機能Differential Loading(差分ロード)

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

The serve command requires to be run in an Angular project, but a project definition could not be found.

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

Angular5の@ViewChildと@ViewChildrenの違い

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

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

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

Angular7ではIvyは含まれておらず、開発中とのことです

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

Angular6からAngular7にバージョンアップする方法

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

Could not find module “@angular-devkit/build-angular”

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

Cannot find module ‘@angular/compiler-cli’

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

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

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

Angular をIEでデバッグする方法

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

Angular で別端末のブラウザからng serveを確認する方法

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

Angular のJITコンパイラとAOTコンパイラ

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

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

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

Angular CLIでプロキシファイルを設定する方法

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

jasmineのitに第三引数でミリ秒が指定できる

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

AngularのテストをChromeではなくIEでしてみる方法

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

TypeScriptでDOM要素を作成する

TypeScriptでDOM要素を作成する Angularが公式にサポートしている言語はTypeScriptなので、TypeScriptでDOMの操作をしてみます。JSと変わりありませんが、型(インタフェース名)は意識する必要があります。 ...
Angular

AngularでMutationObserverの使い方

AngularでMutationObserverの使い方
Angular

Angular でサブディレクトリにビルドする方法

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

Angular の@ViewChildの使い方

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

Angular の@HostListener の使い方

Angular の@HostListener の使い方
Angular

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

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

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

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

Angular の#(シャープ)がつく変数

Angular の#(シャープ)がつく変数
Angular

Angular でデコレータを作成してみる

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

Angular でpipeの使い方

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

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

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

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

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

Angularにng-bootstrapをインストールする方法と使い方

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

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

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

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

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

Angular のルーティングの基本とRoutes の使い方

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

Angular のObservable とSubject でRxJSの仕組みを理解する

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

Angular の@Output の使い方

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

Angular のtrigger 関数でアニメーションを実装する方法

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

Angular のサービスクラスの作り方

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

Angular で複数コンポーネントを連携する

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

Angular の標準のパイプ機能の使い方

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

Angular でTypeScript のエイリアス機能を利用してimport文を簡潔に記述する

Angular でTypeScript のエイリアス機能を利用してimport文を簡潔に記述する Angular プロジェクトを作成すると、プロジェクト名 - src -tsconfig.jsonファイルが作成されます。 tsconfig....
Angular

Angular でコンポーネントのスタイルシートをcssからstylusに変更する方法

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

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

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

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

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

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

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

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

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

Angularにngx-bootstrapをインストールする方法

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

AngularとTypeScriptでSPAを作成する

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