Directive and ViewChild(Content)

Ionic Framework ionic-v3
1

How can I access ViewChild(Content) from a directive? This works from a component, but not from a directive.

Here is my code:

@Component({
    selector: "header-content",
    directives: [IONIC_DIRECTIVES],
    templateUrl: "build/pages/components/header-content/header.content.html"
})
export class HeaderContentComponent {
    @ViewChild(Content) protected content: Content;

    public toolbarActive: boolean = false;

    public toggleToolbar() {
        this.toolbarActive = !this.toolbarActive;

        if (this.toolbarActive) {
            // this.content.removeCssClass("no-scroll");
            // this.content.addCssClass("scroll");
        } else {
            // this.content.removeCssClass("scroll");
            // this.content.addCssClass("no-scroll");
        }

        // this.content.resize();
    }

    protected ngAfterViewInit() {
        console.log(this.content);
    }
}

I also created a Plunker for this. Check the console and you will see that the Content is undefined

I opened a bug. It seems like the resize is not working when working with directives:

2

Hi Daniel,

Did you ever figure this one out? I’m running into the same issue trying to get content as a ViewChild in a Directive. It seems your bug report was not read correctly and closed improperly. I’m guessing I just need to hack something together and work around it?

3

this has less to do with ionic and more with angular2.

it’s good practice to pass the content as @input

That is how I use it:

@Component({
    selector: "header-content",
    directives: [IONIC_DIRECTIVES],
    templateUrl: "build/pages/components/header-content/header.content.html"
})
export class HeaderContentComponent {
    @Input("title") public title: string;
    @Input("content") public content: Content;

    public toolbarActive: boolean;

    public toggleToolbar() {
        this.toolbarActive = !this.toolbarActive;
        this.content.resize();
    }
}

And here is how I call it:

<ion-header class="my-class" no-shadow>
    <header-content [title]="'My Title'" [content]="content"></header-content>
</ion-header>

And then in your pages, just do this:

@ViewChild(Content) protected content: Content;

I hope it helps.

4

There must be a better way than this.

For example, in order for the ion-footer to know where to place itself it must have access to content.contentBottom. Otherwise a footer with a tab bar would not work. However, we do no pass content as an input into ion-footer… So how do they do it?