Eclipseのステップカウンタ(step counter)プラグイン設定方法
Angular
Reactive Formsでフォーム作成方法 – Angular
Reactive Formsでフォーム作成方法 - Angular 項目 バージョン Angular 16.0.2 node 18.16.0 npm 9.5.1 プロジェクト作成 プロジェクト作成します。 $ ng n reactive-t...
Visual Studio CodeにESLintプラグインをインストールする方法(Prettier連携) – Angular
Visual Studio CodeにESLintプラグインをインストールする方法(Prettier連携) - Angular プラグイン VSCodeにESLintプラグインをインストールします。 依存関係インストール $ npm i -...
Angular8で追加された新機能Differential Loading(差分ロード)
Angular8で追加された新機能Differential Loading(差分ロード) 去年の末あたりにAngular7がリリースされたと思ったのですが、もうすでにAngular8がリリースされました。大体半年スパンでメジャーバージョンが...
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とコマンドを打...
Angular5の@ViewChildと@ViewChildrenの違い
Angular5の@ViewChildと@ViewChildrenの違い Angular の@ViewChildren もしくは @ViewChildを使用して親コンポーネントから子コンポーネントのメソッドなどにアクセスできるようになります...
Angular7からドラッグアンドドロップが色々できるようになっています
Angular7からドラッグアンドドロップが色々できるようになっています
Angular7ではIvyは含まれておらず、開発中とのことです
Angular7ではIvyは含まれておらず、開発中とのことです 次世代レンダリングエンジンのIvyは、Angular7には含まれていないようです。 公式ブログによると、「現在、下位互換性を検証中!」とのことで、もうじきIvyになると思われま...
Angular6からAngular7にバージョンアップする方法
Angular6からAngular7にバージョンアップする方法 Angularは6か月毎にメジャーバージョンアップしていますが、2018/10/19にAngular7が正式にリリースされました。 Angular6からAngular7にバージ...
Could not find module “@angular-devkit/build-angular”
Could not find module "@angular-devkit/build-angular" こんなエラーが出たら npm install --save-dev @angular-devkit/build-angular で解...
Cannot find module ‘@angular/compiler-cli’
Cannot find module '@angular/compiler-cli' ng serve --oでこのエラーが発生したら、node_modulesを一旦消して npm install で解決しました。
Angular で右クリックを検知する方法
Angular で右クリックを検知する方法
Angular をIEでデバッグする方法
Angular をIEでデバッグする方法 VSCodeのプラグインにChrome for Debuggerをインストールしておきます。 launch.jsonに「」を登録しておき、ng serveしたらF5を押します。 そうするとChrom...
Angular で別端末のブラウザからng serveを確認する方法
Angular で別端末のブラウザからng serveを確認する方法 MacのVSCodeで開発していて、WindowsのIE11で動作確認したくなりました。 VSCodeのターミナルでng serveの--hostオプションを使用すると実...
Angular のJITコンパイラとAOTコンパイラ
Angular のJITコンパイラとAOTコンパイラ AngularにはコンパイラがJITとAOTがあります。 JITは実行時にブラウザでアプリケーションをコンパイルします。 AOTはビルド時にアプリケーションをコンパイルします。また、テン...
Angular でウィンドウズアプリ(EXE)を起動する方法
Angular でウィンドウズアプリ(EXE)を起動する方法
Angular CLIでプロキシファイルを設定する方法
Angular CLIでプロキシファイルを設定する方法 Angular開発時にフロントエンドがAngularでAPIがJavaだったりするとそれぞれローカル開発環境が異なると思います。 Angular : java: こんな感じで開発するこ...
jasmineのitに第三引数でミリ秒が指定できる
jasmineのitに第三引数でミリ秒が指定できる Angularのテストコードの書き方については「Angular でテストコードの書き方を纏めました」でほぼほぼ書きました。あとはディレクティブのテストがダミーのコンポーネント作ってあげたり...
AngularのテストをChromeではなくIEでしてみる方法
AngularのテストをChromeではなくIEでしてみる方法 Angularのテストコードの書き方については「Angular でテストコードの書き方を纏めました」で結構書いたつもりです。新たに新規記事でIEブラウザでテストする方法を書いて...
TypeScriptでDOM要素を作成する
TypeScriptでDOM要素を作成する Angularが公式にサポートしている言語はTypeScriptなので、TypeScriptでDOMの操作をしてみます。JSと変わりありませんが、型(インタフェース名)は意識する必要があります。 ...
AngularでMutationObserverの使い方
AngularでMutationObserverの使い方
Angular でサブディレクトリにビルドする方法
Angular でサブディレクトリにビルドする方法 Angularでビルドするには ng build もしくはpackage.jsonのnpm-scriptsを変更していないなら npm run build を実行すれば、srcと同じ階層の...
Angular の@ViewChildの使い方
Angular の@ViewChildの使い方 Angular の@ViewChildを使えば、parent to view child というように親コンポーネントから子コンポーネントのメソッドなどにアクセスできるようになります。 またコ...
Angular の@HostListener の使い方
Angular の@HostListener の使い方
Angular でカバレッジレポートを出力する
Angular でカバレッジレポートを出力する
Angular でテストコードの書き方を纏めました
Angular でテストコードの書き方を纏めました
Angular の#(シャープ)がつく変数
Angular の#(シャープ)がつく変数
Angular でデコレータを作成してみる
Angular でデコレータを作成してみる Angular で独自にデコレータを作成してみます。例えばあるイベントハンドラが呼ばれたときにDBに登録する、といったことがデコレータで実現することができます。 が、面倒なのでここではコンソール出...
Angular でpipeの使い方
Angular でpipeの使い方 Angular にはpipeという機能があります。データをフォーマットするための仕組みです。 {{式 | パイプ名}} というように記述します。Angular には標準でいくつか標準で提供されているpip...
Angular でEnum型を初期化してテンプレートで使用する方法
Angular でEnum型を初期化してテンプレートで使用する方法
Angular のテンプレート参照変数の使い方
Angular のテンプレート参照変数の使い方
Angularにng-bootstrapをインストールする方法と使い方
Angularにng-bootstrapをインストールする方法と使い方 ng-bootstrap をインストールする方法です。 npm install --save @ng-bootstrap/ng-bootstrap ng-bootstr...
Angular の[disabled]バインディングはtrueかfalseで効くようです
Angular の[disabled]バインディングはtrueかfalseで効くようです
Angular のngClass ディレクティブの使い方
Angular のngClass ディレクティブの使い方
Angular のルーティングの基本とRoutes の使い方
Angular のルーティングの基本とRoutes の使い方 Angularにはルーティングという機能があります。描画領域をコントロールする仕組みです。 ルーティングを実現させるには、RoutesとRouterModuleをインポートする必...
Angular のObservable とSubject でRxJSの仕組みを理解する
Angular のObservable とSubject でRxJSの仕組みを理解する RxJSを使って簡単なデータの受け渡しをします。 まずコンポーネントを作成します。 ng generate component abc ちなみにAngu...
Angular の@Output の使い方
Angular の@Output の使い方 @Inputの使い方は理解しやすいですが、@Outputの使い方は理解するのが少し難しい気がします。 コンポーネントとコンポーネントの連携ではなく、コンポーネントの中にコンポーネントが存在するよう...
Angular のtrigger 関数でアニメーションを実装する方法
Angular のtrigger 関数でアニメーションを実装する方法 trrigerをインポートしてアニメーションを実装しますが、app.module.tsファイルにBrowserAnimationsModuleをインポートする必要がありま...
Angular のサービスクラスの作り方
Angular のサービスクラスの作り方 コンポーネントは部品です。テンプレートはビューです。ではサービスはというと、サーバーからデータを取得してくるビジネスロジックに当たります。 Angular のサービスクラスの特徴として、@Injec...
Angular で複数コンポーネントを連携する
Angular で複数コンポーネントを連携する Angular でコンポーネントとコンポーネントを連携する方法です。 abcとdefというコンポーネントを作成して実際に連携させてみます。 コンポーネント間の連携ではclassを定義しておくこ...
Angular の標準のパイプ機能の使い方
Angular の標準のパイプ機能の使い方 Angular にはパイプというビュー上の変数を加工(整形)する機能です。 例えば姓名が格納されている変数の末尾に「様」をつける、などがパイプを使って加工する機能例になります。 記述例は以下の通り...
Angular でTypeScript のエイリアス機能を利用してimport文を簡潔に記述する
Angular でTypeScript のエイリアス機能を利用してimport文を簡潔に記述する Angular プロジェクトを作成すると、プロジェクト名 - src -tsconfig.jsonファイルが作成されます。 tsconfig....
Angular でコンポーネントのスタイルシートをcssからstylusに変更する方法
Angular でコンポーネントのスタイルシートをcssからstylusに変更する方法 ng generate component コンポーネント名で、コンポーネントを作成すると以下のファイルが作成されます。 ファイル名 コンポーネント名....
Angular のngFor ディレクティブの使い方
Angular のngFor ディレクティブの使い方 AngularにはngForディレクティブというディレクティブが標準で用意されています。 for文でループする機能です。記述方法は以下の通りです。 <xxx *ngFor='let 仮引...
Angular のngIf ディレクティブの使い方
Angular のngIf ディレクティブの使い方
Angularのデータバインディングという仕組み
Angularのデータバインディングという仕組み
Angular で初期化時にTitleサービスを使用してタイトルを設定する – ngOnInit
Angular で初期化時にTitleサービスを使用してタイトルを設定する
Angularにngx-bootstrapをインストールする方法
Angularにngx-bootstrapをインストールする方法 ngx-bootstrapをインストールして、Angular6で使用する方法です。 npm install ngx-bootstrap --save ngx-bootstra...
AngularとTypeScriptでSPAを作成する
AngularとTypeScriptでSPAを作成する 前提 項目 バージョン OS Windows10 node v18.16.0 VS Codeが「VS Live Share」なんて便利なものを出してきたのでペアプログラミングができるし...