title: I am using toggleDropdown method for reset form after success but my team lead commented "Should not do DOM manipulation like this"
body: <p><img src="https://i.stack.imgur.com/4wdEQ.png" alt="enter image description here" /></p>
  <p>I am using toggleDropdown method for reset form after success but my team lead commented &quot;Should not do DOM manipulation like this&quot;.</p>
  <pre><code>&lt;div class=&quot;dropdown&quot; #dropdownRef&gt;
    &lt;button class=&quot;btn btn-secondary dropdown-toggle&quot;
        [ngClass]=&quot;{'btn-sm  bg-rounded': !showBtnText, 'btn-bg-red' : dropDownState, 'btn-bg-blue' : (searchedText &amp;&amp; !dropDownState), 'btn-bg-default' : (!dropDownState &amp;&amp; !searchedText)}&quot; type=&quot;button&quot; id=&quot;dropdown-save-history&quot; data-toggle=&quot;dropdown&quot;
        aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; [disabled]=&quot;!searchedText&quot;
        (click)=&quot;searchedText ? toggleSave() : ''&quot;&gt;
        &lt;i *ngIf=&quot;!showBtnText&quot; [ngClass]=&quot;dropDownState? 'fa fa-times' : 'fa fa-save'&quot; aria-expanded=&quot;false&quot;&gt;&lt;/i&gt;        
    &lt;/button&gt;
  
    &lt;div class=&quot;dropdown-menu p-2&quot; (click)=&quot;$event.stopPropagation()&quot;&gt; 
        &lt;div *ngIf=&quot;ctx?.formGroup&quot;&gt;
            &lt;ng-container *ngTemplateOutlet=&quot;addeditCtx; context:{ $implicit: ctx}&quot;&gt;&lt;/ng-container&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;ng-template #addeditCtx let-ctx&gt;
    &lt;add-edit [metadata]=&quot;ctx.metadata&quot; [data]=&quot;ctx.data&quot; [subAttribute]=&quot;ctx.subAttribute&quot; [formGroup]=&quot;ctx.formGroup&quot;
        [helper]=&quot;ctx.helper&quot;&gt;&lt;/add-edit&gt;
    &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;footer class=&quot;text-center&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; [disabled]=&quot;ctx.formGroup?.invalid&quot; [hidden]=&quot;ctx.okBtnTitle&quot;
            (click)=&quot;onClose()&quot;&gt;&lt;/button&gt;
    &lt;/footer&gt;
  &lt;/ng-template&gt;
  
   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');
              }
          }
      }
  </code></pre>