Angular2~でBootstrap3を使う手順

AngularでjQueryとBootstrap3を使う手順

• ベースはAngular CLIで新規生成したコード
• jQueryはVSCodeで補完できるようにする

あらかじめ

• 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

---