How to set style of sub header using render2 in ionic?

Question

I want to hide header and sub header of my application separately according to scrolled pixel amount. This is my home.html file:

<ion-header #head>
    <ion-navbar>
        <button class="nearby-btn" ion-button round color="light" icon- (click)="goToWhereToPage()"> Where to ?
            <ion-icon name="ios-arrow-down"></ion-icon>
        </button>
        <ion-title>Home</ion-title>
    </ion-navbar>

    <ion-toolbar class="toolbar1">
        <ion-title>Subheader</ion-title>
    </ion-toolbar>

</ion-header>

<ion-content display-header [header]="head">
    <div class="home-image">
        <img class="img" src="assets/hotel.jpg" alt="Home">
        <button class="nearby-btn" ion-button round color="light" icon- (click)="goToWhereToPage()"> Where to ?
            <ion-icon name="ios-arrow-down"></ion-icon>
        </button>
</ion-content> 

I want to access the sub header. I tried the following code, as a custom directive

    import { Directive, Input, ElementRef, Renderer2 } from '@angular/core';


@Directive({
    selector: '[display-header]', // Attribute selector
    host: {
        '(ionScroll)': 'onContentScroll($event)'
    }
}) export class DisplayHeaderDirective {

    @Input("header") header: HTMLElement;
    headerHeight;
    scrollContent;
    toolbar;
    constructor(public element: ElementRef, public renderer: Renderer2) {
        console.log('Hello DisplayHeaderDirective Directive');

    }

    onContentScroll(event) {
        // console.log(event);
        // if (event.scrollTop <220) {
        //     this.renderer.setStyle(this.header,'opacity', '0');
        //     this.renderer.setStyle(this.scrollContent, 'margin-top', '0px');
        //
        // }
        // else {
        //     this.renderer.setStyle(this.header, 'opacity', '1');
        //     this.renderer.setStyle(this.scrollContent, 'margin-top', '56px');
        // }

        // this.renderer.setStyle(this.toolbar,'opacity','0');
        this.renderer.setStyle(this.toolbar, 'opacity', '0');
    }

    ngOnInit() {


        this.headerHeight = this.header.clientHeight;
        this.renderer.setStyle(this.header, 'webkitTransition', '500ms');
        this.scrollContent = this.element.nativeElement.getElementsByClassName('scroll-content')[0];
        this.toolbar = this.element.nativeElement.children[0];
        this.renderer.setStyle(this.scrollContent, 'webkitTransition', 'margin-top 150ms');


    }
}

I could hide the header but I couldn't hide the sub header. I have no idea how to access the sub header using render.

Answer 1

I did a mistake in my code. so i figureout finally.

this.toolbar = this.element.nativeElement.children[0];

this should replace with,

this.toolbar = this.header.nativeElement.children[1];