docs(dropdown): decompose manual triggering demo (#4116)

* docs(dropdown): decompose manual triggering demo

* Update dropdown-section.list.ts

demo/src/app/components/+dropdown/demos/index.ts

@@ -16,6 +16,7 @@ import { DemoDropdownStateChangeEventComponent } from './state-change-event/stat
 import { DemoDropdownAutoCloseComponent } from './autoclose/autoclose';
 import { DemoDropdownCustomHtmlComponent } from './custom-html/custom-html';
 import { DemoAccessibilityComponent } from './accessibility/accessibility';
+import { DemoDropdownByIsOpenPropComponent } from './trigger-by-isopen-property/trigger-by-isopen-property';
 
 export const DEMO_COMPONENTS = [
   DemoDropdownBasicComponent,
@@ -27,6 +28,7 @@ export const DEMO_COMPONENTS = [
   DemoDropdownDropupComponent,
   DemoDropdownMenuDividersComponent,
   DemoDropdownTriggersManualComponent,
+  DemoDropdownByIsOpenPropComponent,
   DemoDropdownDisabledComponent,
   DemoDropdownDisabledItemComponent,
   DemoDropdownAlignmentComponent,

demo/src/app/components/+dropdown/demos/trigger-by-isopen-property/trigger-by-isopen-property.html

@@ -0,0 +1,13 @@
+<div class="btn-group" dropdown #dropdown="bs-dropdown" [autoClose]="false">
+  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
+    Button dropdown <span class="caret"></span>
+  </button>
+  <ul *dropdownMenu class="dropdown-menu" role="menu">
+    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
+    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
+    </li>
+    <li role="menuitem"><a class="dropdown-item" href="#">Something else
+      here</a></li>
+  </ul>
+</div>
+<button type="button" class="btn btn-primary" (click)="dropdown.isOpen = !dropdown.isOpen">Toggle</button>

demo/src/app/components/+dropdown/demos/trigger-by-isopen-property/trigger-by-isopen-property.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-dropdown-trigger-by-isopen',
+  templateUrl: './trigger-by-isopen-property.html'
+})
+export class DemoDropdownByIsOpenPropComponent {
+}

demo/src/app/components/+dropdown/demos/triggers-manual/triggers-manual.html

@@ -1,6 +1,5 @@
-<div class="btn-group" dropdown #dropdown="bs-dropdown" [autoClose]="false" [isOpen]="status.isopen" (isOpenChange)="change($event)" placement="top">
-  <button id="button-triggers-manual" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
-          aria-controls="dropdown-triggers-manual">
+<div class="btn-group" dropdown #dropdown="bs-dropdown" [autoClose]="false">
+  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
     Button dropdown <span class="caret"></span>
   </button>
   <ul id="dropdown-triggers-manual" *dropdownMenu class="dropdown-menu"
@@ -11,10 +10,8 @@
     <li role="menuitem"><a class="dropdown-item" href="#">Something else
       here</a></li>
     <li class="divider dropdown-divider"></li>
-    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
-    </li>
   </ul>
 </div>
-<button type="button" class="btn btn-primary" (click)="toggleDropdown($event)">Toggle</button>
-<button type="button" class="btn btn-info" (click)="dropdown.show()">Show</button>
-<button type="button" class="btn btn-info" (click)="dropdown.hide()">Hide</button>
+<button type="button" class="btn btn-primary" (click)="dropdown.toggle(true)">Toggle</button>
+<button type="button" class="btn btn-primary" (click)="dropdown.show()">Show</button>
+<button type="button" class="btn btn-primary" (click)="dropdown.hide()">Hide</button>

demo/src/app/components/+dropdown/demos/triggers-manual/triggers-manual.ts

@@ -5,15 +5,4 @@ import { Component } from '@angular/core';
   templateUrl: './triggers-manual.html'
 })
 export class DemoDropdownTriggersManualComponent {
-  status: { isopen: boolean } = { isopen: false };
-
-  toggleDropdown($event: MouseEvent): void {
-    $event.preventDefault();
-    $event.stopPropagation();
-    this.status.isopen = !this.status.isopen;
-  }
-
-  change(value: boolean): void {
-    this.status.isopen = value;
-  }
 }

