Upgrade Bootstrap to 4 beta.

Author: Leo Vo

CHANGELOG.md

@@ -56,4 +56,8 @@ export class TreeviewConfig {
 
 # [1.0.9](https://www.npmjs.com/package/ngx-treeview) (2017-07-21)
 ### Enhancement:
-* Expose DropdownDirective from DropdownTreeviewComponent.
+* Expose DropdownDirective from DropdownTreeviewComponent.
+
+# [1.1.0](https://www.npmjs.com/package/ngx-treeview) (2017-08-16)
+### Enhancement:
+* Support Bootstrap 4 beta.

README.md

@@ -11,9 +11,11 @@ An Angular treeview component with checkbox
 
 * [Angular](https://angular.io)
 * [Lodash](https://lodash.com)
-* [Bootstrap 4 alpha 6](https://v4-alpha.getbootstrap.com)
+* [Bootstrap 4](https://getbootstrap.com)
 * [Font Awesome 4](http://fontawesome.io)
 
+This component is currently supporting Bootstrap 4.0.0 beta. If you are using Bootstrap 4 alpha 6, please downgrade to the older version 1.0.10.
+
 You can customize CSS yourself to break down dependencies to Bootstrap & Font Awesome.
 
 ## Features
@@ -61,6 +63,7 @@ export class AppModule {
 #### Treeview with dropdown:
 ```html
 <ngx-dropdown-treeview
+    [buttonClass]="buttonClass"
     [config]="config"
     [items]="items"
     (selectedChange)="onSelectedChange($event)">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-treeview",
-  "version": "1.0.10",
+  "version": "1.1.0",
   "license": "MIT",
   "description": "An Angular treeview component with checkbox",
   "scripts": {

src/demo/city/city.component.html

@@ -16,8 +16,8 @@ <h4>Example 3: Using ngxTreeview pipe, custom TreeviewI18n & how to enable/disab
             <label for="city-category" class="col-3 col-form-label">City category</label>
             <div class="col-9">
                 <div class="d-inline-block">
-                    <ngx-dropdown-treeview [items]="cities | ngxTreeview:'name'" (selectedChange)="values = $event" [disabled]="!dropdownEnabled"
-                        [ngxDisabledOnSelector]="'button.dropdown-toggle'">
+                    <ngx-dropdown-treeview [items]="cities | ngxTreeview:'name'" [buttonClass]="'btn-outline-primary'" (selectedChange)="values = $event"
+                        [disabled]="!dropdownEnabled" [ngxDisabledOnSelector]="'button.dropdown-toggle'">
                     </ngx-dropdown-treeview>
                 </div>
             </div>

src/lib/dropdown-menu.directive.ts

@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { DropdownDirective } from './dropdown.directive';
+
+@Directive({
+    selector: '[ngxDropdownMenu]',
+    // tslint:disable-next-line:use-host-property-decorator
+    host: {
+        '[class.dropdown-menu]': 'true',
+        '[class.show]': 'dropdown.isOpen'
+    }
+})
+export class DropdownMenuDirective {
+    constructor(
+        private dropdown: DropdownDirective
+    ) { }
+}

src/lib/dropdown-toggle.directive.ts

@@ -1,28 +1,21 @@
-import { Directive, HostBinding, HostListener, ElementRef } from '@angular/core';
+import { Directive, ElementRef } from '@angular/core';
 import { DropdownDirective } from './dropdown.directive';
 
 @Directive({
     selector: '[ngxDropdownToggle]',
     // tslint:disable-next-line:use-host-property-decorator
     host: {
         'class': 'dropdown-toggle',
-        'aria-haspopup': 'true'
+        'aria-haspopup': 'true',
+        '[attr.aria-expanded]': 'dropdown.isOpen',
+        '(click)': 'dropdown.toggle()'
     }
 })
 export class DropdownToggleDirective {
-    @HostBinding('attr.aria-expanded') get ariaExpanded(): boolean {
-        return this.dropdown.isOpen;
-    }
-
     constructor(
         private dropdown: DropdownDirective,
         elementRef: ElementRef
     ) {
         dropdown.toggleElement = elementRef.nativeElement;
     }
-
-    @HostListener('click')
-    onClick() {
-        this.dropdown.toggle();
-    }
 }

src/lib/dropdown-treeview.component.html

@@ -1,8 +1,8 @@
 <div class="dropdown" ngxDropdown>
-    <button class="btn btn-secondary" type="button" role="button" ngxDropdownToggle>
+    <button class="btn" [ngClass]="buttonClass" type="button" role="button" ngxDropdownToggle>
         {{getText()}}
     </button>
-    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" (click)="$event.stopPropagation()">
+    <div ngxDropdownMenu aria-labelledby="dropdownMenu" (click)="$event.stopPropagation()">
         <div class="dropdown-container">
             <ngx-treeview [config]="config" [headerTemplate]="headerTemplate" [items]="items" [itemTemplate]="itemTemplate" (selectedChange)="onSelectedChange($event)">
             </ngx-treeview>

src/lib/dropdown-treeview.component.ts

@@ -13,6 +13,7 @@ import { TreeviewItemTemplateContext } from './treeview-item-template-context';
     styleUrls: ['./dropdown-treeview.component.scss']
 })
 export class DropdownTreeviewComponent {
+    @Input() buttonClass = 'btn-outline-secondary';
     @Input() headerTemplate: TemplateRef<TreeviewHeaderTemplateContext>;
     @Input() itemTemplate: TemplateRef<TreeviewItemTemplateContext>;
     @Input() items: TreeviewItem[];

src/lib/treeview.module.ts

@@ -2,6 +2,7 @@
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { DropdownDirective } from './dropdown.directive';
+import { DropdownMenuDirective } from './dropdown-menu.directive';
 import { DropdownToggleDirective } from './dropdown-toggle.directive';
 import { DropdownTreeviewComponent } from './dropdown-treeview.component';
 import { TreeviewComponent } from './treeview.component';
@@ -21,6 +22,7 @@ import { TreeviewEventParser, DefaultTreeviewEventParser } from './treeview-even
         TreeviewItemComponent,
         TreeviewPipe,
         DropdownDirective,
+        DropdownMenuDirective,
         DropdownToggleDirective,
         DropdownTreeviewComponent
     ], exports: [