Can't call child component on button click-CodePudding

I am using ng-sidebar. I want to call a child component (sidebar) on click of a button. But I am not getting any result.

Example: Stackblitz

parent ts:

export class AppComponent {
  _opened: boolean = false;

  _toggleSidebar() {
    this._opened = !this._opened;
  }
}

parent html:

<ng-sidebar-container style="height: 100vh;">
  <app-sidebar [opened]="_opened"></app-sidebar>

  <!-- Page content -->
  <div ng-sidebar-content>
    <button (click)="_toggleSidebar()">Toggle sidebar</button>
  </div>
</ng-sidebar-container>

child html:

<ng-sidebar [(opened)]="opened" position="right">
  <ul>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
  </ul>
</ng-sidebar>

child ts:

export class SidebarComponent {
  @Input() opened: boolean;
}

CodePudding user response：

I created forked with change. check this https://stackblitz.com/edit/angular-ng-sidebar-wbwjdh.

You just have to add ng-sidebar on component selector in app.component.html