CODEWITHSUNDEEP
angularparent-childsidebar
derstauner
derstauner

Reputation: 1796

reference template from another component

I have a header and a sidebar component. I'm trying to reach a drawer in the sidebar component. My goal is, if the user clicks the button in the header component, then the drawer toggles in the sidebar component.

For this, I referenced the drawer in the sidebar component and the sidebar itself in the header component. And then in the click event I have this:

this.appSidebar.drawer.instance.toggle();

The problem is, that the appSidebar is undefined. So the question is, how should I modify the stackblitz to have the correct behaviour? Input and Output are only for the relation child-parent, right?

Here is the stackblitz: https://stackblitz.com/edit/angular-dxpopup-mz69rq

Upvotes: 0

Views: 550

Answers (1)

Kaustubh Badrike
Kaustubh Badrike

Reputation: 609

Yes. Input and Output are only for parent-child relationship between components. What you have going for you is that you already have a parent child relationship, i.e. AppComponent is a parent of both HeaderComponent and SidebarComponent. You just have to refactor your logic so that actions flow from one sibling to the other through the common parent.

Try

In your header.component.ts

export class HeaderComponent {
  @Output() hamburgerClicked: EventEmitter<any> = new EventEmitter<any>(); // this will enable the parent component to listen to button clicks.

  public hamburgerOpt = {
    text: "button",
    onClick: () => {
      this.hamburgerClicked.emit();
    }
  };
}

app.component.ts

export class AppComponent {
  @ViewChild("appsidebar") appSidebar: SidebarComponent;
  onHamburgerClick(){ // parent can toggle the drawer in the ViewChild once the event is triggered.
    this.appSidebar.drawer.instance.toggle();
  }
}

app.component.html

<app-header (hamburgerClicked)="onHamburgerClick()"></app-header>
<app-sidebar #appsidebar></app-sidebar>

Upvotes: 1

Related Questions