merge from ecomp a88f0072 - Modern UI

Issue-ID: VID-378
Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6
Signed-off-by: Ittay Stern <ittay.stern@att.com>
diff --git a/vid-webpack-master/src/app/featureFlag/directive/basic/basic.featureFlag.directive.ts b/vid-webpack-master/src/app/featureFlag/directive/basic/basic.featureFlag.directive.ts
new file mode 100644
index 0000000..e6cbb4f
--- /dev/null
+++ b/vid-webpack-master/src/app/featureFlag/directive/basic/basic.featureFlag.directive.ts
@@ -0,0 +1,29 @@
+import {AfterContentChecked, Directive, ElementRef, Input} from '@angular/core';
+import {FeatureFlagService} from "../../service/featureFlag.service";
+import * as _ from 'lodash';
+
+/************************************************************************
+    Feature Flag Directive
+    Example:
+    <div featureFlag [flagName]='"<flag name>"'></div>
+ ************************************************************************/
+@Directive({
+  selector: '[featureFlag]'
+})
+export class BasicFeatureFlagDirective implements AfterContentChecked {
+  @Input() flagName: string;
+  element: ElementRef;
+
+  constructor(el: ElementRef, private _featureToggleService: FeatureFlagService) {
+    this.element = el;
+  }
+
+  ngAfterContentChecked(): void {
+    if (!_.isNil(this.element)) {
+      const isFeatureOn: boolean = this._featureToggleService.isFeatureOn(this.flagName);
+        if(!isFeatureOn){
+          this._featureToggleService.hideElement(this.element)
+        }
+    }
+  }
+}