MbscFormGroup (collapsible) open/close event

Form components
1

Hi,
Is it possible to detect when MbscFormGroup (collapsible) is opened/closed? Was not able to find any event fired on open/close collapsable form group.

2

Hi Fredrik,

Thanks for the question!

The collapsible Form groups don’t have an event when they are opened/closed, but as a workaround you can attach a click handler on the group header, and since you know the initial state of the card, you can can handle if the form group was opened or closed.

Here is an example:

  HTML snippet:  
  
     <mbsc-form-group collapsible open>
        <mbsc-form-group-title (click)="handleClick()">Contact details</mbsc-form-group-title>
        <mbsc-form-group-content>
            <mbsc-input placeholder="Your first name">First Name</mbsc-input>
            <mbsc-input placeholder="Your last name">Last Name</mbsc-input>
            <mbsc-input placeholder="Company if applicable">Company</mbsc-input>
            <mbsc-input type="tel" placeholder="Phone" placeholder="Your phone number">Phone</mbsc-input>
            <mbsc-input type="email" placeholder="Phone" placeholder="Your email address">Email</mbsc-input>
        </mbsc-form-group-content>
    </mbsc-form-group>


  TS snippet:

    isGroupOpen: boolean = true;

    handleClick(ev) {
        this.isGroupOpen = !this.isGroupOpen;
        console.log(`Form group is ${this.isGroupOpen ? 'open' : 'closed'}`);
    }

Let me know if this works!

3

Hi Szili,
Adding (click) binding didn’t work for we. Attached methods never fires. But approach you suggested works. I have to use Directive instead of event binding:
@Directive({selector: ‘mbsc-form-group-title’, outputs: [‘onClick’]})
export class MbscFormGroupTitleClickDirective {
onClick = new EventEmitter();

constructor(elem: ElementRef, renderer: Renderer2) {
renderer.listen(elem.nativeElement, ‘click’, (ev) => this.onClick.emit(ev));
}
}