demo/src/app/components/+dropdown/dropdown-section.list.ts

@@ -2,6 +2,7 @@ import { DemoDropdownBasicComponent } from './demos/basic/basic';
 import { DemoDropdownBasicLinkComponent } from './demos/basic/basic-link';
 import { DemoDropdownSplitComponent } from './demos/split/split';
 import { DemoDropdownTriggersManualComponent } from './demos/triggers-manual/triggers-manual';
+import { DemoDropdownByIsOpenPropComponent } from './demos/trigger-by-isopen-property/trigger-by-isopen-property';
 import { DemoDropdownDisabledComponent } from './demos/disabled-menu/disabled-menu';
 import { DemoDropdownDisabledItemComponent } from './demos/disabled-item/disabled-item';
 import { DemoDropdownAlignmentComponent } from './demos/alignment/menu-alignment';
@@ -72,17 +73,26 @@ export const demoComponentContent: ContentSection[] = [
         outlet: DemoDropdownSplitComponent
       },
       {
-        title: 'Manual triggers',
+        title: 'Manual triggering',
         anchor: 'triggers-manual',
         component: require('!!raw-loader?lang=typescript!./demos/triggers-manual/triggers-manual.ts'),
         html: require('!!raw-loader?lang=markup!./demos/triggers-manual/triggers-manual.html'),
-        description: `<p>Dropdown can be triggered in two ways:
-          <ul>
-            <li>by toggling <code>isOpen</code> property</li>
-            <li>by <code>show</code>/<code>hide</code> methods from directive</li>
-          </ul></p>`,
+        description: `<p>Dropdown can be triggered by <code>show</code>, <code>hide</code> and
+          <code>toggle</code> methods from directive
+          <br>
+          Use method <code>toggle(true)</code> if you want to toggle the dropdown or <code>toggle(false)</code>
+          if you want to only close opened dropdown.
+          </p>`,
         outlet: DemoDropdownTriggersManualComponent
       },
+      {
+        title: 'Trigger by isOpen property',
+        anchor: 'trigger-by-isopen-property',
+        component: require('!!raw-loader?lang=typescript!./demos/trigger-by-isopen-property/trigger-by-isopen-property.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/trigger-by-isopen-property/trigger-by-isopen-property.html'),
+        description: `<p>Dropdown can be shown or hidden by changing <code>isOpen</code> input property</p>`,
+        outlet: DemoDropdownByIsOpenPropComponent
+      },
       {
         title: 'Disabled menu',
         anchor: 'disabled-menu',

demo/src/ng-api-doc.ts

@@ -1802,7 +1802,7 @@ export const ngdoc: any = {
       },
       {
         "name": "toggle",
-        "description": "<p>Toggles an element’s popover. This is considered a “manual” triggering of\nthe popover.</p>\n",
+        "description": "<p>Toggles an element’s popover. This is considered a “manual” triggering of\nthe popover. With parameter <code>true</code> allows toggling, with parameter <code>false</code>\nonly hides opened dropdown. Parameter usage will be removed in ngx-bootstrap v3</p>\n",
         "args": [
           {
             "name": "value",

src/dropdown/bs-dropdown.directive.ts

@@ -260,7 +260,8 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
 
   /**
    * Toggles an element’s popover. This is considered a “manual” triggering of
-   * the popover.
+   * the popover. With parameter <code>true</code> allows toggling, with parameter <code>false</code>
+   * only hides opened dropdown. Parameter usage will be removed in ngx-bootstrap v3
    */
   toggle(value?: boolean): void {
     if (this.isOpen || !value) {