walkthrough flow parameters can be changed dynamically

Author: Zefling

projects/angular-walkthrough/src/lib/walkthrough-flow.component.ts

@@ -1,4 +1,6 @@
-import { AfterViewInit, Component, ContentChildren, EventEmitter, Input, Output, QueryList } from '@angular/core';
+import {
+    AfterViewInit, Component, ContentChildren, EventEmitter, Input, Output, QueryList, OnChanges, SimpleChanges
+} from '@angular/core';
 
 import { WalkthroughTextI } from './walkthrough-text';
 import { booleanValue, WalkthroughEvent } from './walkthrough-tools';
@@ -10,7 +12,7 @@ let nextUniqueId = 0;
     selector: 'ng-walkthrough-flow',
     template: '',
 })
-export class WalkthroughFlowComponent implements AfterViewInit {
+export class WalkthroughFlowComponent implements AfterViewInit, OnChanges {
     @ContentChildren(WalkthroughComponent) walkthroughComponents: QueryList<WalkthroughComponent>;
 
     @Input()
@@ -55,6 +57,18 @@ export class WalkthroughFlowComponent implements AfterViewInit {
         });
     }
 
+    ngOnChanges(changes: SimpleChanges) {
+        if (this.walkthroughComponents && changes) {
+            for (const option in changes) {
+                if (changes[option] && option !== 'id') {
+                    this.walkthroughComponents.forEach((walkthrough: WalkthroughComponent) => {
+                        walkthrough[option] = changes[option].currentValue;
+                    });
+                }
+            }
+        }
+    }
+
     init() {
         let prevComp: WalkthroughComponent = null;
         this.walkthroughComponents.forEach((walkthrough: WalkthroughComponent) => {

src/app/app.component.html

@@ -14,6 +14,29 @@
             <button (click)="continue()">Continue walkthrough</button>
         </div>
     </div>
+    <div>
+        flow options :<br />
+        <label>
+            <input
+                type="checkbox"
+                #flowCloseAnywhereValue
+                [checked]="flowCloseAnywhere"
+                (change)="flowCloseAnywhere = flowCloseAnywhereValue.checked"
+            />
+            CloseAnywhere {{flowCloseAnywhere}}
+        </label><br />
+        <label>
+            <input
+                type="checkbox"
+                #flowHidePreviousValue
+                [checked]="flowHidePrevious"
+                (change)="flowHidePrevious = flowHidePreviousValue.checked"
+            />
+            HidePrevious {{flowHidePrevious}}
+        </label>
+
+    </div>
+
     <div class="overflow">
         <div></div>
         <div>
@@ -329,7 +352,8 @@
     focusBackdrop="true"
     focusHighlightAnimation="true"
     closeButton="true"
-    closeAnywhere="false"
+    [closeAnywhere]="flowCloseAnywhere"
+    [hidePrevious]="flowHidePrevious"
     arrowColor="#000"
     showArrow="true"
     radius="auto"

src/app/app.component.ts

@@ -23,7 +23,7 @@ export class AppComponent implements OnInit, OnDestroy {
     };
 
     testClickCount = 0;
-    testClickTexts = ['click me', "it's ok!", 'realy ok', 'ok ok...', 'stop that!'];
+    testClickTexts = ['click me', 'it\'s ok!', 'realy ok', 'ok ok...', 'stop that!'];
     testPosition = 'center';
     alignContent = 'left';
     verticalAlignContent = 'top';
@@ -40,6 +40,9 @@ export class AppComponent implements OnInit, OnDestroy {
     step3flowDisabled = false;
     step4flowDisabled = false;
 
+    flowHidePrevious = false;
+    flowCloseAnywhere = false;
+
     hideCount = 3;
     private _count = 3;
     private _start = false;