hide header on first anchor_menu full space scrolling Angular4

Question

I'm currently working on my website using angular4. I want to create something like tumblr page with using full page scrolling. Everything is ok now with side list and couple of slide. However, I want to hide the fixed header on only the first page. I really don't know how to do it. I know I can use ngIf to hide it. However, I don't know how to get the info that which anchor_menu I'm currently on. is there other way to achieve this. (I'm using the ngx_fullpage from this https://github.com/meiblorn/ngx-fullpage) . Thank you.

<div class="menu-wrapper">
<ul class="menu">
    <li data-menuanchor="menuAnchor1" class="active" ><a href="#menuAnchor1"></a></li>
    <li data-menuanchor="menuAnchor2"><a href="#menuAnchor2"></a></li>
    <li data-menuanchor="menuAnchor3"><a href="#menuAnchor3"></a></li>
    <li data-menuanchor="menuAnchor4"><a href="#menuAnchor4"></a></li>
    <li data-menuanchor="menuAnchor5"><a href="#menuAnchor5"></a></li>
    <li data-menuanchor="menuAnchor6"><a href="#menuAnchor6"></a></li>
</ul>
</div>
<div [mnFullpage]="options">
    <div class="section fp-section fp-table">
        <div class="fp-tableCell">
            <app-page1></app-page1>
        </div>
    </div>
    <div class="section fp-section fp-table">
        <div class="fp-tableCell">
            <app-page2></app-page2>
        </div>
    </div>
    <div class="section fp-section fp-table">
        <div class="fp-tableCell">
            <app-page3></app-page3>
        </div>
    </div>
    <div class="section fp-section fp-table">
        <div class="fp-tableCell">
            <app-page4></app-page4>
        </div>
    </div>
    <div class="section fp-section fp-table">
        <div class="fp-tableCell">
            <app-page5></app-page5>
        </div>
    </div>
    <div class="section fp-section fp-table">
        <div class="fp-tableCell">
            <app-page6></app-page6>
        </div>
    </div>
</div>
<app-header></app-header>

and this is my ts

import { Component, OnInit, Input } from '@angular/core';
import { MnFullpageService, MnFullpageOptions } from 'ngx-fullpage';

@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.css']
})
export class HomepageComponent implements OnInit {
    @Input() public options: MnFullpageOptions = new MnFullpageOptions({
        controlArrows: false,
        scrollingSpeed: 700,

        menu: '.menu',
        css3: true,
        anchors: [
            'menuAnchor1', 'menuAnchor2', 'menuAnchor3',
            'menuAnchor4', 'menuAnchor5', 'menuAnchor6'
        ]
    });

  constructor(public fullpageService: MnFullpageService) { }

  ngOnInit() {}

}

Answer 1

Make use of fullPage.js state classes or callbacks for that. Check this video tutorial I did regarding css3 conditions based on fullpage.js state classes.

You can also check the callbacks2.html example provided in fullPage.js.

Regarding the Tumblr effect, check this article on how to create a Tumblr effect using fullPage.js.