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:
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?
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.
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?