Ionic 3 expand header on click

Question

I am using Ionic 3, and have implemented an Expandable Header based on this tutorial from Joshmorony.

It works perfectly while expanding on scroll : https://media.giphy.com/media/OSuVVWmVgvYI4e8QEu/giphy.gif

My problem is I want to expand the header on click instead of on scroll. When I click on the menu button, the header is expanded.

This is my code:

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 I call the component like this:

dashboard.ts

<shrinking-segment-header [scrollArea]="myContent" headerHeight="190">
    {my content here}
<shrinking-segment-header>

If someone know how to trick the expandable header on click, please help me. Any advise appreciated. Thank you.

Phonolog · Accepted Answer · 2019-03-15T12:26:41.277

You can simply create a method to expand your header to the initial height (stored in this.headerHeight). So I added following code to the ShrinkingSegmentHeader class:

expandHeader() {
    this.renderer.setElementStyle(this.element.nativeElement, 'height', this.headerHeight + 'px');
}

For the sake of demonstration I added a button inside the ShrinkingSegmentHeader HTML to call the method mentioned above:

<ng-content></ng-content>
<button ion-button icon-only (click)="expandHeader()">
  <ion-icon name="beer"></ion-icon>
</button>

As mentioned the button is only for the sake of demonstration, calling the method whenever you want the header to expand will be the trickier part and is up to you. Following questions might be helpful, depending on your usecase:

Also note that the Angular renderer is deprecated. You should use Renderer2 instead.

This has been asked and answered here many times, I added some links to question that might be relevant. If you want to call the method from a parent component or page I'd recommend the last solution using `ViewChild`, which is very easy to implement. — Phonolog, Mar 15 '19 at 12:28

Ionic 3 expand header on click

1 Answers1