'I am using toggleDropdown method for reset form after success but my team lead commented "Should not do DOM manipulation like this"

I am using toggleDropdown method for reset form after success but my team lead commented "Should not do DOM manipulation like this".
<div class="dropdown" #dropdownRef>
<button class="btn btn-secondary dropdown-toggle"
[ngClass]="{'btn-sm bg-rounded': !showBtnText, 'btn-bg-red' : dropDownState, 'btn-bg-blue' : (searchedText && !dropDownState), 'btn-bg-default' : (!dropDownState && !searchedText)}" type="button" id="dropdown-save-history" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" [disabled]="!searchedText"
(click)="searchedText ? toggleSave() : ''">
<i *ngIf="!showBtnText" [ngClass]="dropDownState? 'fa fa-times' : 'fa fa-save'" aria-expanded="false"></i>
</button>
<div class="dropdown-menu p-2" (click)="$event.stopPropagation()">
<div *ngIf="ctx?.formGroup">
<ng-container *ngTemplateOutlet="addeditCtx; context:{ $implicit: ctx}"></ng-container>
</div>
</div>
</div>
<ng-template #addeditCtx let-ctx>
<add-edit [metadata]="ctx.metadata" [data]="ctx.data" [subAttribute]="ctx.subAttribute" [formGroup]="ctx.formGroup"
[helper]="ctx.helper"></add-edit>
<ng-content></ng-content>
<footer class="text-center">
<button type="button" class="btn btn-primary" [disabled]="ctx.formGroup?.invalid" [hidden]="ctx.okBtnTitle"
(click)="onClose()"></button>
</footer>
</ng-template>
toggleDropdown(searchCompRef?: SearchHistoryComponent) {
if (searchCompRef) { // while editing from list dropdown
if (searchCompRef.dropdownRef.nativeElement.classList.contains('open')) {
searchCompRef.ctx.data = {};
searchCompRef.dropdownRef.nativeElement.classList.remove('open');
} else {
searchCompRef.dropdownRef.nativeElement.classList.add('open');
}
} else {
if (this.dropdownRef.nativeElement.classList.contains('open')) {
this.ctx.data = {};
this.dropdownRef.nativeElement.classList.remove('open');
} else {
this.dropdownRef.nativeElement.classList.add('open');
}
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
