Access container-component's methods

Question

I have telerik SideDrawer in a component so i can reuse it across pages by following this answer .. works fine.

Inside login.component.html i need to use openDrawer() method that exists in the header.component.ts e.g:

login.component.html

<your-header>
    <StackLayout class="content">
        <Button text="Open!" (tap)="openDrawer()"></Button>
    </StackLayout>
</your-header>

header.component.ts

//~
export class HeaderComponent //~
{
    //~
    public openDrawer() {
        console.log('opened!');
        //~
    }
    //~
}

but i get an error: self.context.openDrawer is not a function.

How to do it?

score 0 · Answer 1 · edited May 23 '17 at 10:31

following this answer it's not hard

login.component.html:

<your-header>
    <StackLayout class="content">
        <Button text="Open!" (tap)="_parent.openDrawer()"></Button>
    </StackLayout>
</your-header>

login.component.ts:

import { Component, ViewChild } from "@angular/core";
import { HeaderComponent } from "../header/header.component";
@Component({
    selector: "login",
    templateUrl: 'pages/login/login.html'
})
export class LoginComponent {
    constructor() {}
    @ViewChild(HeaderComponent)
    private _parent: HeaderComponent;
}

The sad part is i need to add 3 lines for each component i use which is not fun.. i'd love to see a better approach.

Access container-component's methods

1 Answers1