jQuery
angular
Bootstrap3
VSCode

Angular2~でBootstrap3を使う手順

More than 1 year has passed since last update.

AngularでjQueryとBootstrap3を使う手順

あらかじめ

  • node.js、npmがインストールされていること

手順

  • モジュールをインストール
at-project-home
npm install bootstrap --save
npm install jquery --save
npm install @types/jquery --save-dev
  • .angular-cli.jsonを修正
.angular-cli.json
{
      ...

      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],

      ...
}
  • jQueryインポートして使う
app.component.html
import { Component, AfterViewChecked  } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewChecked {
  title = 'app';
  ngAfterViewChecked() {
    $('div.error').each((idx, elem) => elem.setAttribute('style', 'color:red;') );
  }
}

これだけ

http://deanmalone.net/post/using-jquery-from-angular2/
https://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular