質問編集履歴

2 ガラッと変える。

kuniatsu

kuniatsu score 139

2017/03/23 20:41  投稿

angulerでのngbDropdownの使用方法
angulerでbootstrap3を使う方法の差
Angular&bootstrapを使いたいのですが、Dropdownがうまく動きません。
iconやボタン・Gridは正常に表示されています。
https://ng-bootstrap.github.io/#/components/dropdown
を参考に、
angularでbootstrapを使用する際に
ターミナルで
```ここに言語を入力
```ターミナルコマンド
npm install ng-bootstrap
```
 
 
をコマンドし、インストール
```ここに言語を入力
angular-cli.json内のstylesに追加
 
```ターミナルコマンド  
"styles": [
 "../node_modules/bootstrap/dist/css/bootstrap.css",
 "styles.css"
],
```
という形で、bootstrapを引っ張ってくる方法と、  
htmlファイルに
```ここに言語を入力
<div class="row">
 <div class="col">
   <div ngbDropdown class="d-inline-block">
     <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
     <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
       <button class="dropdown-item">Action - 1</button>
       <button class="dropdown-item">Another Action</button>
       <button class="dropdown-item">Something else is here</button>
     </div>
   </div>
 </div>
</div>
src/index.htmlの中のheadタグ内に
```ターミナルコマンド
<link rel="stylesheet" href="./css/bootstrap.min.css">
```
を追記しましたが、ボタンが表示されるだけで、dropdownメニューとして動きません。
と直接書くのではどのような差がありますか?
tsファイルの編集が足りていないのかとも思うのですが、サイトのtsソースが
```ここに言語を入力
import {Component} from '@angular/core';
@Component({
 selector: 'ngbd-dropdown-basic',
 templateUrl: './dropdown-basic.html'
})
export class NgbdDropdownBasic {
}
```
になっており、
selectorとtemplateUelとclass名はもともと準備しているコンポーネントが指定されており、[angular/core]はすでにimportされています。
他に入力することがないのですが、何か間違いや抜けがあるでしょうか?
詳しい方ご指摘お願いします。
  • Bootstrap

    2460 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • Angular2

    229 questions

1

kuniatsu

kuniatsu score 139

2017/03/23 09:46  投稿

ngbDropdownの使用方法
angulerでのngbDropdownの使用方法
Angular&bootstrapを使いたいのですが、Dropdownがうまく動きません。
iconやボタン・Gridは正常に表示されています。
https://ng-bootstrap.github.io/#/components/dropdown
を参考に、
ターミナルで
```ここに言語を入力
npm install ng-bootstrap
```
をコマンドし、インストール
```ここに言語を入力
angular-cli.json内のstylesに追加
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.css"
],
```
htmlファイルに
```ここに言語を入力
<div class="row">
<div class="col">
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
</div>
</div>
```
を追記しましたが、ボタンが表示されるだけで、dropdownメニューとして動きません。
tsファイルの編集が足りていないのかとも思うのですが、サイトのtsソースが
```ここに言語を入力
import {Component} from '@angular/core';
@Component({
selector: 'ngbd-dropdown-basic',
templateUrl: './dropdown-basic.html'
})
export class NgbdDropdownBasic {
}
```
になっており、
selectorとtemplateUelとclass名はもともと準備しているコンポーネントが指定されており、[angular/core]はすでにimportされています。
他に入力することがないのですが、何か間違いや抜けがあるでしょうか?
詳しい方ご指摘お願いします。
  • Bootstrap

    2460 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • Angular2

    229 questions

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る