ng-metamagic-extensions/src/bootstrap/scrollview/scrollview.component.ts

[](https://badge.fury.io/js/ng-metamagic-extensions) []() [![NPM](https://nodei.co/npm/ng-metamagic-extension

import {AfterViewInit, Component, Input, OnInit} from '@angular/core';
import {ScrollViewService} from "./scrollview.service";

@Component({
  selector: 'scroll-view',
  template:`

      <div [attr.id]="elementId" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
              <li *ngFor="let scroll of data;let i =index"  [attr.data-target]="'#'+elementId" [attr.data-slide-to]="i" class="active" [ngClass]="{'active':scroll.active}"></li>
          </ol>
          <!-- Wrapper for slides -->
          <div class="carousel-inner">
              <div class="item" [ngClass]="{'active':scrollData.active}"  *ngFor="let scrollData of data" >
                  <div class="text-center">{{scrollData.title}}</div>
                  <ng-container *ngIf="isContent">
                      <div [innerHTML]="scrollData.content"></div>
                  </ng-container>
                  <ng-container *ngIf="!isContent">
                      <img [src]="scrollData.img" alt="Los Angeles" style="width:100%;">
                      <div class="carousel-caption">
                          <h3>{{scrollData.caption}}</h3>
                      </div>
                  </ng-container>
              </div>
              <!-- Left and right controls -->
              <a class="left carousel-control" [attr.href]="'#'+elementId" data-slide="prev">
                  <span class="glyphicon glyphicon-chevron-left"></span>
                  <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" [attr.href]="'#'+elementId" data-slide="next">
                  <span class="glyphicon glyphicon-chevron-right"></span>
                  <span class="sr-only">Next</span>
              </a>
          </div>
      </div>

  `,
  providers :[ScrollViewService]
})
export class ScrollViewComponent implements OnInit,AfterViewInit {

  @Input()
  httpUrl : string;

  @Input()
  httpMethod : string;

  @Input()
  dataReader : string;

  @Input()
  scrollViewBindData : any;

  @Input()
  isContent : boolean = false;

  data : any;

  elementId : any;

  constructor(private scrollViewService : ScrollViewService) {
    this.elementId = 'scroll'+Math.round(Math.random()*200);
  }

  ngOnInit() {
  }

  ngAfterViewInit(){
    if(this.httpMethod && this.httpUrl){
      this.scrollViewService.fetchData(this,this.httpUrl,this.httpMethod);
    }
    else if(this.scrollViewBindData){
      this.setData(this.scrollViewBindData);
    }
  }

  setData(httpResponse: any){
    let scrolldata = this.getResponseData(httpResponse);
    if(scrolldata){
      this.data = scrolldata;
    }
  }

  getResponseData(httpResponse : any){
    let responsedata = httpResponse;
    let dr = this.dataReader.split(".");
    for(let ir = 0 ; ir<dr.length; ir++){
      responsedata = responsedata[dr[ir]];
    }
    return responsedata;
  }
}