AngularでjQueryを使用する

● npmでインストールして使用する

・ 1. jquery をインストールする

npm install jquery --save

・ 2. jquery の型ファイルをインストールする

npm install --save jquery @types/jquery

プロジェクトフォルダのnode_modulesフォルダに@typesフォルダが作成され、jQueryの型定義ファイルがインストールされます。

・ 3. tsconfig.app.json で読み込んで使用する

types に jquery を追加

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types" : [
      "jquery"
    ]
  },

・ 4. 使用する

src\app\app.component.ts

  toggleTitle(){
    const jqobj :JQuery = $(".title");
    jqobj.slideToggle().fadeOut();
  }

src\app\app.component.html

<h1 class="title" style="display:none">
  {{title}}
</h1>
<button (click)="toggleTitle()"> clickhere</button>

・ 5. アプリの実行する

 ng serve --open
No.1829
08/11 12:45

edit