0

I have a dropdown menu containing a form. I want to close the dropdown whenever Ok is clicked, that is whenever the form is submitted. Right now it remains open. Would prefer not to use javascript or jquery

<div class="dropdown" style="font-size: 14px !important;">
   Severities<i class="fa fa-filter filter-icon" style="cursor: pointer;" data-toggle="dropdown" aria-hidden="true"></i>
   <div #dropSev class="dropdown-menu" style="z-index: 1060 !important;">
      <div class="col-12">
         <!-- <form #state="ngForm" class="form-horizontal" (ngSubmit)="fnFilterTable(undefined,undefined,frmFilter.state, undefined)" ngNativeValidate> -->
         <form #state="ngForm" class="form-horizontal" (submit)="fnFilter()" ngNativeValidate>
         <div class="form-group row" *ngFor="let s of severityArray?severityArray:[]">
            <div class="col-12 row ml-1">
               <label>
               <input class="checkbox mr-2"type="checkbox" id="{{s.id}}" name="{{s.id}}" [(ngModel)]="s.selected" />
               {{s.name}}
               </label>
            </div>
         </div>
         <div class="form-group row">
            <button class="col btn btn-light p2 m-1 ml-3" type="submit">OK</button>
            <button class="col btn btn-light p2 m-1 mr-3" (click)="fnToggleDrop()">Cancel</button>
         </div>
         </form>
      </div>
   </div>
</div>
Ujjwal Sharma
  • 96
  • 2
  • 11
  • Can you share *ts* part. – hbamithkumara Nov 30 '19 at 10:15
  • At the end of `fnFilter()`, in your `.ts` file, call `this.fnToggleDrop()`. – tao Nov 30 '19 at 10:25
  • What exactly does *"would prefer not to use javascript or jquery"* mean? Angular ***is*** written and heavily relies on JavaScript. Bootstrap dropdowns use JavaScript to open/close. Typescript is a superset of JavaScript (which means it gets converted to JavaScript before it hits the browser). It looks like you don't really understand what you're working with. – tao Nov 30 '19 at 10:33
  • Sorry if my words weren't clear. I meant I'd prefer to use any pre-defined class of bootstrap or any angular method and not write a whole new function if any method already exists to make it easier. – Ujjwal Sharma Dec 01 '19 at 11:24

0 Answers0