angular4 scroll element into viewport

by mr_blond97

HTML

<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.8.5/dist/zone.min.js"></script>
<script src="https://unpkg.com/rxjs@5.2.0/bundles/Rx.min.js"></script>
<script src="https://unpkg.com/@angular/core@4.0.1/bundles/core.umd.js"></script>
<script src="https://unpkg.com/@angular/common@4.0.1/bundles/common.umd.js"></script>
<script src="https://unpkg.com/@angular/compiler@4.0.1/bundles/compiler.umd.js"></script>
<script src="https://unpkg.com/@angular/platform-browser@4.0.1/bundles/platform-browser.umd.js"></script>
<script src="https://unpkg.com/@angular/platform-browser-dynamic@4.0.1/bundles/platform-browser-dynamic.umd.js"></script>
<my-app></my-app>

CSS

.wrapper {
    max-height: 300px;
    overflow-y: scroll;
}

li {
  background-color: #50514F;
  line-height: 90px;
  box-shadow: 0px 5px 10px rgba(136, 136, 136, 0.25);
  margin-bottom: 10px;
  min-height: 100px;
}

li:nth-child(2n) {
  background-color: #F25F5C;
}

li:nth-child(3n) {
  background-color: #FFE066;
}

li:nth-child(4n) {
  background-color: #247BA0;
}

li:nth-child(5n) {
  background-color: #70C1B3;
}

TypeScript

let { Component, NgModule, Input } = ng.core;

@Component({
  selector: 'my-app',
  template: `
    <button (click)="scrollToElement()">Scroll To 8th Element</button>
    <div class="wrapper">
    	<li *ngFor="let item of itemList">{{item}}</li>
    </div>
  `,
})
class HomeComponent {
    text = 'foo';
    testObject = {fieldFirst:'foo'};
    itemList = [
    	'1', 
    	'2', 
      '3', 
      '4',
      '5',
      '6',
      '7',
      '8 This one should be scrolled into viewport',
      '9',
      '10',
      '11',
      '12',
    ];
    
    scrollToElement() {
    }
}

const { BrowserModule } = ng.platformBrowser;

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ HomeComponent ],
  bootstrap:    [ HomeComponent ]
})
class AppModule { }

const { platformBrowserDynamic } = ng.platformBrowserDynamic;
platformBrowserDynamic().bootstrapModule(AppModule);