@Component({
  selector: 'slideIn',
  template: '<h1 [@scrollAnimation]="state">{{text}}</h1>',
  animations: [
    trigger('scrollAnimation', [
      state('show', style({
        transform: "translateX(0)"
      })),
      state('hide', style({
        transform: "translateX(-100%)"
      })),
      transition('show => hide', animate('1000ms')),
      transition('hide => show', animate('1000ms'))
    ])
]
})

export class SlideComponent {

  public state = 'hide';

  @Input() text: String;

  constructor(public el: ElementRef) {
  }

  @HostListener('window:scroll', [])
    checkScroll() {
      var elementPosition = this.el.nativeElement.offsetTop
      var scrollPosition = window.pageYOffset

      if (scrollPosition >= elementPosition) {
        this.state = 'show'
      } else {
        this.state = 'hide'
      }
}

<slideIn text="Top Header"></slideIn>
<slideIn text="Bottom Header"></slideIn>