CODEWITHSUNDEEP
angulartwitter-bootstrap-3scrollmenunav
Shilpa Nagavara
Shilpa Nagavara

Reputation: 1165

Angular 2 - Bootstrap 3 - navbar horizontal scroll

I have a requirement where my secondary navbar is dynamically generated based on the data from the server. I need to have a control similar to this --> enter image description here

I need to have arrow marks on the left and right to allow the user to scroll through the items. I found some sample code using JQuery here. http://www.bootply.com/l2ChB4vYmC But I need to achieve this using Angular 2 and Bootstrap 3. Is there something similar available?

Upvotes: 1

Views: 4994

Answers (2)

Abhishek Chandel
Abhishek Chandel

Reputation: 144

OR You can use this very easy to use angular library -

https://www.npmjs.com/package/angular2-drag-scroll

Upvotes: 0

lbrahim
lbrahim

Reputation: 3810

There does not need to be something similar like that for Angular 2. You can use that in Angular 2 as well. Here is a plunkr showing just that.

  @Component({
  selector: 'my-app',
  template: `
    <div class="container">
      <div class="scroller scroller-left"><i class="glyphicon glyphicon-chevron-left"></i></div>
      <div class="scroller scroller-right"><i class="glyphicon glyphicon-chevron-right"></i></div>
      <div class="wrapper">
        <ul class="nav nav-tabs list" id="myTab">
          <li *ngFor="let tab of tabs" class="{{tab.active ? 'active' : ''}}">
            <a href="#{{tab.name}}">{{tab.name}}</a>
          </li>
      </ul>
      </div>
    </div>
  `,
  })
  export class App {
    tabs: any[] = [];

    constructor() {
      for(var i = 1; i < 21; i++){
        this.tabs.push({
          name: "Tab" + i,
          active: i === 1 ? true : false
        });
      }
    }

    ngAfterViewInit(){
      //Do jquery stuff to access the DOM
    }
  }

Upvotes: 1

Related Questions