CODEWITHSUNDEEP
toggleaccordionng-bootstrapangular18
thetada
thetada

Reputation: 13

How do I call toggle method from a child component rendered inside parent containing ng_bootstrap accordion unit?

I'm trying to make an accordion with three sections, each of which has a collapsible component. From the ng_bootstrap docs, you can render a button outside of the ngbAccordion parent div, like this:

<button (click)="accordion.toggle('first')">Toggle first</button>

I can't figure out how to configure the child components to access the accordion.toggle method.

I've imported the ngbAccordionModule into both the parent and child and tried code along these lines. (based off an ng_bootstrap docs eg)

In the parent:

<div ngbAccordion #accordion="ngbAccordion">
  <div ngbAccordionItem="first">
    <div ngbAccordionCollapse>
      <div ngbAccordionBody>
    <ng-template>
      Some collapsible content to render
    </ng-template>
      </div>
    </div>
  </div>
</div>
<app-child-component></app-child-component>

In the child:

<div ngbAccordion #accordion="ngbAccordion"></div>

<button (click)="accordion.toggle('first')">

I know that what I've tried in the child there by opening and closing an ngbAccordion div just to get the child component to recognise "accordion" for its reference in the button is not a good approach (especially as it doesn't work). It does stop the app crashing for not recognising the directive, but the button does not have the intended functionality (to reveal the collapsible content).

I think I probably need to define an output in the parent component and a corresponding input in the child, but I can't figure out how to make any reference to that method in the class definition sections of either component.

Really appreciate any pointers / suggestions / solutions, thanks in advance.

Upvotes: 0

Views: 34

Answers (1)

thetada
thetada

Reputation: 13

Figured it out from the Angular docs

In the child component, import output from angular/core

Then in class definition:

export class ChildComponent {

  toggleClick = output<string>()    // OutputEmitterRef<string>

  toggleCollapse(id: string){
    this.toggleClick.emit(id);    
  }  

}

Then in child component template html:

html:

<button (click)="toggleCollapse('first')">Toggle first</button>

Then in the parent component just call the toggleClick output

<app-child-component 
  (toggleClick)="accordion.toggle($event)"
></app-child-component>

Upvotes: 0

Related Questions