app.component.html

<div class="container"
  infiniteScroll
  [infiniteScrollDistance]="2"
  [infiniteScrollThrottle]="50"
  (scrolled)="onScroll()">
  <div *ngFor="let repository of repositories"
    class="row">
    <div class="col s12">
      <div class="card horizontal hoverable">
        <div class="card-image"><a [href]="repository.owner.html_url"
            target="_blank"><img [src]="repository.owner.avatar_url"></a></div>
        <div class="card-stacked">
          <div class="card-content">
            <h3>{{ repository.name }}</h3>
            <p class="flow-text">{{ repository.description }}</p>
          </div>
          <div class="card-action">
            <a class="waves-effect waves-light btn orange"
              [href]="repository.html_url"
              target="_blank"><i class="material-icons left">open_in_new</i>Read More</a>
            <a class="waves-effect waves-light btn-flat"><i
                class="material-icons left">star_border</i>{{ repository.stargazers_count }}</a>
            <a class="waves-effect waves-light btn-flat"><i
                class="material-icons left">error_outline</i>{{ repository.open_issues_count }}</a>
            <a class="waves-effect waves-light btn-flat"><i class="material-icons left">access_time</i>Submitted
              {{ dateInterval(repository.created_at) }} days ago by {{ repository.owner.login }}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div *ngIf="isLoading"
    class="row"
    [ngClass]="{'centered': repositories.length === 0}">
    <div class="col s12 center-align">
      <div class="preloader-wrapper small active">
        <div class="spinner-layer spinner-green-only">
          <div class="circle-clipper left">
            <div class="circle"></div>
          </div>
          <div class="gap-patch">
            <div class="circle"></div>
          </div>
          <div class="circle-clipper right">
            <div class="circle"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>