Angular

Angular

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

ReactiveFormsでフォーム作成方法-Angular項目バージョンAngular16.0.2node18.16.0npm9.5.1プロジェクト作成プロジェクト作成します。$ngnreactive-test--standaloneap...
Angular

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

VisualStudioCodeにESLintプラグインをインストールする方法(Prettier連携)-AngularプラグインVSCodeにESLintプラグインをインストールします。依存関係インストール$npmi--save-devpr...
Angular

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

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

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

TheservecommandrequirestoberuninanAngularproject,butaprojectdefinitioncouldnotbefound.ngserveとコマンドを打つと、「Theservecommandr...
Angular

Angular5の@ViewChildと@ViewChildrenの違い

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

Couldnotfindmodule"@angular-devkit/build-angular"こんなエラーが出たらnpminstall--save-dev@angular-devkit/build-angularで解決です。参考サイト
Angular

Cannot find module ‘@angular/compiler-cli’

Cannotfindmodule'@angular/compiler-cli'ngserve--oでこのエラーが発生したら、node_modulesを一旦消してnpminstallで解決しました。
Angular

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

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

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

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

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

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

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

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

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

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

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

AngularCLIでプロキシファイルを設定する方法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でビルドするにはngbuildもしくはpackage.jsonのnpm-scriptsを変更していないならnpmrunbuildを実行すれば、srcと同じ階層のdistディレクト...
Angular

Angular の@ViewChildの使い方

Angularの@ViewChildの使い方Angularの@ViewChildを使えば、parenttoviewchildというように親コンポーネントから子コンポーネントのメソッドなどにアクセスできるようになります。またコンポーネントの#...
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には標準でいくつか標準で提供されているpipeがあります。p...
Angular

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

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

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

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

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

Angularにng-bootstrapをインストールする方法と使い方ng-bootstrapをインストールする方法です。npminstall--save@ng-bootstrap/ng-bootstrapng-bootstrapは、boo...
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を使って簡単なデータの受け渡しをします。まずコンポーネントを作成します。nggeneratecomponentabcちなみにAngular6の場合はrx...
Angular

Angular の@Output の使い方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

AngularとTypeScriptでSPAを作成する

AngularとTypeScriptでSPAを作成する前提項目バージョンOSWindows10nodev18.16.0VSCodeが「VSLiveShare」なんて便利なものを出してきたのでペアプログラミングができるし、エディタはVSCod...