I have successfully implemented an Expandable Header in Ionic 3 following a tutorial from Joshmorony. The header expands perfectly on scroll, as you can see in this GIF:
However, I am facing an issue where I want to expand the header on click instead of on scroll. Ideally, I would like the header to expand when clicking on a menu button.
The code snippet for my component is shown below:
shrinking-segment-header.ts
@Input('scrollArea') scrollArea: any;
@Input('headerHeight') headerHeight: number;
newHeaderHeight: any;
...
ngAfterViewInit() {
this.renderer.setElementStyle(this.element.nativeElement, 'height', this.headerHeight + 'px');
this.scrollArea.ionScroll.subscribe((ev) => {
this.resizeHeader(ev);
});
}
resizeHeader(ev) {
ev.domWrite(() => {
this.newHeaderHeight = this.headerHeight - ev.scrollTop;
if (this.newHeaderHeight < 0) {
this.newHeaderHeight = 0;
}
this.renderer.setElementStyle(this.element.nativeElement, 'height', this.newHeaderHeight + 'px');
});
}
And the way I call the component in my dashboard file:
dashboard.ts
<shrinking-segment-header [scrollArea]="myContent" headerHeight="190">
{my content here}
<shrinking-segment-header>
If anyone knows how to modify the expandable header functionality to trigger on click instead of scroll, your assistance would be greatly appreciated. Thank you.