Угловой 2 - Bootstrap 3 - навигационная горизонтальная прокрутка

Question

У меня есть требование, когда мой вторичный навигатор динамически генерируется на основе данных с сервера. Мне нужно иметь такой же элемент управления ->

Мне нужно иметь метки стрелок слева и справа, чтобы пользователь мог прокручивать элементы. Я нашел пример кода с помощью JQuery. http://www.bootply.com/l2ChB4vYmC Но мне нужно достичь этого, используя Angular 2 и Bootstrap 3. Есть ли что-то подобное?

Answer 1

Нельзя быть чем-то похожим на Угловое 2. Вы также можете использовать это в Угловом 2. Вот plunkr, показывающий именно это.

@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 
    } 
    } 

Answer 2

ИЛИ Вы можете использовать это очень простой в использовании угловой библиотеки -

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