Bootsrap Buttons with dropdowns, convert to ng-bootstrap Buttons with dropdowns,

Question

Im beginner to Angular,I want to know how to correctly create this code for the ng-bootsrap ,I can do it using bootstrap-4 but I don't know Angular, Im follow this Ng-bootstrap drop down ,but not work please help me , Thanks

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Currency
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">USD</a>
          <a class="dropdown-item" href="#">AUS</a>
       
        </div>
      </div>
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
    </div>
  </div>
 
</div>

Quan VO · Answer 1 · 2017-12-20T10:50:41.690

0

If you use ng-bootstrap with Angular 5, you should install bootstrap via npm, like here. This is an example about dropdown menu. I'm using @ng-bootstrap/ng-bootstrap@1.0.0-beta.5 and I modified your code, worked fine:

<div ngbDropdown>
    <button type="button" class="btn btn-secondary" ngbDropdownToggle>
      Currency
    </button>
    <div ngbDropdownMenu>
      <a class="dropdown-item" href="#">USD</a>
      <a class="dropdown-item" href="#">AUS</a>
    </div>
</div>

Define a variable named items in your .ts file: items = ['A','B','C'], then replace your dropdown by:

<a class="dropdown-item" href="#" *ngFor="let item of items">{{item}}</a>

edited Dec 20 '17 at 10:50

answered Dec 20 '17 at 09:55

Quan VO

1,258
11
19

Sir, Im all ready installed that,But I Cant do set of the drop down , look at my snippet, im attach bootsrap-4 cdn, becuase I dont have Ng-bootstrap cdn – core114 Dec 20 '17 at 10:01
sir, you know how to bind drop down? i try t find some example but I dont see anything – core114 Dec 20 '17 at 10:30
look this one selected item not display http://plnkr.co/edit/?p=preview – core114 Dec 20 '17 at 10:36
i mean like this http://plnkr.co/edit/MpzcXb?p=preview, but this one is html code include for .ts file – core114 Dec 20 '17 at 10:39
You have to define your variable in .ts file. It's how Angular binding works. – Quan VO Dec 20 '17 at 10:43

score 0 · Accepted Answer · answered Dec 21 '17 at 11:30

I found the solution ,Now its work for me , Recommend for the ng-bootstrap team

GitHub

Live sample

<div class="input-group">
  <div class="input-group-btn">
    <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
      <button class="btn btn-secondary" ngbDropdownToggle>Action</button>
      <div class="dropdown-menu" ngbDropdownMenu>
        <button class="dropdown-item">One</button>
        <button class="dropdown-item">Two</button>
        <button class="dropdown-item">Four!</button>
      </div>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

Bootsrap Buttons with dropdowns, convert to ng-bootstrap Buttons with dropdowns,

2 Answers2