title: Typescript, Prevent Bootstrap Dropdown from closing when button is clicked
body: <p>I make a simple bootstrap dropdown to do a registration or login. Inside the dropdown we have text and button like "dont have account? <code>register</code>", "already have account? 
   <code>login</code>". The <code>register</code> and <code>login</code> are buttons for changing form. But when the button clicked the dropdown is closed and we have to click to open the dropdown again to see/use the other form. I wanted to prevent this bootstrap dropdown from closing when these buttons inside it are clicked. The dropdown is inside <code>app.component</code> and the form is inside <code>app.parent</code>. I'm using angular cli typescript. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//component.ts
  changeForm() {
    this.isNewUser = !this.isNewUser
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--app.component.html--&gt;
  &lt;div&gt;
    &lt;ul class="nav navbar-nav"&gt;
      &lt;li class="dropdown"&gt;
        &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" auto-close="disabled"&gt;REGISTER/LOGIN &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;ul class="dropdown-menu"&gt;
          &lt;app-parent&gt;&lt;/app-parent&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;!--parent.component.html--&gt;
  &lt;div *ngIf="isNewUser"&gt;
    &lt;p *ngIf="errorMessage.length &gt; 0" class="text-danger"&gt;{{errorMessage}}&lt;/p&gt;
    &lt;p *ngIf="error.message.length &gt; 0" class="text-danger"&gt;{{error.message}}&lt;/p&gt;
    &lt;form (ngSubmit)="onSignUp()"&gt;...&lt;/form&gt;
    &lt;h4 class="text-primary"&gt;Already have an Account? &lt;button type="submit" href="#" class="btn btn-primary btn-xs" (click)="changeForm()"&gt;Log In&lt;/button&gt;&lt;/h4&gt;
  &lt;/div&gt;
  
  &lt;div *ngIf="!isNewUser"&gt;
    &lt;p *ngIf="errorMessage.length &gt; 0" class="text-danger"&gt;{{errorMessage}}&lt;/p&gt;
    &lt;p *ngIf="error.message.length &gt; 0" class="text-danger"&gt;{{error.message}}&lt;/p&gt;
    &lt;form (ngSubmit)="onLoginEmail()"&gt;...&lt;/form&gt;
    &lt;h4 class="text-primary"&gt;Not have any Account yet? &lt;button type="submit" href="#" class="btn btn-success btn-xs" (click)="changeForm()"&gt;Register&lt;/button&gt;&lt;/h4&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>