I need to call the hide-method on a Collapsable via Angular. So what I tried was to retrieve the Element via ViewChild and execute the hide() method on element.nativeElement.hide(). However, it gives me an error that the hide() method does not exist, although the returned element is correct (checked via console.log).

Here are the code-snippets:

Template:

<div *ngIf="consultation.status == 'open'">
    <p>
        <input type="button" [value]="editButtonText"  data-bs-toggle="collapse" 
            data-bs-target=".multi-collapse" aria-expanded="false" 
            attr.aria-controls="waiterCommentBox{{ consultation.consultationId }} saveRequestButton{{ consultation.consultationId }}" 
            (click)="toggleRequestEditMode()">
        <input type="button" value="Save Changes" id="saveRequestButton{{ consultation.consultationId}}" 
             (click)="saveRequest()">
    </p>
    
    <div  #waiterCommentBox id="waiterCommentBox{{ consultation.consultationId }}">
        <div >
            <textarea name="waiterComment" id="waiterComment" [(ngModel)]="consultation.waiterComment" cols="30" rows="5"></textarea>
        </div>
    </div>
</div>

Component Code:

import { Component, Input, ViewChild } from "@angular/core";
import { ConsultationRequest } from "../model/consultation-request";
import { ConsultationRequestsService } from "../services/consultation-requests.service";

@Component({
    selector: 'consultation-state',
    templateUrl: './consultation-state.component.html',
    styleUrls: [ './consultation-state.component.scss' ]
})
export class ConsultationStateComponent {

    @Input('counsultation') consultation = new ConsultationRequest();
    @ViewChild('waiterCommentBox') waiterCommentBox: any;
    editMode = false;
    editButtonText = "Edit Request";


    constructor(private consultationService: ConsultationRequestsService) {}

    toggleRequestEditMode() {
        this.editMode = !this.editMode;
        this.editButtonText = this.editMode ? "Cancel Editing" : "Edit Request";
    }

    saveRequest() {
        this.consultationService.updateConsultationRequest(
                this.consultation.consultationId.toString(), { status: "closed", waiterComment: this.consultation.waiterComment } )
                .subscribe(result => {
                    this.consultation.status = "closed";
                    this.waiterCommentBox.nativeElement.hide();
                });
    }
}

Error-Message in Console:

ERROR TypeError: this.waiterCommentBox.nativeElement.hide is not a function at SafeSubscriber._next (consultation-state.component.ts:31:66) at SafeSubscriber.__tryOrUnsub (Subscriber.js:183:1) at SafeSubscriber.next (Subscriber.js:122:1) at Subscriber._next (Subscriber.js:72:1) at Subscriber.next (Subscriber.js:49:1) at MapSubscriber._next (map.js:35:1) at MapSubscriber.next (Subscriber.js:49:1) at FilterSubscriber._next (filter.js:33:1) at FilterSubscriber.next (Subscriber.js:49:1) at MergeMapSubscriber.notifyNext (mergeMap.js:70:1)

I tried retrieving the element by document.getElementById, but that won't even let me compile the TS code (property 'hide' does not exist on HTMLElement').

Bootstrap version: 5.1.3 - installed locally including JS

angluar.json

"scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

package.json

"ajv": "^6.12.6",
"bootstrap": "^5.1.3",
"rxjs": "~6.6.0",

Angular 12.2.15

CodePudding user response：

(this.waiterCommentBox.nativeElement as any).hide(); Is the quick and dirty solution, It's better to use the type of collapsible instead of "any", I just don't know the name of that type

CodePudding user response：

declare bootstrap below imports

declare const bootstrap: any;
@Component({ ... }) 

You need to get collapse instance to use hide method

@ViewChild('waiterCommentBox', { read: ElementRef }) waiterCommentBox: ElementRef<HTMLElement>;

const collapseInstance = bootstrap.Collapse.getInstance(this.waiterCommentBox.nativeElement);
if (collapseInstance) {
    collapseInstance.hide();
}