A angular2 component skeleton to implement a section sticky header

sticky-section

import {Component, OnInit, ElementRef, Output, EventEmitter, HostListener,Input,Output } from '@angular/core';

@Component({
    selector: 'section',
    templateUrl: './section.component.html',
    styleUrls: ['./section.component.css']
  
})
export class SectionComponent implements OnInit {

    @Output() sectionPosition = new EventEmitter();
    @Input()  content: Section;

    constructor(private element: ElementRef) {}

    ngOnInit() {
        this.sectionPosition.emit({ name: this.content.name, position: this.element.nativeElement.offsetTop });
    }


    @HostListener('window:resize', ['$event'])
    onResize(event) {
      this.sectionPosition.emit({ name: this.content.name, position: this.element.nativeElement.offsetTop });
    }

}