From ed64b5edff15e702493df21aa3230b81593e6133 Mon Sep 17 00:00:00 2001
From: Michael Lando <ml636r@att.com>
Date: Fri, 9 Jun 2017 03:19:04 +0300
Subject: [SDC-29] catalog 1707 rebase commit.

Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1
Signed-off-by: Michael Lando <ml636r@att.com>
---
 catalog-ui/src/app/ng2/app.component.css           |   0
 catalog-ui/src/app/ng2/app.component.html          |   6 +
 catalog-ui/src/app/ng2/app.component.ts            |  15 +
 catalog-ui/src/app/ng2/app.module.ts               |  74 +++++
 catalog-ui/src/app/ng2/app.routing.ts              |  20 ++
 .../dynamic-element/dynamic-element.component.less |   3 +
 .../dynamic-element/dynamic-element.component.ts   | 117 +++++++
 .../dynamic-element/dynamic-element.module.ts      |  34 ++
 .../checkbox/ui-element-checkbox.component.html    |   1 +
 .../checkbox/ui-element-checkbox.component.less    |   2 +
 .../checkbox/ui-element-checkbox.component.ts      |  27 ++
 .../dropdown/ui-element-dropdown.component.html    |   3 +
 .../dropdown/ui-element-dropdown.component.less    |  11 +
 .../dropdown/ui-element-dropdown.component.ts      |  33 ++
 .../input/ui-element-input.component.html          |  13 +
 .../input/ui-element-input.component.less          |  17 +
 .../input/ui-element-input.component.ts            |  22 ++
 .../ui-element-popover-input.component.html        |  26 ++
 .../ui-element-popover-input.component.less        |  36 +++
 .../ui-element-popover-input.component.ts          |  39 +++
 .../elements-ui/ui-element-base.component.ts       |  34 ++
 .../filter-properties-assignment.component.html    |  26 ++
 .../filter-properties-assignment.component.less    |  38 +++
 .../filter-properties-assignment.component.ts      |  77 +++++
 .../hierarchy-display-options.ts                   |  12 +
 .../hierarchy-navigation.component.html            |  13 +
 .../hierarchy-navigation.component.less            |  51 +++
 .../hierarchy-navigation.component.ts              |  28 ++
 .../inputs-table/inputs-table.component.html       |  37 +++
 .../inputs-table/inputs-table.component.ts         |  33 ++
 .../popover/popover-content.component.html         |  24 ++
 .../popover/popover-content.component.less         |  73 +++++
 .../popover/popover-content.component.ts           | 258 ++++++++++++++++
 .../ng2/components/popover/popover.component.ts    | 159 ++++++++++
 .../app/ng2/components/popover/popover.module.ts   |  27 ++
 .../derived-property.component.html                |  24 ++
 .../derived-property.component.less                |  35 +++
 .../derived-property/derived-property.component.ts |  46 +++
 .../dynamic-property.component.html                |  66 ++++
 .../dynamic-property.component.less                |  48 +++
 .../dynamic-property/dynamic-property.component.ts | 149 +++++++++
 .../list-property/list-property.component.html     |  33 ++
 .../list-property/list-property.component.less     |   3 +
 .../list-property/list-property.component.ts       |  85 +++++
 .../map-property/map-property.component.html       |  38 +++
 .../map-property/map-property.component.ts         | 121 ++++++++
 .../properties-table.component.html                | 135 ++++++++
 .../properties-table.component.less                | 188 +++++++++++
 .../properties-table/properties-table.component.ts |  93 ++++++
 .../properties-value-inner-table.component.html    |  41 +++
 .../properties-value-inner-table.component.less    |  71 +++++
 .../properties-value-inner-table.component.ts      |  37 +++
 .../tooltip/tooltip-content.component.html         |  12 +
 .../tooltip/tooltip-content.component.less         |  11 +
 .../tooltip/tooltip-content.component.ts           | 195 ++++++++++++
 .../ng2/components/tooltip/tooltip.component.ts    |  81 +++++
 .../app/ng2/components/tooltip/tooltip.module.ts   |  25 ++
 .../app/ng2/pages/page404/page404.component.html   |   3 +
 .../app/ng2/pages/page404/page404.component.less   |   4 +
 .../src/app/ng2/pages/page404/page404.component.ts |   9 +
 .../properties-assignment.module.ts                |  72 +++++
 .../properties-assignment.page.component.html      |  57 ++++
 .../properties-assignment.page.component.less      | 158 ++++++++++
 .../properties-assignment.page.component.ts        | 344 +++++++++++++++++++++
 .../properties-assignment/properties.utils.ts      |  78 +++++
 .../src/app/ng2/pipes/contentAfterLastDot.pipe.ts  |   8 +
 .../app/ng2/pipes/filterChildProperties.pipe.ts    |  18 ++
 catalog-ui/src/app/ng2/pipes/groupBy.pipe.ts       |  19 ++
 catalog-ui/src/app/ng2/pipes/keys.pipe.ts          |  12 +
 catalog-ui/src/app/ng2/pipes/searchFilter.pipe.ts  |  18 ++
 .../src/app/ng2/services/authentication.service.ts |  40 +++
 .../component-instance.service.ts                  |  51 +++
 .../component-services/component.service.ts        | 149 +++++++++
 .../component-services/resource.service.ts         |  18 ++
 .../services/component-services/service.service.ts |  31 ++
 catalog-ui/src/app/ng2/services/config.service.ts  |  51 +++
 catalog-ui/src/app/ng2/services/cookie.service.ts  |  65 ++++
 .../src/app/ng2/services/data-type.service.ts      |  69 +++++
 catalog-ui/src/app/ng2/services/http.service.ts    |  73 +++++
 .../src/app/ng2/services/mocks/properties.mock.ts  |  16 +
 catalog-ui/src/app/ng2/services/posts.service.ts   |  54 ++++
 .../src/app/ng2/services/properties.service.ts     | 249 +++++++++++++++
 .../responses/component-generic-response.ts        |  77 +++++
 .../ng2/services/responses/properties.response.ts  |   7 +
 .../src/app/ng2/services/utils/serializable.ts     |   6 +
 .../ng2/shared/checkbox/checkbox.component.html    |   8 +
 .../ng2/shared/checkbox/checkbox.component.less    |  64 ++++
 .../app/ng2/shared/checkbox/checkbox.component.ts  |  30 ++
 .../src/app/ng2/shared/checkbox/checkbox.module.ts |  28 ++
 .../app/ng2/shared/navbar/navbar-routes.config.ts  |   7 +
 .../app/ng2/shared/navbar/navbar.component.html    |  23 ++
 .../app/ng2/shared/navbar/navbar.component.less    |  11 +
 .../src/app/ng2/shared/navbar/navbar.component.ts  |  32 ++
 .../src/app/ng2/shared/navbar/navbar.metadata.ts   |  11 +
 .../src/app/ng2/shared/navbar/navbar.module.ts     |  16 +
 catalog-ui/src/app/ng2/shared/shared.module.ts     |  20 ++
 .../src/app/ng2/shared/tabs/tab/tab.component.ts   |  18 ++
 .../src/app/ng2/shared/tabs/tabs.component.html    |   9 +
 .../src/app/ng2/shared/tabs/tabs.component.less    |  85 +++++
 .../src/app/ng2/shared/tabs/tabs.component.ts      |  58 ++++
 catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts  |  35 +++
 .../src/app/ng2/utils/ng1-upgraded-provider.ts     |  51 +++
 102 files changed, 5188 insertions(+)
 create mode 100644 catalog-ui/src/app/ng2/app.component.css
 create mode 100644 catalog-ui/src/app/ng2/app.component.html
 create mode 100644 catalog-ui/src/app/ng2/app.component.ts
 create mode 100644 catalog-ui/src/app/ng2/app.module.ts
 create mode 100644 catalog-ui/src/app/ng2/app.routing.ts
 create mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less
 create mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts
 create mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts
 create mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html
 create mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less
 create mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts
 create mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html
 create mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less
 create mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts
 create mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html
 create mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less
 create mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts
 create mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html
 create mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less
 create mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts
 create mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts
 create mode 100644 catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.html
 create mode 100644 catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less
 create mode 100644 catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts
 create mode 100644 catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts
 create mode 100644 catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.html
 create mode 100644 catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less
 create mode 100644 catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts
 create mode 100644 catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
 create mode 100644 catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
 create mode 100644 catalog-ui/src/app/ng2/components/popover/popover-content.component.html
 create mode 100644 catalog-ui/src/app/ng2/components/popover/popover-content.component.less
 create mode 100644 catalog-ui/src/app/ng2/components/popover/popover-content.component.ts
 create mode 100644 catalog-ui/src/app/ng2/components/popover/popover.component.ts
 create mode 100644 catalog-ui/src/app/ng2/components/popover/popover.module.ts
 create mode 100644 catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.html
 create mode 100644 catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.less
 create mode 100644 catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.ts
 create mode 100644 catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
 create mode 100644 catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
 create mode 100644 catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
 create mode 100644 catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.html
 create mode 100644 catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.less
 create mode 100644 catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.ts
 create mode 100644 catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.html
 create mode 100644 catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.ts
 create mode 100644 catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
 create mode 100644 catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less
 create mode 100644 catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts
 create mode 100644 catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.html
 create mode 100644 catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.less
 create mode 100644 catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.ts
 create mode 100644 catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html
 create mode 100644 catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less
 create mode 100644 catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts
 create mode 100644 catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts
 create mode 100644 catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts
 create mode 100644 catalog-ui/src/app/ng2/pages/page404/page404.component.html
 create mode 100644 catalog-ui/src/app/ng2/pages/page404/page404.component.less
 create mode 100644 catalog-ui/src/app/ng2/pages/page404/page404.component.ts
 create mode 100644 catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts
 create mode 100644 catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
 create mode 100644 catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
 create mode 100644 catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
 create mode 100644 catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts
 create mode 100644 catalog-ui/src/app/ng2/pipes/contentAfterLastDot.pipe.ts
 create mode 100644 catalog-ui/src/app/ng2/pipes/filterChildProperties.pipe.ts
 create mode 100644 catalog-ui/src/app/ng2/pipes/groupBy.pipe.ts
 create mode 100644 catalog-ui/src/app/ng2/pipes/keys.pipe.ts
 create mode 100644 catalog-ui/src/app/ng2/pipes/searchFilter.pipe.ts
 create mode 100644 catalog-ui/src/app/ng2/services/authentication.service.ts
 create mode 100644 catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts
 create mode 100644 catalog-ui/src/app/ng2/services/component-services/component.service.ts
 create mode 100644 catalog-ui/src/app/ng2/services/component-services/resource.service.ts
 create mode 100644 catalog-ui/src/app/ng2/services/component-services/service.service.ts
 create mode 100644 catalog-ui/src/app/ng2/services/config.service.ts
 create mode 100644 catalog-ui/src/app/ng2/services/cookie.service.ts
 create mode 100644 catalog-ui/src/app/ng2/services/data-type.service.ts
 create mode 100644 catalog-ui/src/app/ng2/services/http.service.ts
 create mode 100644 catalog-ui/src/app/ng2/services/mocks/properties.mock.ts
 create mode 100644 catalog-ui/src/app/ng2/services/posts.service.ts
 create mode 100644 catalog-ui/src/app/ng2/services/properties.service.ts
 create mode 100644 catalog-ui/src/app/ng2/services/responses/component-generic-response.ts
 create mode 100644 catalog-ui/src/app/ng2/services/responses/properties.response.ts
 create mode 100644 catalog-ui/src/app/ng2/services/utils/serializable.ts
 create mode 100644 catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html
 create mode 100644 catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less
 create mode 100644 catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts
 create mode 100644 catalog-ui/src/app/ng2/shared/checkbox/checkbox.module.ts
 create mode 100644 catalog-ui/src/app/ng2/shared/navbar/navbar-routes.config.ts
 create mode 100644 catalog-ui/src/app/ng2/shared/navbar/navbar.component.html
 create mode 100644 catalog-ui/src/app/ng2/shared/navbar/navbar.component.less
 create mode 100644 catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts
 create mode 100644 catalog-ui/src/app/ng2/shared/navbar/navbar.metadata.ts
 create mode 100644 catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts
 create mode 100644 catalog-ui/src/app/ng2/shared/shared.module.ts
 create mode 100644 catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts
 create mode 100644 catalog-ui/src/app/ng2/shared/tabs/tabs.component.html
 create mode 100644 catalog-ui/src/app/ng2/shared/tabs/tabs.component.less
 create mode 100644 catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts
 create mode 100644 catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts
 create mode 100644 catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts

(limited to 'catalog-ui/src/app/ng2')

diff --git a/catalog-ui/src/app/ng2/app.component.css b/catalog-ui/src/app/ng2/app.component.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/catalog-ui/src/app/ng2/app.component.html b/catalog-ui/src/app/ng2/app.component.html
new file mode 100644
index 0000000000..ed90b3deda
--- /dev/null
+++ b/catalog-ui/src/app/ng2/app.component.html
@@ -0,0 +1,6 @@
+<!--<nav>
+  <app-navbar></app-navbar>
+</nav>
+<main>
+  <router-outlet></router-outlet>
+</main>-->
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/app.component.ts b/catalog-ui/src/app/ng2/app.component.ts
new file mode 100644
index 0000000000..0499045a79
--- /dev/null
+++ b/catalog-ui/src/app/ng2/app.component.ts
@@ -0,0 +1,15 @@
+import { Component, Inject } from '@angular/core';
+import { AuthenticationService } from './services/authentication.service';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+
+  constructor(auth:AuthenticationService){
+
+  }
+
+}
diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts
new file mode 100644
index 0000000000..9e122cd288
--- /dev/null
+++ b/catalog-ui/src/app/ng2/app.module.ts
@@ -0,0 +1,74 @@
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule, APP_INITIALIZER} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {forwardRef} from '@angular/core';
+import {AppComponent} from './app.component';
+import {UpgradeAdapter} from '@angular/upgrade';
+import {UpgradeModule} from '@angular/upgrade/static';
+import {PropertiesAssignmentModule} from './pages/properties-assignment/properties-assignment.module';
+import {
+    DataTypesServiceProvider, SharingServiceProvider, CookieServiceProvider,
+    StateParamsServiceFactory
+} from "./utils/ng1-upgraded-provider";
+import {ConfigService} from "./services/config.service";
+import {HttpService} from "./services/http.service";
+import {HttpModule} from '@angular/http';
+import {AuthenticationService} from './services/authentication.service';
+import {Cookie2Service} from "./services/cookie.service";
+import {ComponentServiceNg2} from "./services/component-services/component.service";
+import {ServiceServiceNg2} from "./services/component-services/service.service";
+import {ComponentInstanceServiceNg2} from "./services/component-instance-services/component-instance.service";
+
+export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));
+
+export function configServiceFactory(config:ConfigService) {
+    return () => config.loadValidationConfiguration();
+}
+
+// export function httpServiceFactory(backend: XHRBackend, options: RequestOptions) {
+//     return new HttpService(backend, options);
+// }
+
+@NgModule({
+    declarations: [
+        AppComponent
+    ],
+    imports: [
+        BrowserModule,
+        UpgradeModule,
+        FormsModule,
+        HttpModule,
+        PropertiesAssignmentModule
+    ],
+    exports: [],
+    entryComponents: [],
+    providers: [
+        HttpService,
+        DataTypesServiceProvider,
+        SharingServiceProvider,
+        CookieServiceProvider,
+        StateParamsServiceFactory,
+        AuthenticationService,
+        Cookie2Service,
+        ConfigService,
+        ComponentServiceNg2,
+        ServiceServiceNg2,
+        ComponentInstanceServiceNg2,
+        {
+            provide: APP_INITIALIZER,
+            useFactory: configServiceFactory,
+            deps: [ConfigService],
+            multi: true
+        }
+     ],
+    bootstrap: [AppComponent]
+})
+
+
+export class AppModule {
+   // ngDoBootstrap() {}
+    constructor(public upgrade:UpgradeModule) {
+
+
+    }
+}
diff --git a/catalog-ui/src/app/ng2/app.routing.ts b/catalog-ui/src/app/ng2/app.routing.ts
new file mode 100644
index 0000000000..38bc92619f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/app.routing.ts
@@ -0,0 +1,20 @@
+import { RouterModule, Route } from '@angular/router';
+import { ModuleWithProviders } from '@angular/core';
+// import { Page1Component } from "./pages/page1/page1.component";
+// import { Page2Component } from "./pages/page2/page2.component";
+import { PageNotFoundComponent } from "./pages/page404/page404.component";
+
+const routes: Route[] = [
+  // { path: 'page1', component: Page1Component },
+  // { path: 'page2', component: Page2Component },
+  // { path: '', pathMatch: 'full', redirectTo: 'page1'},
+  { path: '**', component: PageNotFoundComponent }
+  /*{ loadChildren: './pages/dashboard/dashboard.module#DashboardModule', path: 'dashboard' }*/
+];
+
+export const routing: ModuleWithProviders = RouterModule.forRoot(
+  routes,
+  {
+    useHash: true
+  }
+);
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less
new file mode 100644
index 0000000000..e219d49aa4
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less
@@ -0,0 +1,3 @@
+dynamic-element {
+
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts
new file mode 100644
index 0000000000..de5965e488
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts
@@ -0,0 +1,117 @@
+import { Component, Compiler, EventEmitter, ViewContainerRef, ViewChild, Input, Output, ElementRef, ComponentRef, ComponentFactory, ComponentFactoryResolver } from '@angular/core'
+import { UiElementCheckBoxComponent } from './elements-ui/checkbox/ui-element-checkbox.component';
+import { UiElementDropDownComponent, DropdownValue } from './elements-ui/dropdown/ui-element-dropdown.component';
+import { UiElementInputComponent } from './elements-ui/input/ui-element-input.component';
+import {UiElementPopoverInputComponent} from "./elements-ui/popover-input/ui-element-popover-input.component";
+import {ValidationConfiguration} from "app/models";
+
+@Component({
+    selector: 'dynamic-element',
+    template: `<div #target></div>`,
+    styleUrls: ['./dynamic-element.component.less'],
+    entryComponents: [
+        UiElementInputComponent,
+        UiElementDropDownComponent,
+        UiElementCheckBoxComponent,
+        UiElementPopoverInputComponent
+    ]
+})
+export class DynamicElementComponent {
+
+    @ViewChild('target', { read: ViewContainerRef }) target: any;
+    @Input() type: any;
+    @Input() name: string;
+    value:any;
+
+    // Two way binding for value (need to write the "Change" word like this)
+    @Output('valueChange') emitter: EventEmitter<string> = new EventEmitter<any>();
+    @Input('value') set setValueValue(value) {
+        this.value = value;
+    }
+
+    cmpRef: ComponentRef<any>;
+    private isViewInitialized: boolean = false;
+    validation = ValidationConfiguration.validation;
+
+    constructor(
+        private componentFactoryResolver: ComponentFactoryResolver,
+        private compiler: Compiler,
+        private el: ElementRef) {
+    }
+
+    updateComponent() {
+        if (!this.isViewInitialized) {
+            return;
+        }
+        if (this.cmpRef) {
+            this.cmpRef.destroy();
+        }
+
+        // Factory to create component based on type or peroperty name.
+        switch(this.type) {
+            case 'list':
+            case 'integer': 
+                this.createComponent(UiElementInputComponent);
+                this.cmpRef.instance.pattern = this.validation.validationPatterns.integer;
+                break;
+            case 'string':
+                switch(this.name.toUpperCase()) {
+                    case 'SUBNETPOOLID':
+                        this.createComponent(UiElementPopoverInputComponent);
+                        break;
+                    default:
+                        this.createComponent(UiElementInputComponent);
+                }
+                break;
+            case 'boolean':
+                //this.createComponent(UiElementCheckBoxComponent);
+
+                this.createComponent(UiElementDropDownComponent);
+
+                // Build drop down values
+                let tmp = [];
+                tmp.push(new DropdownValue('true','TRUE'));
+                tmp.push(new DropdownValue('false','FALSE'));
+                this.cmpRef.instance.values = tmp;
+                break;
+            default:
+                this.createComponent(UiElementInputComponent);
+                console.log("ERROR: No ui component to handle type: " + this.type);
+        }
+
+        // Additional attributes in base element class
+        if (this.cmpRef) {
+            this.cmpRef.instance.name = this.name;
+            this.cmpRef.instance.type = this.type;
+            this.cmpRef.instance.value = this.value;
+        }
+
+        // Subscribe to change event of of ui-element-basic and fire event to change the value
+        this.cmpRef.instance.baseEmitter.subscribe((value):void => {
+            this.emitter.emit(value)
+        });
+
+    }
+
+    createComponent(ComponentToCreate:any):void {
+        let factory = this.componentFactoryResolver.resolveComponentFactory(ComponentToCreate);
+        this.cmpRef = this.target.createComponent(factory);
+    }
+
+    ngOnChanges() {
+        this.updateComponent();
+    }
+
+    ngAfterContentInit() {
+        //console.log("DynamicElementComponent: ngAfterContentInit: type: " + this.type + " value: " + this.value);
+        this.isViewInitialized = true;
+        this.updateComponent();
+    }
+
+    ngOnDestroy() {
+        if (this.cmpRef) {
+            this.cmpRef.destroy();
+        }
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts
new file mode 100644
index 0000000000..18b044bc9d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts
@@ -0,0 +1,34 @@
+import { NgModule } from "@angular/core";
+import { UiElementCheckBoxComponent } from './elements-ui/checkbox/ui-element-checkbox.component';
+import { UiElementDropDownComponent } from './elements-ui/dropdown/ui-element-dropdown.component';
+import { UiElementInputComponent } from './elements-ui/input/ui-element-input.component';
+import { DynamicElementComponent } from "app/ng2/components/dynamic-element/dynamic-element.component";
+import { BrowserModule } from '@angular/platform-browser'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { UiElementPopoverInputComponent } from "./elements-ui/popover-input/ui-element-popover-input.component";
+import {PopoverModule} from "../popover/popover.module";
+import {TooltipModule} from "../tooltip/tooltip.module";
+
+@NgModule({
+    declarations: [
+        DynamicElementComponent,
+        UiElementInputComponent,
+        UiElementCheckBoxComponent,
+        UiElementDropDownComponent,
+        UiElementPopoverInputComponent
+    ],
+    imports: [
+        BrowserModule,
+        FormsModule,
+        PopoverModule,
+        ReactiveFormsModule,
+        TooltipModule
+    ],
+    exports: [
+        DynamicElementComponent
+    ],
+    providers: []
+})
+export class DynamicElementModule {
+
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html
new file mode 100644
index 0000000000..2ad3d8e94a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html
@@ -0,0 +1 @@
+<input #{{name}}  [(ngModel)]="value" type="checkbox" (change)="onSave(value)" />
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less
new file mode 100644
index 0000000000..bed097fe5e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less
@@ -0,0 +1,2 @@
+/deep/ ui-element-checkbox {
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts
new file mode 100644
index 0000000000..152303aee7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts
@@ -0,0 +1,27 @@
+import { Component, ViewChild, ElementRef, ContentChildren, Input } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser'
+import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component';
+
+@Component({
+  selector: 'ui-element-checkbox',
+  templateUrl: './ui-element-checkbox.component.html',
+  styleUrls: ['./ui-element-checkbox.component.less'],
+})
+export class UiElementCheckBoxComponent extends UiElementBase implements UiElementBaseInterface {
+
+  constructor() {
+    super();
+  }
+
+  ngAfterContentInit() {
+    // Convert the value to boolean (instanceOf does not work, the type is undefined).
+    if (this.value==='true' || this.value==='false') {
+      this.value = this.value==='true'?true:false;
+    }
+  }
+
+    onSave() {
+        this.baseEmitter.emit(this.value);
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html
new file mode 100644
index 0000000000..589d00e42d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html
@@ -0,0 +1,3 @@
+<select name='{{name}}' [(ngModel)]="value" #t (change)="onSave()">
+  <option *ngFor="let ddvalue of values" [value]="ddvalue.value">{{ddvalue.label}}</option>
+</select>
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less
new file mode 100644
index 0000000000..ea3e35140e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less
@@ -0,0 +1,11 @@
+@import '../../../../../../assets/styles/variables';
+
+/deep/ ui-element-dropdown {
+
+    select {
+        text-indent: 6px;
+        border: solid 1px @main_color_o;
+        width: 100%;
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts
new file mode 100644
index 0000000000..208bf54983
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts
@@ -0,0 +1,33 @@
+import { Component, EventEmitter, Output, Input } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component';
+
+export class DropdownValue {
+  value:string;
+  label:string;
+
+  constructor(value:string,label:string) {
+    this.value = value;
+    this.label = label;
+  }
+}
+
+@Component({
+  selector: 'ui-element-dropdown',
+  templateUrl: './ui-element-dropdown.component.html',
+  styleUrls: ['./ui-element-dropdown.component.less'],
+})
+export class UiElementDropDownComponent extends UiElementBase implements UiElementBaseInterface {
+
+  @Input()
+  values: DropdownValue[];
+
+  constructor() {
+    super();
+  }
+
+    onSave() {
+        this.baseEmitter.emit(this.value);
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html
new file mode 100644
index 0000000000..00fea65b72
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html
@@ -0,0 +1,13 @@
+<input
+    class="value-input"
+    [ngClass]="{'error': control.invalid}"
+    type="text"
+    [name]="name"
+    [(ngModel)]="value"
+    (change)="onSave()"
+    [attr.maxlength]="validation.propertyValue.max"
+    [attr.minlength]="validation.propertyValue.min"
+    [pattern]="pattern"
+    [formControl]="control"
+    tooltip="{{value}}"
+    />
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less
new file mode 100644
index 0000000000..d320c7ff8b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less
@@ -0,0 +1,17 @@
+@import '../../../../../../assets/styles/variables';
+
+/deep/ ui-element-input {
+
+    input {
+        text-indent: 6px;
+        border: solid 1px @main_color_o;
+    }
+
+    .error {
+        border: solid 1px @func_color_q;
+        color: @func_color_q;
+        outline: none;
+        box-sizing: border-box;
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts
new file mode 100644
index 0000000000..5a14d8f206
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts
@@ -0,0 +1,22 @@
+import { Component, ViewChild, ElementRef, ContentChildren } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser'
+import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component';
+
+@Component({
+    selector: 'ui-element-input',
+    templateUrl: './ui-element-input.component.html',
+    styleUrls: ['./ui-element-input.component.less'],
+})
+export class UiElementInputComponent extends UiElementBase implements UiElementBaseInterface {
+
+    constructor() {
+        super();
+        this.pattern = this.validation.validationPatterns.comment;
+    }
+
+    onSave() {
+        if (!this.control.invalid){
+            this.baseEmitter.emit(this.value);
+        }
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html
new file mode 100644
index 0000000000..5adceb49a0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html
@@ -0,0 +1,26 @@
+<div class="popover-input-wrapper" tooltip="{{value}}">
+    <input
+        class="value-input"
+        type="text"
+        [ngClass]="{'error': control.invalid}"
+        [name]="name"
+        [value]="value"
+        disabled
+        />
+    <button [popover]="popoverForm">Edit</button>
+</div>
+
+<popover-content #popoverForm [title]="name" [buttons]="buttonsArray" [placement]="'top'" [closeOnClickOutside]="true">
+    <div class="edit-subnet-wrapper">
+        <textarea   rows="5"
+                    #textArea
+                    class="subnet-value"
+                    [ngClass]="{'error': control.invalid}"
+                    [(ngModel)]="value"
+                    [attr.maxlength]="validation.propertyValue.max"
+                    [attr.minlength]="validation.propertyValue.min"
+                    [pattern]="pattern"
+                    [formControl]="control"
+                  ></textarea>
+    </div>
+</popover-content>
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less
new file mode 100644
index 0000000000..5be443f7b6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less
@@ -0,0 +1,36 @@
+@import '../../../../../../assets/styles/variables';
+
+.popover-input-wrapper {
+    display: flex;
+}
+
+/deep/ ui-element-popover-input {
+
+    .popover {
+        max-width: 350px;
+        width: 350px;
+    }
+
+    .edit-subnet-wrapper {
+        padding: 12px;
+
+        .subnet-value {
+            width: 100%;
+            resize: none;
+        }
+    }
+
+    input {
+        padding-right: 6px;
+        padding-left: 6px;
+        border: solid 1px @main_color_o;
+    }
+
+    .error {
+        border: solid 1px @func_color_q;
+        color: @func_color_q;
+        outline: none;
+        box-sizing: border-box;
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts
new file mode 100644
index 0000000000..7300417686
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts
@@ -0,0 +1,39 @@
+import {Component, ViewChild, ElementRef} from '@angular/core';
+import {UiElementBase, UiElementBaseInterface} from "../ui-element-base.component";
+import {ButtonsModelMap, ButtonModel} from "app/models";
+import { PopoverContentComponent } from "app/ng2/components/popover/popover-content.component"
+import { PopoverComponent } from "app/ng2/components/popover/popover.component"
+
+@Component({
+    selector: 'ui-element-popover-input',
+    templateUrl: './ui-element-popover-input.component.html',
+    styleUrls: ['./ui-element-popover-input.component.less']
+})
+export class UiElementPopoverInputComponent extends UiElementBase implements UiElementBaseInterface {
+
+    @ViewChild('textArea') textArea: ElementRef;
+    @ViewChild('popoverForm') popoverContentComponent: PopoverContentComponent;
+
+    saveButton: ButtonModel;
+    buttonsArray: ButtonsModelMap;
+
+    onSave = ():void => {
+        if (!this.control.invalid){
+            this.baseEmitter.emit(this.value);
+            this.popoverContentComponent.hide();
+        }
+    }
+
+    constructor() {
+        super();
+        // Create Save button and insert to buttons map
+        this.saveButton = new ButtonModel('save', 'blue', this.onSave);
+        this.buttonsArray = { 'test': this.saveButton };
+
+        // Define the regex pattern for this controller
+        this.pattern = this.validation.validationPatterns.comment;
+
+        // Disable / Enable button according to validation
+        //this.control.valueChanges.subscribe(data => this.saveButton.disabled = this.control.invalid);
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts
new file mode 100644
index 0000000000..b60271f6f0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts
@@ -0,0 +1,34 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { ValidationConfiguration } from "app/models";
+import { FormControl, Validators } from '@angular/forms';
+
+export interface UiElementBaseInterface {
+    onSave();
+}
+
+@Component({
+    template: ``,
+    styles: []
+})
+export class UiElementBase {
+
+    protected validation = ValidationConfiguration.validation;
+    protected control: FormControl;
+
+    // Two way binding for value (need to write the "Change" word like this)
+    @Output('valueChange') baseEmitter: EventEmitter<string> = new EventEmitter<any>();
+    @Input('value') set setValueValue(value) {
+        this.value = value;
+    }
+
+    protected name: string;
+    protected type: string;
+    protected value: any;
+    protected pattern: any;
+
+    constructor() {
+        //this.control = new FormControl('', [Validators.required]);
+        this.control = new FormControl('', []);
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.html b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.html
new file mode 100644
index 0000000000..4d2b91f3b4
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.html
@@ -0,0 +1,26 @@
+<popover-content #filterPopover [title]="'Filters'" [buttons]="footerButtons" placement="bottom-right" [hideArrow]="true">
+    <!--<form [formGroup]="filterForm">-->
+    <form>
+        <div class="field">
+            <label>Resource Type</label>
+            <div>
+                <checkbox [label]="'All'" [(checked)]="allSelected" (checkedChange)="selectAll()"></checkbox>
+            </div>
+            <div *ngFor="let type of typesOptions">
+                <checkbox [label]="type" [(checked)]="selectedTypes[type]" (checkedChange)="onTypeSelected(type)"></checkbox>
+            </div>
+        </div>
+        <div class="field">
+            <label>Property Name</label>
+            <input class="i-sdc-form-input"
+                   name="propertyName"
+                   [(ngModel)]="filterData.propertyName"
+                   placeholder="Type here"
+                   required
+            />
+        </div>
+    </form>
+</popover-content>
+<div class="open-filter-button" [popover]="filterPopover" [ngClass]="{'open':showPopover}" (onShown)="showPopover = true" (onHidden)="showPopover = false">
+    <div class="sprite-new filter-icon"></div>
+</div>
diff --git a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less
new file mode 100644
index 0000000000..c1341b8dcf
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less
@@ -0,0 +1,38 @@
+@import '../../../../assets/styles/variables';
+form{
+    margin: 0 20px;
+    .field{
+        padding:20px 0;
+        &:not(:last-child){
+            border-bottom: solid 1px @main_color_o;
+        }
+    }
+    /deep/ [ng-reflect-checked="true"]{
+        /deep/ .checkbox-label-content{
+            color: @main_color_a;
+        }
+    }
+}
+
+.open-filter-button{
+    cursor: pointer;
+    width: 25px;
+    height: 34px;
+    display: inline-block;
+    &.open{
+        z-index: 1061;
+        position: relative;
+        top: 2px;
+        background-color: @main_color_p;
+        border: solid 1px @main_color_c;
+        border-bottom: none;
+    }
+    .filter-icon{
+        top: 8px;
+        position: relative;
+    }
+}
+
+/deep/ .popover{
+    border: solid 1px @main_color_c !important;
+}
diff --git a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts
new file mode 100644
index 0000000000..c23e08bc0d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts
@@ -0,0 +1,77 @@
+/**
+ * Created by rc2122 on 5/16/2017.
+ */
+import {Component, Input, Output, EventEmitter, ViewChild} from '@angular/core';
+import {ButtonModel, ButtonsModelMap, FilterPropertiesAssignmentData} from "app/models";
+import {PopoverComponent} from "../popover/popover.component";
+import * as sdcConfig from "../../../../../configurations/dev"
+
+@Component({
+    selector: 'filter-properties-assignment',
+    templateUrl: './filter-properties-assignment.component.html',
+    styleUrls: ['./filter-properties-assignment.component.less']
+})
+
+export class FilterPropertiesAssignmentComponent {
+    @Input() componentType: string;
+    @Output() searchProperties: EventEmitter<FilterPropertiesAssignmentData> = new EventEmitter<FilterPropertiesAssignmentData>();
+    footerButtons:ButtonsModelMap = {};
+    typesOptions:Array<string>;//All optional types
+    selectedTypes:Object = {};
+    allSelected:boolean = false;//if all option selected
+    filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData();
+    @ViewChild('filterPopover') filterPopover: PopoverComponent;
+
+    ngOnInit() {
+        this.footerButtons['Apply'] = new ButtonModel('Apply', 'blue', this.search, this.someTypesSelectedAndThereIsPropertyName);
+        this.footerButtons['Close'] = new ButtonModel('Close', 'grey', this.close);
+        this.componentType = this.componentType.toLocaleLowerCase();
+        this.typesOptions = sdcConfig.resourceTypesFilter[this.componentType];
+    }
+
+    selectAll = () => {
+        _.forEach(this.typesOptions, (type) => {
+            this.selectedTypes[type] = this.allSelected;
+        });
+    }
+
+    onTypeSelected = (type:string) => {
+        if(!this.selectedTypes[type]){
+            this.allSelected = false;//unselected 'All'
+        }
+    };
+
+    search = () => {
+        console.log('search props');
+        this.filterData.selectedTypes = [];
+        _.forEach(sdcConfig.resourceTypesFilter[this.componentType], (type) => {
+            if(this.selectedTypes[type]){
+                this.filterData.selectedTypes.push(type);
+            }
+        });
+        this.searchProperties.emit(this.filterData);
+        this.filterPopover.hide();
+    }
+
+    close = () => {
+        this.filterPopover.hide();
+    }
+
+    someTypesSelectedAndThereIsPropertyName = ():boolean => {
+        if( _.find(Object.keys(this.selectedTypes),(key) => {
+            return this.selectedTypes[key];
+        }) && this.filterData.propertyName ){
+            return null
+        }
+        return true;
+    }
+
+    clearAll = ():void => {
+        this.filterData.propertyName = "";
+        _.forEach(this.selectedTypes,(value, key) => {
+            this.selectedTypes[key] = false;
+        });
+        this.allSelected = false;
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts
new file mode 100644
index 0000000000..7045286ccd
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts
@@ -0,0 +1,12 @@
+export class HierarchyDisplayOptions {
+    idProperty: string;
+    valueProperty: string;
+    childrenProperty: string;
+    searchText:string;
+    constructor(idProperty:string, valueProperty:string, childrenProperty?:string, searchText?:string) {
+        this.idProperty = idProperty;
+        this.valueProperty = valueProperty;
+        this.childrenProperty = childrenProperty;
+        this.searchText = searchText;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.html b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.html
new file mode 100644
index 0000000000..40a1c37cee
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.html
@@ -0,0 +1,13 @@
+<div class="navigation-wrapper">
+    <div class="node-item" *ngFor="let item of displayData" (click)="onClick($event, item)">
+        <div class="node-data-wrapper" [ngClass]="{'selected': selectedItem && selectedItem === item[displayOptions.idProperty]}">
+            <span class="node-data" [ngClass]="{'mark':item[displayOptions.valueProperty] === displayOptions.searchText}">{{item[displayOptions.valueProperty]}}</span>
+        </div>
+        <div class="children-node" *ngIf="item[displayOptions.childrenProperty]">
+            <hierarchy-navigation class="children-hierarchy" [displayData]="item[displayOptions.childrenProperty]"
+                                  [selectedItem]="selectedItem"
+                                  [displayOptions]="displayOptions"
+                                  (updateSelected)="onSelectedUpdate($event)"></hierarchy-navigation>
+        </div>
+    </div>
+</div>
diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less
new file mode 100644
index 0000000000..57d51616a8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less
@@ -0,0 +1,51 @@
+.navigation-wrapper {
+    text-align: left;
+}
+
+.node-item {
+    border: 1px dotted;
+    border-right: none;
+    border-bottom: none;
+}
+
+.node-item:last-child {
+    border-left: none;
+}
+
+.node-data-wrapper {
+    cursor: default;
+    height: 30px;
+    line-height: 2.6em;;
+    position: relative;
+    top: -1.1em;
+    background-color: white;
+    margin-left: 0.7em;
+}
+
+.children-node {
+    padding-left: 40px;
+}
+
+.node-data {
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.node-data-wrapper.selected {
+    background-color: #e6f6fb;
+
+    .node-data {
+        color:  #009fdb;
+    }
+}
+
+.node-data-wrapper:hover {
+    background-color: #eaeaea;
+}
+
+.mark{
+    background-color: yellow;
+}
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts
new file mode 100644
index 0000000000..428bbb4b04
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts
@@ -0,0 +1,28 @@
+import {Component, Input, Output, EventEmitter} from '@angular/core';
+import {HierarchyDisplayOptions} from './hierarchy-display-options';
+
+
+@Component({
+    selector: 'hierarchy-navigation',
+    templateUrl: './hierarchy-navigation.component.html',
+    styleUrls: ['./hierarchy-navigation.component.less']
+})
+
+export class HierarchyNavigationComponent {
+    @Input() displayData: Array<any>;
+    @Input() selectedItem: any;
+    @Input() displayOptions: HierarchyDisplayOptions;
+
+    @Output() updateSelected:EventEmitter<any> =  new EventEmitter();
+
+    onClick = ($event, item) => {
+        $event.stopPropagation();
+        this.selectedItem = item;
+        this.updateSelected.emit(item);
+    };
+
+    onSelectedUpdate = ($event) => {
+        this.selectedItem = $event;
+        this.updateSelected.emit($event);
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
new file mode 100644
index 0000000000..e7801b82cf
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
@@ -0,0 +1,37 @@
+<div class="properties-table">
+    <div class="table-header">
+        <div class="table-cell col1">Property Name</div>
+        <div class="table-cell col2">Type</div>
+        <div class="table-cell col3">ES</div>
+        <div class="table-cell valueCol">Value</div>
+    </div>
+    <div class="table-body">
+        <div class="no-data" *ngIf="!inputs || !inputs.length">No data to display</div>
+        <div class="table-row" *ngFor="let input of inputs">
+            <div class="table-cell col1">
+                <span tooltip="{{input.name}}" >{{input.name}}</span>
+                <span *ngIf="input.description"
+                      class="property-description-icon sprite-new show-desc"
+                      tooltip="{{input.description}}"></span>
+            </div>
+            <div class="table-cell col2">{{input.type | contentAfterLastDot}}</div>
+            <div class="table-cell col3">{{input.schema && input.schema.property && input.schema.property.type ? (input.schema.property.type | contentAfterLastDot) : ''}}</div>
+            <div class="table-cell valueCol input-value-col" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType">
+                <dynamic-element class="value-input"
+                                 *ngIf="input.isSimpleType"
+                                 pattern="validationUtils.getValidationPattern(input.type)"
+                                 [(value)]="input.defaultValue"
+                                 [type]="input.type"
+                                 [name]="input.name"
+                                 (change)="onInputValueChanged(input);">
+                </dynamic-element>
+                <div class="delete-button-container">
+                    <span class="sprite-new delete-btn" (click)="onDeleteInput(input)"></span>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
new file mode 100644
index 0000000000..ea01edf043
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
@@ -0,0 +1,33 @@
+/**
+ * Created by rc2122 on 5/4/2017.
+ */
+import {Component, Input, Output, EventEmitter} from "@angular/core";
+import {InputFEModel} from "app/models";
+
+@Component({
+    selector: 'inputs-table',
+    templateUrl: './inputs-table.component.html',
+    styleUrls: ['../properties-table/properties-table.component.less']
+})
+export class InputsTableComponent {
+
+    @Input() inputs: Array<InputFEModel>;
+
+    @Output() inputValueChanged: EventEmitter<any> = new EventEmitter<any>();
+    @Output() deleteInput: EventEmitter<any> = new EventEmitter<any>();
+
+    constructor (){
+    }
+
+    onInputValueChanged = (input) => {
+        this.inputValueChanged.emit(input);
+    };
+
+    onDeleteInput = (input) => {
+        this.deleteInput.emit(input);
+    }
+
+
+}
+
+
diff --git a/catalog-ui/src/app/ng2/components/popover/popover-content.component.html b/catalog-ui/src/app/ng2/components/popover/popover-content.component.html
new file mode 100644
index 0000000000..6d76f0ad06
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/popover/popover-content.component.html
@@ -0,0 +1,24 @@
+<div #popoverDiv class="popover {{ effectivePlacement }}"
+     [style.top]="top + 'px'"
+     [style.left]="left + 'px'"
+     [class.in]="isIn"
+     [class.fade]="animation"
+     style="display: block"
+     role="popover"
+     [ngClass]="{'hide-arrow':hideArrow}">
+    <div [hidden]="!closeOnMouseOutside" class="virtual-area"></div>
+    <div class="arrow" *ngIf="!hideArrow"></div>
+    <div class="popover-header">
+        <span class="title">{{ title }}</span>
+        <span class="close-button" (click)="popover.hide()"></span>
+    </div>
+    <ng-content></ng-content>
+    <div class="popover-footer">
+        <button *ngFor="let buttonName of buttonsNames"
+                class="tlv-btn {{buttons[buttonName].cssClass}}"
+                [disabled] = "buttons[buttonName].getDisabled && buttons[buttonName].getDisabled()"
+                (click) = "buttons[buttonName].callback()">{{buttons[buttonName].text}}</button>
+    </div>
+</div>
+
+
diff --git a/catalog-ui/src/app/ng2/components/popover/popover-content.component.less b/catalog-ui/src/app/ng2/components/popover/popover-content.component.less
new file mode 100644
index 0000000000..f7b62e91f7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/popover/popover-content.component.less
@@ -0,0 +1,73 @@
+@import '../../../../assets/styles/variables';
+@import '../../../../assets/styles/mixins';
+@import '../../../../assets/styles/sprite-old';
+.popover .virtual-area {
+    height: 11px;
+    width: 100%;
+    position: absolute;
+}
+.popover.top .virtual-area {
+    bottom: -11px;
+}
+.popover.bottom .virtual-area {
+    top: -11px;
+}
+.popover.left .virtual-area {
+    right: -11px;
+}
+.popover.right .virtual-area {
+    left: -11px;
+}
+.popover.hide-arrow{
+    margin: 0;
+}
+
+.popover-header{
+    .m_14_m;
+    font-weight: bold;
+    -webkit-box-flex: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+    height: 40px;
+    line-height: 48px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    text-align: left;
+    border-bottom: solid 1px @main_color_o;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    margin: 0px 20px;
+    .title{
+        -webkit-box-flex: 999;
+        -ms-flex-positive: 999;
+        flex-grow: 999;
+    }
+    .close-button{
+        .sprite;
+        .sprite.x-btn-black;
+        cursor: pointer;
+    }
+}
+
+.popover-footer{
+    background-color: @tlv_color_t;
+    height: 40px;
+    clear: both;
+    -webkit-box-flex: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+    button{
+        margin: 8px 12px 8px 6px;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/popover/popover-content.component.ts b/catalog-ui/src/app/ng2/components/popover/popover-content.component.ts
new file mode 100644
index 0000000000..c4489f59b9
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/popover/popover-content.component.ts
@@ -0,0 +1,258 @@
+import {Component, Input, Output, AfterViewInit, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, EventEmitter, Renderer } from "@angular/core";
+import {ButtonsModelMap} from "app/models";
+import {PopoverComponent} from "./popover.component";
+
+@Component({
+    selector: "popover-content",
+    templateUrl:'./popover-content.component.html',
+    styleUrls:['popover-content.component.less']
+})
+export class PopoverContentComponent implements AfterViewInit, OnDestroy {
+
+    @Input() public title: string;
+    @Input() public buttons:ButtonsModelMap;
+
+    @Input()
+    content: string;
+
+    @Input()
+    placement: "top"|"bottom"|"left"|"right"|"auto"|"auto top"|"auto bottom"|"auto left"|"auto right" = "bottom";
+
+    @Input()
+    animation: boolean = true;
+
+    @Input()
+    closeOnClickOutside: boolean = false;
+
+    @Input()
+    closeOnMouseOutside: boolean = false;
+
+    @Input()
+    hideArrow: boolean = false;
+
+    @ViewChild("popoverDiv")
+    popoverDiv: ElementRef;
+
+    buttonsNames:Array<string>;
+
+    popover: PopoverComponent;
+    onCloseFromOutside = new EventEmitter();
+    top: number = -10000;
+    left: number = -10000;
+    isIn: boolean = false;
+    displayType: string = "none";
+    effectivePlacement: string;
+
+    onDocumentMouseDown = (event: any) => {
+        const element = this.element.nativeElement;
+        if (!element || !this.popover) return;
+        if (element.contains(event.target) || this.popover.getElement().contains(event.target)) return;
+        this.hide();
+        this.onCloseFromOutside.emit(undefined);
+    };
+
+
+    constructor(protected element: ElementRef,
+                protected cdr: ChangeDetectorRef,
+                protected renderer: Renderer) {
+    }
+
+    listenClickFunc: any;
+    listenMouseFunc: any;
+
+    ngAfterViewInit(): void {
+        this.buttonsNames = Object.keys(this.buttons);
+        if (this.closeOnClickOutside)
+            this.listenClickFunc = this.renderer.listenGlobal("document", "mousedown", (event: any) => this.onDocumentMouseDown(event));
+        if (this.closeOnMouseOutside)
+            this.listenMouseFunc = this.renderer.listenGlobal("document", "mouseover", (event: any) => this.onDocumentMouseDown(event));
+
+        this.show();
+        this.cdr.detectChanges();
+    }
+
+    ngOnDestroy() {
+        if (this.closeOnClickOutside)
+            this.listenClickFunc();
+        if (this.closeOnMouseOutside)
+            this.listenMouseFunc();
+    }
+
+    // -------------------------------------------------------------------------
+    // Public Methods
+    // -------------------------------------------------------------------------
+
+    show(): void {
+        if (!this.popover || !this.popover.getElement())
+            return;
+
+        const p = this.positionElements(this.popover.getElement(), this.popoverDiv.nativeElement, this.placement);
+        this.displayType = "block";
+        this.top = p.top;
+        this.left = p.left;
+        this.isIn = true;
+    }
+
+    hide(): void {
+        this.top = -10000;
+        this.left = -10000;
+        this.isIn = true;
+        this.popover.hide();
+    }
+
+    hideFromPopover() {
+        this.top = -10000;
+        this.left = -10000;
+        this.isIn = true;
+    }
+
+    // -------------------------------------------------------------------------
+    // Protected Methods
+    // -------------------------------------------------------------------------
+
+    protected positionElements(hostEl: HTMLElement, targetEl: HTMLElement, positionStr: string, appendToBody: boolean = false): { top: number, left: number } {
+        let positionStrParts = positionStr.split("-");
+        let pos0 = positionStrParts[0];
+        let pos1 = positionStrParts[1] || "center";
+        let hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl);
+        let targetElWidth = targetEl.offsetWidth;
+        let targetElHeight = targetEl.offsetHeight;
+
+        this.effectivePlacement = pos0 = this.getEffectivePlacement(pos0, hostEl, targetEl);
+
+        let shiftWidth: any = {
+            center: function (): number {
+                return hostElPos.left + hostElPos.width / 2 - targetElWidth / 2;
+            },
+            left: function (): number {
+                return hostElPos.left;
+            },
+            right: function (): number {
+                return hostElPos.left + hostElPos.width - targetElWidth;
+            }
+        };
+
+        let shiftHeight: any = {
+            center: function (): number {
+                return hostElPos.top + hostElPos.height / 2 - targetElHeight / 2;
+            },
+            top: function (): number {
+                return hostElPos.top;
+            },
+            bottom: function (): number {
+                return hostElPos.top + hostElPos.height - targetElHeight;
+            }
+        };
+
+        let targetElPos: { top: number, left: number };
+        switch (pos0) {
+            case "right":
+                targetElPos = {
+                    top: shiftHeight[pos1](),
+                    left: hostElPos.left + hostElPos.width
+                };
+                break;
+
+            case "left":
+                targetElPos = {
+                    top: shiftHeight[pos1](),
+                    left: hostElPos.left - targetElWidth
+                };
+                break;
+
+            case "bottom":
+                targetElPos = {
+                    top: hostElPos.top + hostElPos.height,
+                    left: shiftWidth[pos1]()
+                };
+                break;
+
+            default:
+                targetElPos = {
+                    top: hostElPos.top - targetElHeight,
+                    left: shiftWidth[pos1]()
+                };
+                break;
+        }
+
+        return targetElPos;
+    }
+
+    protected position(nativeEl: HTMLElement): { width: number, height: number, top: number, left: number } {
+        let offsetParentBCR = { top: 0, left: 0 };
+        const elBCR = this.offset(nativeEl);
+        const offsetParentEl = this.parentOffsetEl(nativeEl);
+        if (offsetParentEl !== window.document) {
+            offsetParentBCR = this.offset(offsetParentEl);
+            offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop;
+            offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft;
+        }
+
+        const boundingClientRect = nativeEl.getBoundingClientRect();
+        return {
+            width: boundingClientRect.width || nativeEl.offsetWidth,
+            height: boundingClientRect.height || nativeEl.offsetHeight,
+            top: elBCR.top - offsetParentBCR.top,
+            left: elBCR.left - offsetParentBCR.left
+        };
+    }
+
+    protected offset(nativeEl: any): { width: number, height: number, top: number, left: number } {
+        const boundingClientRect = nativeEl.getBoundingClientRect();
+        return {
+            width: boundingClientRect.width || nativeEl.offsetWidth,
+            height: boundingClientRect.height || nativeEl.offsetHeight,
+            top: boundingClientRect.top + (window.pageYOffset || window.document.documentElement.scrollTop),
+            left: boundingClientRect.left + (window.pageXOffset || window.document.documentElement.scrollLeft)
+        };
+    }
+
+    protected getStyle(nativeEl: HTMLElement, cssProp: string): string {
+        if ((nativeEl as any).currentStyle) // IE
+            return (nativeEl as any).currentStyle[cssProp];
+
+        if (window.getComputedStyle)
+            return (window.getComputedStyle as any)(nativeEl)[cssProp];
+
+        // finally try and get inline style
+        return (nativeEl.style as any)[cssProp];
+    }
+
+    protected isStaticPositioned(nativeEl: HTMLElement): boolean {
+        return (this.getStyle(nativeEl, "position") || "static" ) === "static";
+    }
+
+    protected parentOffsetEl(nativeEl: HTMLElement): any {
+        let offsetParent: any = nativeEl.offsetParent || window.document;
+        while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) {
+            offsetParent = offsetParent.offsetParent;
+        }
+        return offsetParent || window.document;
+    }
+
+    protected getEffectivePlacement(placement: string, hostElement: HTMLElement, targetElement: HTMLElement): string {
+        const placementParts = placement.split(" ");
+        if (placementParts[0] !== "auto") {
+            return placement;
+        }
+
+        const hostElBoundingRect = hostElement.getBoundingClientRect();
+
+        const desiredPlacement = placementParts[1] || "bottom";
+
+        if (desiredPlacement === "top" && hostElBoundingRect.top - targetElement.offsetHeight < 0) {
+            return "bottom";
+        }
+        if (desiredPlacement === "bottom" && hostElBoundingRect.bottom + targetElement.offsetHeight > window.innerHeight) {
+            return "top";
+        }
+        if (desiredPlacement === "left" && hostElBoundingRect.left - targetElement.offsetWidth < 0) {
+            return "right";
+        }
+        if (desiredPlacement === "right" && hostElBoundingRect.right + targetElement.offsetWidth > window.innerWidth) {
+            return "left";
+        }
+
+        return desiredPlacement;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/popover/popover.component.ts b/catalog-ui/src/app/ng2/components/popover/popover.component.ts
new file mode 100644
index 0000000000..a7e2881b29
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/popover/popover.component.ts
@@ -0,0 +1,159 @@
+import { Directive, HostListener, ComponentRef, ViewContainerRef, ComponentFactoryResolver, ComponentFactory, Input, OnChanges, SimpleChange, Output, EventEmitter } from "@angular/core";
+import {PopoverContentComponent} from "./popover-content.component";
+
+@Directive({
+    selector: "[popover]",
+    exportAs: "popover"
+})
+export class PopoverComponent implements OnChanges {
+
+    protected PopoverComponent = PopoverContentComponent;
+    protected popover: ComponentRef<PopoverContentComponent>;
+    protected visible: boolean;
+
+
+    constructor(protected viewContainerRef: ViewContainerRef,
+                protected resolver: ComponentFactoryResolver) {
+    }
+
+    @Input("popover")
+    content: string|PopoverContentComponent;
+
+    @Input()
+    popoverDisabled: boolean;
+
+    @Input()
+    popoverAnimation: boolean;
+
+    @Input()
+    popoverPlacement: "top"|"bottom"|"left"|"right"|"auto"|"auto top"|"auto bottom"|"auto left"|"auto right";
+
+    @Input()
+    popoverTitle: string;
+
+    @Input()
+    popoverOnHover: boolean = false;
+
+    @Input()
+    popoverCloseOnClickOutside: boolean;
+
+    @Input()
+    popoverCloseOnMouseOutside: boolean;
+
+    @Input()
+    popoverDismissTimeout: number = 0;
+
+    @Output()
+    onShown = new EventEmitter<PopoverComponent>();
+
+    @Output()
+    onHidden = new EventEmitter<PopoverComponent>();
+
+    @HostListener("click")
+    showOrHideOnClick(): void {
+        if (this.popoverOnHover) return;
+        if (this.popoverDisabled) return;
+        this.toggle();
+    }
+
+    @HostListener("focusin")
+    @HostListener("mouseenter")
+    showOnHover(): void {
+        if (!this.popoverOnHover) return;
+        if (this.popoverDisabled) return;
+        this.show();
+    }
+
+    @HostListener("focusout")
+    @HostListener("mouseleave")
+    hideOnHover(): void {
+        if (this.popoverCloseOnMouseOutside) return;
+        if (!this.popoverOnHover) return;
+        if (this.popoverDisabled) return;
+        this.hide();
+    }
+
+    ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
+        if (changes["popoverDisabled"]) {
+            if (changes["popoverDisabled"].currentValue) {
+                this.hide();
+            }
+        }
+    }
+
+    toggle() {
+        if (!this.visible) {
+            this.show();
+        } else {
+            this.hide();
+        }
+    }
+
+    show() {
+        if (this.visible) return;
+
+        this.visible = true;
+        if (typeof this.content === "string") {
+            const factory = this.resolver.resolveComponentFactory(this.PopoverComponent);
+            if (!this.visible)
+                return;
+
+            this.popover = this.viewContainerRef.createComponent(factory);
+            const popover = this.popover.instance as PopoverContentComponent;
+            popover.popover = this;
+            popover.content = this.content as string;
+            if (this.popoverPlacement !== undefined)
+                popover.placement = this.popoverPlacement;
+            if (this.popoverAnimation !== undefined)
+                popover.animation = this.popoverAnimation;
+            if (this.popoverTitle !== undefined)
+                popover.title = this.popoverTitle;
+            if (this.popoverCloseOnClickOutside !== undefined)
+                popover.closeOnClickOutside = this.popoverCloseOnClickOutside;
+            if (this.popoverCloseOnMouseOutside !== undefined)
+                popover.closeOnMouseOutside = this.popoverCloseOnMouseOutside;
+
+            popover.onCloseFromOutside.subscribe(() => this.hide());
+            if (this.popoverDismissTimeout > 0)
+                setTimeout(() => this.hide(), this.popoverDismissTimeout);
+        } else {
+            const popover = this.content as PopoverContentComponent;
+            popover.popover = this;
+            if (this.popoverPlacement !== undefined)
+                popover.placement = this.popoverPlacement;
+            if (this.popoverAnimation !== undefined)
+                popover.animation = this.popoverAnimation;
+            if (this.popoverTitle !== undefined)
+                popover.title = this.popoverTitle;
+            if (this.popoverCloseOnClickOutside !== undefined)
+                popover.closeOnClickOutside = this.popoverCloseOnClickOutside;
+            if (this.popoverCloseOnMouseOutside !== undefined)
+                popover.closeOnMouseOutside = this.popoverCloseOnMouseOutside;
+
+            popover.onCloseFromOutside.subscribe(() => this.hide());
+            if (this.popoverDismissTimeout > 0)
+                setTimeout(() => this.hide(), this.popoverDismissTimeout);
+            popover.show();
+        }
+
+        this.onShown.emit(this);
+    }
+
+    hide() {
+        if (!this.visible) return;
+
+        this.visible = false;
+        if (this.popover)
+            this.popover.destroy();
+
+        if (this.content instanceof PopoverContentComponent)
+            (this.content as PopoverContentComponent).hideFromPopover();
+
+        this.onHidden.emit(this);
+    }
+
+    getElement() {
+        return this.viewContainerRef.element.nativeElement;
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/popover/popover.module.ts b/catalog-ui/src/app/ng2/components/popover/popover.module.ts
new file mode 100644
index 0000000000..4bd8426ce1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/popover/popover.module.ts
@@ -0,0 +1,27 @@
+/**
+ * Created by rc2122 on 5/17/2017.
+ */
+import {NgModule} from "@angular/core";
+import { CommonModule } from '@angular/common';
+import {PopoverComponent} from "./popover.component";
+import {PopoverContentComponent} from "./popover-content.component";
+
+@NgModule({
+    declarations: [
+        PopoverComponent,
+        PopoverContentComponent
+    ],
+    imports: [
+        // PopoverComponent,
+        // PopoverContentComponent
+        CommonModule
+    ],
+    exports: [
+        PopoverComponent,
+        PopoverContentComponent
+    ],
+    providers: []
+})
+export class PopoverModule {
+
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.html
new file mode 100644
index 0000000000..6e7d4e882b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.html
@@ -0,0 +1,24 @@
+<!-- TODO: refactor this to be dynamic -->
+<div class="derived-property-row" *ngIf="propertyObj.isDeclared || propertyObj.derivedDataType == derivedPropertyTypes.SIMPLE">
+    <div class="table-cell" [ngClass]="{'iltered':propertyObj.name === propertyNameSearchText}"><checkbox [label]="propertyObj.name" [(checked)]="propertyObj.isSelected" [disabled]="propertyObj.isDisabled ||propertyObj.isDeclared" (checkedChange)="checkedChange($event)"></checkbox></div>
+
+    <div class="table-cell simple">
+        <input type="text" [(ngModel)]="propertyObj.value" [disabled]="propertyObj.isDisabled || propertyObj.isDeclared" (change)="valueChanged.emit()" />
+    </div>
+</div>
+<div class="derived-property-row" *ngIf="!propertyObj.isDeclared && propertyObj.derivedDataType == derivedPropertyTypes.COMPLEX">
+    <div class="table-cell" [ngClass]="{'filtered':propertyObj.name === propertyNameSearchText}"><checkbox [label]="propertyObj.name" [(checked)]="propertyObj.isSelected" [disabled]="propertyObj.isDisabled ||propertyObj.isDeclared" (checkedChange)="checkedChange($event)"></checkbox></div>
+    <div class="table-cell complex">
+        <span class="datatype-text">{{propertyObj.type | contentAfterLastDot }}</span>
+        <span (click)="expandChildById(propertyObj.propertiesName)" class="expand-icon" [class.expanded]="expanded">V</span>
+    </div>
+</div>
+<div class="derived-property-row" *ngIf="!propertyObj.isDeclared && propertyObj.derivedDataType == derivedPropertyTypes.SIMPLELIST ||propertyObj.derivedDataType == derivedPropertyTypes.SIMPLEMAP">
+    <div class="table-cell">
+        <span [ngClass]="{'filtered':propertyObj.name === propertyNameSearchText}">{{propertyObj.name}}</span>
+    </div>
+    <div class="table-cell simple2">
+        <div class="sprite-new add-item-icon" (click)="addRows(propertyObj)"></div>
+    </div>
+</div>
+
diff --git a/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.less
new file mode 100644
index 0000000000..3102c5ceb8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.less
@@ -0,0 +1,35 @@
+.derived-property-row {
+    display:flex;
+    flex-direction:row;
+    position:relative;
+    border-top: #d2d2d2 solid 1px;
+    
+    &:first-child {
+        border-top:none;
+    }
+    .table-cell {
+        flex: 0 0 50%;
+        padding:5px;
+        position:relative;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &:first-child {
+            border-right:#d2d2d2 solid 1px;
+            overflow:hidden;
+        }
+        span.expand-icon {
+            position: absolute;
+            right: 10px;
+            transition: 200ms transform ease-in-out;
+        }
+        span.expand-icon.expanded {
+            transform: rotate(-180deg);
+        }
+    }
+}
+.filtered {
+    /deep/ .checkbox-label-content{
+        background-color: yellow;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.ts
new file mode 100644
index 0000000000..16f069a685
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.ts
@@ -0,0 +1,46 @@
+/**
+ * Created by rc2122 on 4/20/2017.
+ */
+import {Component, Input, Output, EventEmitter} from "@angular/core";
+import { DerivedFEProperty, DerivedPropertyType} from "app/models";
+import {PropertiesService} from "../../../services/properties.service";
+
+@Component({
+    selector: 'derived-property',
+    templateUrl: './derived-property.component.html',
+    styleUrls: ['./derived-property.component.less']
+})
+export class DerivedPropertyComponent {
+
+    derivedPropertyTypes = DerivedPropertyType; //http://stackoverflow.com/questions/35835984/how-to-use-a-typescript-enum-value-in-an-angular2-ngswitch-statement
+    
+    @Input() propertyObj: DerivedFEProperty;
+    @Input() propertyNameSearchText: string;
+    @Input() expanded: boolean;
+    @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
+    @Output() expandChild: EventEmitter<string> = new EventEmitter<string>();
+    @Output() selectProperty: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+
+    constructor ( private propertiesService:PropertiesService){
+    }
+
+
+    propValueChanged = () => {
+        this.valueChanged.emit(this.propertyObj);
+    };
+
+    expandChildById = (id: string) => {
+        this.expandChild.emit(id);
+    }
+
+    checkedChange = (isChecked:boolean) => {
+        this.selectProperty.emit(isChecked);
+    }
+    
+    addRows = (flatProperty: DerivedFEProperty): void => {
+        console.log("ADDING A ROW OF TYPE " + flatProperty.type);
+        console.log(flatProperty);
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
new file mode 100644
index 0000000000..17e4002ae5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
@@ -0,0 +1,66 @@
+<div class="dynamic-property-row"
+    [ngClass]="{'selected': selectedPropertyId === property.uniqueId }"
+    [class.with-top-border]="property.isChildOfListOrMap"
+    (click)="onClickPropertyRow(property, $event)">
+    <!-- LEFT CELL - for all NON-PropFEModel properties except for MAP)-->
+    <ng-container *ngIf="!isPropertyFEModel">
+        <div class="table-cell" *ngIf="canBeDeclared"> <!-- simple children of complex type -->
+            <checkbox  [label]="property.name" [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared" (checkedChange)="checkProperty.emit(property.propertiesName)"
+            ></checkbox>
+        </div>
+        <div class="table-cell" *ngIf="!canBeDeclared && !property.isChildOfListOrMap">{{property.name}}</div> <!-- simple children of complex type within map or list -->
+    </ng-container>
+    <!-- RIGHT CELL -->
+    <ng-container *ngIf="propType == derivedPropertyTypes.SIMPLE || property.isDeclared">
+        <div class="table-cell" [class.full-width]="isPropertyFEModel || property.isChildOfListOrMap">
+            <dynamic-element class="value-input"
+                pattern="validationUtils.getValidationPattern(property.type)"
+                [(value)]="property.value"
+                [type]="property.type"
+                [name]="property.name"
+                (valueChange)="propValueChanged(property);"
+                > <!--[disabled]="property.isDisabled || property.isDeclared" -->
+            </dynamic-element>
+        </div>
+    </ng-container>
+    <ng-container *ngIf="!property.isDeclared"> <!--  other cases need to fail if isDeclared, in which case we need to use full width value above instead) -->
+
+        <ng-container *ngIf="propType == derivedPropertyTypes.COMPLEX && !isPropertyFEModel">
+            <div class="table-cell complex" [class.full-width]="property.isChildOfListOrMap">
+                <span>{{property.type | contentAfterLastDot }}</span>
+            </div>
+        </ng-container>
+        <ng-container *ngIf="property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP">
+            <div class="table-cell map-entry"><input type="text" /></div>
+            <div class="table-cell" *ngIf="property.schema.property.isSimpleType">
+                <input type="text" [(ngModel)]="property.value" /></div>
+            <div class="table-cell" *ngIf="!property.schema.property.isSimpleType">
+                <span>{{property.schema.property.type | contentAfterLastDot }}</span>
+            </div>
+        </ng-container>
+
+        <!-- ICONS: add, delete, and expand -->
+        <div *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="table-cell"><span class="sprite-new add-item-icon" (click)="addRows()"></span></div>
+        <span *ngIf="property.isChildOfListOrMap" class="delete-span sprite-new delete-item-icon" (click)="deleteItem.emit(property.propertiesName)"></span>
+        <span *ngIf="propType == derivedPropertyTypes.COMPLEX || (property.isChildOfListOrMap && propChildren)" (click)="expandChildById(propPath)" class="expand-icon" [class.expanded]="propPath == expandedChildId">V</span>
+    </ng-container>
+
+</div>
+<!-- Now, recurse into children -->
+<ng-container *ngIf="propChildren && !property.isDeclared">
+    <ng-container *ngFor="let prop of propChildren | filterChildProperties: expandedChildId; trackBy:prop?.propertiesName">
+        <dynamic-property
+            [selectedPropertyId]="selectedPropertyId"
+            [canBeDeclared]="childrenCanBeDeclared"
+            [property]="prop"
+            [expandedChildId]="expandedChildId"
+            [propChildren]=""
+            (valueChanged)="propValueChanged(prop);"
+            (expandChild)="expandChildById($event)"
+            (deleteItem)="deleteListOrMapItem($event)"
+            (clickOnPropertyRow)="onClickPropertyRow($event)"
+            (checkProperty)="checkedChange($event)"
+            >
+        </dynamic-property>
+    </ng-container>
+</ng-container>
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
new file mode 100644
index 0000000000..53cde3035a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
@@ -0,0 +1,48 @@
+.dynamic-property-row {
+    display:flex;
+    flex-direction:row;
+    position:relative;
+
+    .table-cell {
+        flex: 1 0 50%;
+        padding:5px;
+        position:relative;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        
+
+        &.full-width {
+            border-right:none;
+            flex: 0 0 100%;
+        }
+
+        &:first-child:not(:only-child) {
+            border-right:#d2d2d2 solid 1px;
+            overflow:hidden;
+        }
+
+
+    }
+    span.delete-item-icon{
+        position: absolute;
+        right: 25px;
+        top: 10px;
+    }
+    span.add-item-icon {
+        float:right;
+    }
+    span.expand-icon {
+        position: absolute;
+        top:6px;
+        right: 10px;
+        transition: 200ms transform ease-in-out;
+    }
+    span.expand-icon.expanded {
+        transform: rotate(-180deg);
+    }
+}
+.filtered {
+    /deep/ .checkbox-label-content{
+        background-color: yellow;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
new file mode 100644
index 0000000000..0ca93a773f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
@@ -0,0 +1,149 @@
+import {Component, Input, Output, EventEmitter} from "@angular/core";
+import { PropertyBEModel, PropertyFEModel, DerivedFEProperty, DerivedPropertyType, SchemaPropertyGroupModel, DataTypeModel } from "app/models";
+import { PROPERTY_DATA, PROPERTY_TYPES } from 'app/utils';
+import { PropertiesUtils } from "app/ng2/pages/properties-assignment/properties.utils";
+import { DataTypeService } from "../../../services/data-type.service";
+import { UUID } from "angular2-uuid";
+
+
+@Component({
+    selector: 'dynamic-property',
+    templateUrl: './dynamic-property.component.html',
+    styleUrls: ['./dynamic-property.component.less']
+})
+export class DynamicPropertyComponent {
+
+    derivedPropertyTypes = DerivedPropertyType; //http://stackoverflow.com/questions/35835984/how-to-use-a-typescript-enum-value-in-an-angular2-ngswitch-statement
+    propType: DerivedPropertyType;
+    propPath: string;
+    isPropertyFEModel: boolean;
+    mapOfIDsAndKeys: Map<string, string> = new Map(); //used for map and list
+
+    childrenCanBeDeclared: boolean;
+    @Input() canBeDeclared: boolean;
+    @Input() property: PropertyFEModel | DerivedFEProperty;
+    @Input() propChildren: Array<DerivedFEProperty>;
+    @Input() expandedChildId: string;
+    @Input() selectedPropertyId: string;
+
+    @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
+    @Output() expandChild: EventEmitter<string> = new EventEmitter<string>();
+    @Output() checkProperty: EventEmitter<string> = new EventEmitter<string>();
+    @Output() deleteItem: EventEmitter<string> = new EventEmitter<string>();
+    @Output() clickOnPropertyRow: EventEmitter<PropertyFEModel | DerivedFEProperty> = new EventEmitter<PropertyFEModel | DerivedFEProperty>();
+
+    constructor(private propertiesUtils: PropertiesUtils, private dataTypeService: DataTypeService) {
+    }
+
+    ngOnInit() {
+        this.isPropertyFEModel = this.property instanceof PropertyFEModel;
+        if (this.property instanceof PropertyFEModel) {
+            this.propType = this.getDerivedPropertyType(this.property.type);
+            this.propPath = this.property.name;
+        } else {
+            this.propType = this.property.derivedDataType;
+            this.propPath = this.property.propertiesName;
+        }
+
+        this.childrenCanBeDeclared = this.canBeDeclared && this.propType != this.derivedPropertyTypes.MAP && this.propType != this.derivedPropertyTypes.LIST;
+
+        if (this.propType == this.derivedPropertyTypes.LIST || this.propType == this.derivedPropertyTypes.MAP) {
+            this.initializeValues();
+        }
+
+    }
+
+    initializeValues = () => {
+        let tempValue: any;
+        if (this.property.value) {
+            tempValue = JSON.parse(this.property.value);
+            if (!_.isEmpty(tempValue)) {
+                tempValue.forEach((element, key) => {
+                    let newChildID: string = this.createNewChildProperty(JSON.stringify(element));
+                    this.mapOfIDsAndKeys[newChildID] = key;
+                    console.log(this.mapOfIDsAndKeys);
+                });
+            }
+        }
+        //this.pseudoChildren = [];
+        //this.valueObjRef = [];
+        //TODO: generate necessary elements for existing values here
+        // if (this.propType == this.derivedPropertyTypes.LIST) {
+        //     this.valueObjRef = (this.property.value) ? JSON.parse(this.property.value) : [];
+        // } else if (this.propType == this.derivedPropertyTypes.MAP) {
+        //     this.valueObjRef = (this.property.value)? JSON.parse(this.property.value) : {};
+        // }
+        console.log(this.property.value);
+    }
+
+    onClickPropertyRow = (property, event) => {
+        // Because DynamicPropertyComponent is recrusive second time the event is fire event.stopPropagation = undefined
+        event && event.stopPropagation && event.stopPropagation();
+        this.clickOnPropertyRow.emit(property);
+    }
+
+    deleteListOrMapItem  = (itemName: string) => {
+        this.propChildren = this.propChildren.filter(prop => prop.propertiesName.indexOf(itemName) != 0); //remove item and children;
+    }
+
+    propValueChanged = (property) => {
+        console.log("property value change!! Prop type: " + property.type + " New value: " + property.value);
+        this.valueChanged.emit(property);
+    };
+
+    expandChildById = (id: string) => {
+        this.expandedChildId = id;
+         this.expandChild.emit(id);
+    }
+
+    checkedChange = (propName: string) => {
+        this.checkProperty.emit(propName);
+    }
+
+
+
+    addRows = (): void => { //from within the template, when creating empty item
+        let childPropId = this.createNewChildProperty();
+        this.expandChildById(this.propPath + "#" + childPropId);
+    }
+
+    createNewChildProperty = (value?:string):string => {
+        let propUUID:string = UUID.UUID();
+        let newProp: DerivedFEProperty;
+        if (this.propType == this.derivedPropertyTypes.LIST) { //for list - create new prop of schema type
+            newProp = new DerivedFEProperty(propUUID, this.propPath, this.property.schema.property.type, value, true);
+        } else { //for map - create new prop of type map, with schema, but with flag that its a child
+            newProp = new DerivedFEProperty(propUUID, this.propPath, this.property.type, value, true, this.property.schema);
+        }
+
+
+        this.propChildren = this.propChildren || [];
+        this.propChildren.push(newProp);
+
+        //if it's a complex type, add children properties
+        if (!this.property.schema.property.isSimpleType) {
+            let schemaDataType: DataTypeModel = this.dataTypeService.getDataTypeByTypeName(this.property.schema.property.type);
+            this.dataTypeService.getDerivedDataTypeProperties(schemaDataType, this.propChildren, newProp.propertiesName);
+            this.propertiesUtils.assignValuesRecursively(JSON.parse(value), this.propChildren, newProp.propertiesName);
+            console.log(JSON.stringify(this.propChildren));
+        }
+
+        return propUUID;
+    }    
+
+
+
+    //TODO: remove this and move to somewhere central!! (or make all properties be the same type...)
+    getDerivedPropertyType = (type) => {
+        if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(type) > -1) {
+            return DerivedPropertyType.SIMPLE;
+        } else if (type == PROPERTY_TYPES.LIST) {
+            return DerivedPropertyType.LIST;
+        } else if (type == PROPERTY_TYPES.MAP) {
+            return DerivedPropertyType.MAP;
+        } else {
+            return DerivedPropertyType.COMPLEX;
+        }
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.html
new file mode 100644
index 0000000000..a251d33649
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.html
@@ -0,0 +1,33 @@
+<div class="add-data-row">
+    <div class="sprite-new add-item-icon" (click)="addListItem()"></div>
+</div>
+<div *ngIf="property.schema.property.isSimpleType && property.valueObjectRef && property.valueObjectRef.length">
+    <!--the ngFor runs on dummy array in the list array length and not on list array in order to prevent from page do the ngFor again when user changes an item-->
+    <div class="simple-list-item" *ngFor="let item of getNumber(property.valueObjectRef); let i = index">
+        <input class="value-input" [(ngModel)]="property.valueObjectRef[i]"
+               type="property.schema.property.derivedFromSimpleTypeName || property.schema.property.type"
+               (change)="propValueChanged()"/>
+        <span class="delete-span sprite-new delete-item-icon" (click)="deleteListItem(i)"></span>
+    </div>
+</div>
+<div class="test" *ngIf="property.schema.property.isDataType && property.childrenProperties && property.childrenProperties.length">
+    <template ngFor let-item [ngForOf]="property.childrenProperties" let-i="index">
+            <div class="table-inner-row" (click)="onChildPropertySelected(item)" [ngClass]="{'selected': selectedPropertyId === item.treeNodeId}">
+                <div class="table-cell">{{item.name}}</div>
+                <div class="table-cell">
+                    <span class="delete-span sprite-new delete-item-icon" (click)="deleteListItem(i)"></span>
+                    <span (click)="property.updateExpandedChildPropertyId(item.treeNodeId)">V</span>
+                </div>
+            </div>
+            <div class="table-inner-row" *ngIf="property.expandedChildPropertyId == item.treeNodeId">
+                <div class="inner-table-container">
+                <properties-value-inner-table  [property]="item"
+                                      (selectChildProperty)="onChildPropertySelected($event)"
+                                      [selectedPropertyId]="selectedPropertyId"
+                                       [propertyNameSearchText]="propertyNameSearchText"
+                                      (valueChanged)="propValueChanged()"></properties-value-inner-table>
+                </div>
+            </div>
+    </template>
+
+</div>
diff --git a/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.less
new file mode 100644
index 0000000000..7c4d90a38d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.less
@@ -0,0 +1,3 @@
+.simple-list-item{
+    position: relative;
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.ts
new file mode 100644
index 0000000000..96f8c680a2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.ts
@@ -0,0 +1,85 @@
+/**
+ * Created by rc2122 on 4/23/2017.
+ */
+import {Component, Input, Output, EventEmitter} from "@angular/core";
+import { PropertyFEModel} from "app/models";
+import {PropertiesService} from "app/ng2/services/properties.service";
+import { ContentAfterLastDotPipe } from "app/ng2/pipes/contentAfterLastDot.pipe";
+import {UUID} from "angular2-uuid";
+import {ComponentType} from "app/utils";
+
+@Component({
+    selector: 'list-property',
+    templateUrl: './list-property.component.html',
+    styleUrls: ['../properties-value-inner-table/properties-value-inner-table.component.less', './list-property.component.less']
+})
+export class ListPropertyComponent {
+
+    @Input() property: PropertyFEModel;
+    @Input() selectedPropertyId: string;
+    @Input() propertyNameSearchText:string;
+    
+    @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
+    @Output() selectChildProperty: EventEmitter<any> = new EventEmitter<PropertyFEModel>();
+
+    constructor ( private propertiesService:PropertiesService, private contentAfterLastDotPipe:ContentAfterLastDotPipe ){
+    }
+
+    propValueChanged = () => {
+        this.valueChanged.emit(this.property);
+    };
+
+    onChildPropertySelected = (property) => {
+        this.selectChildProperty.emit(property);
+    };
+
+    getNumber = (valueObjectRef: any): Array<any> => {
+        let num: number = (valueObjectRef) ? valueObjectRef.length : 0;
+        return new Array(num);
+    }
+
+    createNewChildProperty = ():void => {
+        let newProperty: PropertyFEModel = new PropertyFEModel(this.contentAfterLastDotPipe.transform(this.property.schema.property.type),
+            this.property.schema.property.type,
+            UUID.UUID(),
+            this.property,
+            this.property.valueObjectRef[this.property.childrenProperties.length]
+        );
+        this.propertiesService.createPropertiesTreeForProp(newProperty);
+        this.property.childrenProperties.push(newProperty);
+    }
+
+    addListItem = ():void => {
+        this.property.valueObjectRef = this.property.valueObjectRef || [];
+        this.property.childrenProperties = this.property.childrenProperties || [];
+        if (this.property.schema.property.isSimpleType){
+            if( this.property.valueObjectRef.indexOf("") == -1 ) {//prevent insert multiple empty simple type items to list
+                this.property.valueObjectRef.push("");
+            }
+        }else{
+            this.property.valueObjectRef[this.property.childrenProperties.length] = {};
+            this.property.childrenProperties = this.property.childrenProperties || [];
+            this.createNewChildProperty();
+            this.valueChanged.emit(this.property);
+        }
+    }
+
+    deleteListItem = (indexInList:number):void => {
+        this.property.valueObjectRef.splice(indexInList, 1);
+        if(this.property.childrenProperties){
+            this.property.childrenProperties.splice(indexInList, 1);
+        }
+        if (!this.property.valueObjectRef.length) {//only when user removes all items from list - put the default
+            if ( this.property.defaultValue ) {
+                angular.copy(JSON.parse(this.property.defaultValue), this.property.valueObjectRef);
+                if (this.property.schema.property.isDataType){
+                    _.forEach(this.property.valueObjectRef, () => {
+                        this.createNewChildProperty();
+                    });
+                }
+            }
+        }
+        this.valueChanged.emit(this.property);
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.html
new file mode 100644
index 0000000000..e1975175a8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.html
@@ -0,0 +1,38 @@
+<div class="add-data-row">
+    <div class="sprite-new add-item-icon" (click)="addMapItemFields()"></div>
+</div>
+
+<!--the ngFor runs on dummy array in mapKey array length and not on maKeys array in order to prevent from page do the ngFor again when user changes a key-->
+<template  ngFor let-num [ngForOf]="getNumber(mapKeys.length)" let-i="index">
+    <div class="table-inner-row"
+         [ngClass]="{'selected': property.schema.property.isDataType && selectedPropertyId === property.childrenProperties[i].treeNodeId}"
+         (click)="property.schema.property.isDataType && onChildPropertySelected(property.childrenProperties[i])">
+        <div class="table-cell">
+            <input class="value-input" (keyup)="changeKeyOfMap(mapKeys[i], i);$event.stopPropagation();"
+                    [(ngModel)]="mapKeys[i]"
+                    name="mapKey{{property.treeNodeId}}{{i}}"
+                    (change)="propValueChanged()"/>
+        </div>
+        <div class="table-cell">
+            <input class="value-input" *ngIf="property.schema.property.isSimpleType"
+                    [(ngModel)]="property.valueObjectRef[mapKeys[i]]"
+                   type="property.schema.property.derivedFromSimpleTypeName || property.schema.property.type"
+                    (change)="propValueChanged()"/>
+            <div *ngIf="property.schema.property.isDataType">
+                <div>{{ property.schema.property.type | contentAfterLastDot }}</div>
+                <span (click)="property.updateExpandedChildPropertyId(property.childrenProperties[i].treeNodeId)">V</span>
+            </div>
+            <span class="delete-span sprite-new delete-item-icon" (click)="deleteMapItem(i)"></span>
+        </div>
+    </div>
+    <div class="table-inner-row" *ngIf="property.schema.property.isDataType && property.expandedChildPropertyId == property.childrenProperties[i].treeNodeId">
+        <div class="inner-table-container">
+            <properties-value-inner-table [property]="property.childrenProperties[i]"
+                                          [selectedPropertyId]="selectedPropertyId"
+                                          [propertyNameSearchText]="propertyNameSearchText"
+                                            (selectChildProperty)="onChildPropertySelected($event)"
+                                            (valueChanged)="propValueChanged()"></properties-value-inner-table>
+        </div>
+    </div>
+</template>
+
diff --git a/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.ts
new file mode 100644
index 0000000000..d62d0b94e3
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.ts
@@ -0,0 +1,121 @@
+/**
+ * Created by rc2122 on 4/24/2017.
+ */
+/**
+ * Created by rc2122 on 4/23/2017.
+ */
+import {Component, Input, Output, EventEmitter} from "@angular/core";
+import { PropertyFEModel} from "app/models";
+import { PropertiesService } from "../../../services/properties.service";
+import {ComponentType} from "app/utils";
+import {UUID} from "angular2-uuid";
+
+@Component({
+    selector: 'map-property',
+    templateUrl: './map-property.component.html',
+    styleUrls: ['../properties-value-inner-table/properties-value-inner-table.component.less']
+})
+export class MapPropertyComponent {
+
+    @Input() property: PropertyFEModel;
+    @Input() selectedPropertyId: string;
+    @Input() propertyNameSearchText:string;
+    
+    @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
+    @Output() selectChildProperty: EventEmitter<any> = new EventEmitter<PropertyFEModel>();
+
+    constructor ( private propertiesService:PropertiesService){
+    }
+
+    mapKeys:Array<string>;
+
+    ngOnInit() {
+        this.mapKeys = Object.keys(this.property.valueObjectRef);
+    }
+
+    propValueChanged = () => {
+        this.valueChanged.emit(this.property);
+    };
+
+    onChildPropertySelected = (property) => {
+        this.selectChildProperty.emit(property);
+    };
+
+    getNumber = (num:number):Array<any> => {
+        return new Array(num);
+    }
+
+    createNewChildProperty = (mapKey:string):void => {
+
+        let newProperty: PropertyFEModel = new PropertyFEModel(mapKey,
+            this.property.schema.property.type,
+            UUID.UUID(), this.property,
+            this.property.valueObjectRef[mapKey]);
+        this.propertiesService.createPropertiesTreeForProp(newProperty);
+        this.property.childrenProperties = this.property.childrenProperties || [];
+        this.property.childrenProperties.push(newProperty);
+    }
+
+    //get: new key and the index of this item in the map
+    //This method checks if the new key isn't exist already in the map and update the object and the children array with the new key
+    changeKeyOfMap = (newKey:string, index:number):void => {
+        //let fieldName:string = "mapKey" + this.property.treeNodeId + index;
+        let oldKey:string = Object.keys(this.property.valueObjectRef)[index];
+        let existsKeyIndex:number = Object.keys(this.property.valueObjectRef).indexOf(newKey);
+        if (existsKeyIndex > -1 && existsKeyIndex != index) {
+            //error for exists key validation
+        } else {
+            //remove error for exists key validation and if the form is valid - update the map object
+            let newObj = {};
+            angular.forEach(this.property.valueObjectRef,function(value:any,key:string){
+                if(key == oldKey){
+                    newObj[newKey] = value;
+                }else{
+                    newObj[key] = value;
+                }
+            });
+            this.property.valueObjectRef = newObj;
+            this.property.parent.valueObjectRef[this.property.name] = this.property.valueObjectRef;//in order to prevent break ref
+            if(this.property.childrenProperties){
+                this.property.childrenProperties[index].name = newKey;//update this property childrenProperties with the new key
+            }
+        }
+    }
+
+    //get: index of the item in the map
+    //This method removes item from map.
+    deleteMapItem = (index:number):void=> {
+        delete this.property.valueObjectRef[this.mapKeys[index]];
+        this.mapKeys.splice(index, 1);
+        if(this.property.childrenProperties){
+            this.property.childrenProperties.splice(index, 1);
+        }
+        if (!this.mapKeys.length) {//only when user removes all pairs of key-value fields - put the default
+            if (this.property.defaultValue) {
+                angular.copy(JSON.parse(this.property.defaultValue), this.property.valueObjectRef);
+                this.mapKeys = Object.keys(this.property.valueObjectRef);
+                if (this.property.schema.property.isDataType){
+                    angular.forEach(this.property.valueObjectRef, (value, key) => {
+                        this.createNewChildProperty(key);
+                    }, this);
+                }
+            }
+        }
+        this.valueChanged.emit(this.property);
+    }
+
+    //This method inserts new empty item to map
+    addMapItemFields = ():void => {
+        this.property.valueObjectRef = this.property.valueObjectRef || {};
+        if (this.property.schema.property.isSimpleType){
+            this.property.valueObjectRef[''] = null;
+        }else{
+            if(!this.property.valueObjectRef['']){
+                this.property.valueObjectRef[''] = {};
+                this.createNewChildProperty('');
+            }
+        }
+        this.mapKeys = Object.keys(this.property.valueObjectRef);
+    }
+}
+
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
new file mode 100644
index 0000000000..3ab47074e7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
@@ -0,0 +1,135 @@
+
+
+<div class="properties-table">
+    <div class="table-header">
+        <div class="table-cell col1">Property Name</div>
+        <div class="table-cell col2">Type</div>
+        <div class="table-cell col3">ES</div>
+        <div class="table-cell valueCol">Value</div>
+    </div>
+    <div class="table-body">
+        <div class="no-data" *ngIf="!feInstancesNames">No data to display</div>
+
+        <div *ngFor="let instanceName of feInstancesNames; trackBy:instanceName">
+            <div class="table-rows-header">{{instanceName | contentAfterLastDot}}</div>
+
+            <div class="table-row" *ngFor="let property of fePropertiesMap[instanceName]; trackBy:property?.name" (click)="onClickPropertyRow(property, instanceName, $event)" [ngClass]="{'selected': selectedPropertyId === property.uniqueId}">
+                <div class="table-cell col1">
+                <checkbox [label]="property.name"
+                          [(checked)]="property.isSelected"
+                          [disabled]="property.isDisabled || property.isDeclared"
+                          (checkedChange)="propertyChecked(property)"
+                          tooltip="{{property.name}}"></checkbox>
+                    <span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}"></span>
+                </div>
+                <div class="table-cell col2">{{property.type | contentAfterLastDot}}</div>
+                <div class="table-cell col3">{{property.schema && property.schema.property && property.schema.property.type ? (property.schema.property.type
+                    | contentAfterLastDot) : ''}}</div>
+                <div class="table-cell valueCol">
+                    <!-- [ngClass]="{'filtered':property.name === propertyNameSearchText}" (selectProperty)="propertySelected(property, $event, flatProperty.propertiesName)" [propType]="property.type" [propSchema]="property.schema" [propKey]="" [propValue]="property.value"-->
+                    <dynamic-property
+                        [selectedPropertyId]="selectedPropertyId"
+                        [canBeDeclared]="true"
+                        [property]="property"
+                        [expandedChildId]="property.expandedChildPropertyId"
+                        [propChildren]="property.flattenedChildren | filterChildProperties : property.expandedChildPropertyId"
+                        (valueChanged)="propValueChanged(property);"
+                        (expandChild)="property.updateExpandedChildPropertyId($event)"
+                        (clickOnPropertyRow)="onClickPropertyInnerRow($event, instanceName)"
+                        (checkProperty)="propertyChecked(property, $event)"
+                        >
+                    </dynamic-property>
+
+                </div>
+            </div>
+<!--
+                <div *ngIf="!property.isSimpleType && !property.isDeclared" class="table-cell valueCol child-property-container">
+
+                    <div class="child-property-row" *ngFor="let flatProperty of property.flattenedChildren | filterChildProperties : property.expandedChildPropertyId"
+                        [ngClass]="{'selected': selectedPropertyId === flatProperty.uniqueId}" (click)="clickOnPropertyRow(flatProperty, instanceName, $event)" [@fadeIn]="''">
+                        <derived-property [propertyObj]="flatProperty"  [propertyNameSearchText]="propertyNameSearchText" [expanded]="flatProperty.propertiesName == property.expandedChildPropertyId"
+                                    (selectProperty)="propertySelected(property, $event, flatProperty.propertiesName)" (valueChanged)="propValueChanged(property)" (expandChild)="property.updateExpandedChildPropertyId($event)"></derived-property>
+                    </div>
+
+                </div>
+                <!--
+
+
+                <property [propertyObj]="flatProperty"
+                        [expanded]="flatProperty.parentName == property.expandedChildPropertyId"
+                        (valueChanged)="propValueChanged($event)"
+                        (selectChildProperty)="onChildPropertySelected($event)"></property>
+                <list-property *ngIf="property.type == 'list'"
+                                    [property]="property"
+                            [selectedPropertyId]="selectedPropertyId"
+                                    (valueChanged)="propValueChanged($event)"
+                            (selectChildProperty)="onChildPropertySelected($event)"></list-property>
+                <map-property *ngIf="property.type == 'map'"
+                            [property]="property"
+                            [selectedPropertyId]="selectedPropertyId"
+                            (valueChanged)="propValueChanged($event)"
+                            (selectChildProperty)="onChildPropertySelected($event)"></map-property>
+                <properties-value-inner-table *ngIf="property.isDataType"
+                                            [property]="property"
+                                            [selectedPropertyId]="selectedPropertyId"
+                                            (selectChildProperty)="onChildPropertySelected($event)"
+                                            (valueChanged)="propValueChanged($event)"></properties-value-inner-table>
+                -->
+
+
+
+        </div>
+
+    </div>
+</div>
+<!--
+<div class="properties-table" style="display:block">
+    <div class="table-header">
+        <div class="table-cell col1">Property Name</div>
+        <div class="table-cell col2">Type</div>
+        <div class="table-cell col3">ES</div>
+        <div class="table-cell valueCol">Value</div>
+    </div>
+    <div class="table-body">
+        <div class="no-data" *ngIf="!properties || !properties.length">No data to display</div>
+        <div class="table-row" *ngFor="let property of properties" (click)="clickOnPropertyRow(property)">
+            <div class="table-cell col1"><checkbox [label]="property.name" [(checked)]="property.isSelected" (checkedChange)="propSelected(property)" [disabled]="property.isDisabled"></checkbox></div>
+            <div class="table-cell col2">{{property.type | contentAfterLastDot}}</div>
+            <div class="table-cell col3">{{property.schema && property.schema.property && property.schema.property.type ? (property.schema.property.type | contentAfterLastDot) : ''}}</div>
+            <div class="table-cell valueCol" [class.inner-table-container]="property.childrenProperties || !property.isSimpleType">
+                <!--<input class="value-input" *ngIf="property.isSimpleType"
+                       type="property.derivedFromSimpleTypeName || property.type"
+                       [(ngModel)]="property.value"
+                        (change)="putDefaultValueInEmptyProperty(property);propValueChanged(property);"
+                       pattern="validationUtils.getValidationPattern(property.type)"/>
+                <dynamic-element
+                    class="value-input"
+                    *ngIf="property.isSimpleType"
+                    [(value)]="property.value"
+                    (valueChange)="putDefaultValueInEmptyProperty(property);propValueChanged(property);"
+                    [type]="property.derivedFromSimpleTypeName || property.type"
+                    [name]="property.name">
+                </dynamic-element>
+                <list-property *ngIf="property.type == 'list'"
+                                      [property]="property"
+                               [selectedPropertyId]="selectedPropertyId"
+                                      (valueChanged)="propValueChanged($event)"
+                               (selectChildProperty)="onChildPropertySelected($event)"></list-property>
+                <map-property *ngIf="property.type == 'map'"
+                               [property]="property"
+                              [selectedPropertyId]="selectedPropertyId"
+                               (valueChanged)="propValueChanged($event)"
+                               (selectChildProperty)="onChildPropertySelected($event)"></map-property>
+                <properties-value-inner-table *ngIf="property.isDataType"
+                                              [property]="property"
+                                              [selectedPropertyId]="selectedPropertyId"
+                                              (selectChildProperty)="onChildPropertySelected($event)"
+                                              (valueChanged)="propValueChanged($event)"></properties-value-inner-table>
+            </div>
+
+        </div>
+    </div>
+</div> -->
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less
new file mode 100644
index 0000000000..de080dfdc9
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less
@@ -0,0 +1,188 @@
+
+@import './../../../../assets/styles/variables.less';
+
+:host /deep/ input { width:100%;}
+
+.properties-table {
+    display:flex;
+    flex-direction:column;
+    flex: 1;
+    height:100%;
+    text-align:left;
+
+
+    .child-property-container {
+        display:flex;
+        flex-direction:column;
+
+        &.table-cell {
+            padding:0;
+        }
+
+        .child-property-row {
+            border-bottom: #d2d2d2 solid 1px;
+            &:last-child {
+                border-bottom:none;
+            }
+        }
+    }
+
+
+    derived-property, dynamic-property {
+        width:100%;
+    }
+
+    /deep/ dynamic-property dynamic-property .dynamic-property-row {
+         border-top:solid #d2d2d2 1px;
+    }
+
+    /deep/ dynamic-property dynamic-property:first-of-type .dynamic-property-row:not(.with-top-border) {
+        border-top: none;
+    }
+
+    properties-value-inner-table {
+        width: 100%;
+    }
+
+    .table-header {
+        font-weight:bold;
+        border-top: #d2d2d2 solid 1px;
+        background-color: #eaeaea;
+
+        .valueCol {
+            justify-content: flex-start;
+            padding: 5px;
+        }
+    }
+    .table-header, .table-row {
+        display: flex;
+        flex-direction:row;
+        flex: 0 0 auto;
+    }
+
+    .table-body {
+        display:flex;
+        flex-direction: column;
+        overflow-y:auto;
+        flex: 1;
+
+        .no-data {
+            border: #d2d2d2 solid 1px;
+            border-top:none;
+            text-align: center;
+            height: 100%;
+            padding: 20px;
+        }
+        /deep/.selected{
+            background-color: #e6f6fb;
+            color:  #009fdb;
+        }
+    }
+
+    .table-rows-header {
+        font-size:16px;
+        flex:1;
+        border: #d2d2d2 solid 1px;
+        border-top:none;
+        padding: 5px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        background-color: @tlv_color_v;
+    }
+
+    .table-row {
+        &:hover {
+             background-color:#f8f8f8; cursor:pointer;
+        }
+
+        &:last-child {
+            flex: 1 0 auto;
+        }
+        .selected-row {
+            background-color:#e6f6fb;
+        }
+    }
+     .table-cell {
+        font-size:13px;
+        flex:1;
+        border: #d2d2d2 solid 1px;
+        border-right:none;
+        border-top:none;
+        padding: 5px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+
+        &:last-child {
+            border-right:#d2d2d2 solid 1px;
+        }
+        &.col1 {
+            flex: 0 0 300px;
+            max-width:300px;
+
+            .property-description-icon {
+                float: right;
+                margin-top: 4px;
+            }
+        }
+        &.col2 {
+            flex: 0 0 150px;
+            max-width:150px;
+        }
+
+        &.col3 {
+            flex:0 0 120px;
+            max-width:120px;
+        }
+
+        &.valueCol {
+            flex: 1 0 auto;
+            min-width: 350px;
+            display: flex;
+            justify-content: flex-end;
+            padding: 0px;
+
+            .value-input {
+                flex: 1;
+                max-height: 24px;
+                border: none;
+                background-color: inherit;
+
+                &:focus, &:active {
+                    border:none;
+                    outline:none;
+                }
+            }
+
+            .delete-btn {
+                flex: 0 0 auto;
+            }
+
+            .delete-button-container {
+                max-height: 24px;
+            }
+
+            &.inner-table-container {
+                padding: 0px;
+
+                .delete-button-container {
+                    padding: 3px 5px 0 0 ;
+                }
+            }
+        }
+
+         &.input-value-col {
+             padding: 5px;
+         }
+
+
+    }
+
+    .filtered {
+        /deep/ .checkbox-label-content{
+            background-color: yellow;
+        }
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts
new file mode 100644
index 0000000000..d5a9b40425
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts
@@ -0,0 +1,93 @@
+import { Component, Input, Output, EventEmitter, SimpleChanges, ViewChild, ElementRef } from "@angular/core";
+import { trigger, state, style, transition, animate} from '@angular/core';
+import {PropertyFEModel, DerivedFEProperty, DerivedPropertyType, InstanceFePropertiesMap} from "app/models";
+import {PropertiesService} from "../../services/properties.service";
+// import { GroupByPipe } from 'app/ng2/pipes/groupBy.pipe';
+//import {PropertiesValueInnerTableComponent} from "./properties-table/properties-value-inner-table/properties-value-inner-table";
+import { DynamicElementComponent } from 'app/ng2/components/dynamic-element/dynamic-element.component';
+import { KeysPipe } from 'app/ng2/pipes/keys.pipe';
+
+@Component({
+    selector: 'properties-table',
+    templateUrl: './properties-table.component.html',
+    styleUrls: ['./properties-table.component.less'],
+    animations: [trigger('fadeIn', [transition(':enter', [style({ opacity: '0' }), animate('.3s ease-out', style({ opacity: '1' }))]) ])]
+})
+export class PropertiesTableComponent {
+
+    @Input() fePropertiesMap: InstanceFePropertiesMap;
+    @Input() selectedPropertyId: string;
+    @Input() displayDeleteButton: boolean;
+    @Input() propertyNameSearchText:string;
+
+    @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
+    @Output() selectPropertyRow: EventEmitter<PropertyRowSelectedEvent> = new EventEmitter<PropertyRowSelectedEvent>();
+    @Output() updateCheckedPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>();
+    //@Output() selectInstanceRow: EventEmitter<string> = new EventEmitter<string>();
+
+    feInstancesNames: Array<string>;
+
+    constructor ( private propertiesService:PropertiesService ){
+    }
+
+    /**
+     * Update feInstancesNames when fePropertiesMap: InstanceFePropertiesMap change (after getting response from server)
+     */
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes['fePropertiesMap']) {
+            if (changes['fePropertiesMap'].currentValue) {
+                let keysPipe = new KeysPipe();
+                let fiteredArr = keysPipe.transform(changes['fePropertiesMap'].currentValue,[]);
+                this.feInstancesNames = fiteredArr;
+            }
+        }
+    }
+
+    propValueChanged = (property) => {
+        !property.isDeclared && this.valueChanged.emit(property);
+    };
+
+    // Click on main row (row of propertyFEModel)
+    onClickPropertyRow = (property:PropertyFEModel, instanceName:string, event?) => {
+        //event && event.stopPropagation();
+        let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName);
+        this.selectPropertyRow.emit(propertyRowSelectedEvent);
+    };
+
+    // Click on inner row (row of DerivedFEProperty)
+    onClickPropertyInnerRow = (property:DerivedFEProperty, instanceName:string) => {
+        let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName);
+        this.selectPropertyRow.emit(propertyRowSelectedEvent);
+    }
+
+    propertyChecked = (prop: PropertyFEModel, childPropName?: string) => {
+        let isChecked: boolean = (!childPropName)? prop.isSelected : prop.flattenedChildren.find(prop => prop.propertiesName == childPropName).isSelected;
+
+        console.log(isChecked, childPropName, prop);
+        if (!isChecked) {
+            this.propertiesService.undoDisableRelatedProperties(prop, childPropName);
+        } else {
+            this.propertiesService.disableRelatedProperties(prop, childPropName);
+        }
+        this.updateCheckedPropertyCount.emit(isChecked);
+    }
+
+    putDefaultValueInEmptyProperty = (property:PropertyFEModel):void => {
+        property.value = property.value || property.defaultValue;
+    }
+
+    // clickOnInstanceRow = (instanceName:string) =>{
+    //     this.selectInstanceRow.emit(instanceName);
+    // };
+
+}
+
+export class PropertyRowSelectedEvent {
+    propertyModel:PropertyFEModel | DerivedFEProperty;
+    instanceName:string;
+    constructor ( propertyModel:PropertyFEModel | DerivedFEProperty, instanceName:string ){
+        this.propertyModel = propertyModel;
+        this.instanceName = instanceName;
+    }
+}
+
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.html b/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.html
new file mode 100644
index 0000000000..61555cac50
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.html
@@ -0,0 +1,41 @@
+
+<template  ngFor let-childProp [ngForOf]="property.childrenProperties" let-i="index">
+    <div class="table-inner-row" (click)="onChildPropertySelected(childProp)" [ngClass]="{'selected': selectedPropertyId === childProp.treeNodeId}">
+        <div class="table-cell" [ngClass]="{'filtered':childProp.name === propertyNameSearchText}">
+            <checkbox [label]="childProp.name" [(checked)]="childProp.isSelected" [disabled]="property.isDisabled"></checkbox>
+        </div>
+        <div class="table-cell  prop-value">
+            <input class="value-input" *ngIf="childProp.isSimpleType"
+                   [(ngModel)]="property.valueObjectRef[childProp.name]"
+                   (change)="putDefaultValueInEmptyChildProperty(childProp);propValueChanged();"
+                   type="childProp.derivedFromSimpleTypeName || childProp.type"/>
+            <span class="datatype-text" *ngIf="childProp.isDataType">{{ childProp.type | contentAfterLastDot }}</span>
+            <span *ngIf="!childProp.isSimpleType" (click)="property.updateExpandedChildPropertyId(childProp.treeNodeId)">V</span>
+        </div>
+    </div>
+    <div class="table-inner-row" *ngIf="childProp.type === 'list' && property.expandedChildPropertyId === childProp.treeNodeId">
+            <list-property [property]="childProp"
+                           [selectedPropertyId]="selectedPropertyId"
+                           [propertyNameSearchText]="propertyNameSearchText"
+                            (valueChanged)="propValueChanged()"
+                            (selectChildProperty)="onChildPropertySelected($event)"></list-property>
+
+    </div>
+    <div class="table-inner-row" *ngIf="childProp.type === 'map' && property.expandedChildPropertyId == childProp.treeNodeId">
+            <map-property [property]="childProp"
+                            [selectedPropertyId]="selectedPropertyId"
+                          [propertyNameSearchText]="propertyNameSearchText"
+                            (valueChanged)="propValueChanged()"
+                            (selectChildProperty)="onChildPropertySelected($event)"></map-property>
+
+    </div>
+    <div class="table-inner-row" *ngIf="childProp.isDataType && property.expandedChildPropertyId == childProp.treeNodeId">
+            <properties-value-inner-table [property]="childProp"
+                                          [selectedPropertyId]="selectedPropertyId"
+                                          [propertyNameSearchText]="propertyNameSearchText"
+                                            (selectChildProperty)="onChildPropertySelected($event)"
+                                            (valueChanged)="propValueChanged()"></properties-value-inner-table>
+    </div>
+</template>
+
+
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.less b/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.less
new file mode 100644
index 0000000000..1b7f6d4cd1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.less
@@ -0,0 +1,71 @@
+table { width:100%;}
+tr {border-bottom: #d2d2d2 solid 1px;}
+tr:last-child { border-bottom:none;}
+td { border:none; padding:5px;}
+td:first-child { border-right:#d2d2d2 solid 1px;}
+
+.prop-value{
+    span {
+        position: absolute;
+        top: 5px;
+        right: 2px;
+
+        &.delete-span {
+            right:20px;
+        }
+
+        &.datatype-text {
+            position:static;
+        }
+
+    }
+}
+
+.add-data-row {
+    padding:5px;
+    text-align:right;
+    border-bottom: #d2d2d2 solid 1px;
+
+    &:last-child {
+        border-bottom:none;
+    }
+}
+.table-inner-row {
+    display:flex;
+    flex-direction:row;
+    border-bottom: #d2d2d2 solid 1px;
+    flex: 0 0 100%;
+    position:relative;
+
+    &:last-child {
+        border-bottom:none;
+    }
+
+    .table-cell {
+        flex: 0 0 50%;
+        padding:5px;
+        position:relative;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &:first-child {
+            border-right:#d2d2d2 solid 1px;
+            overflow:hidden;
+        }
+
+
+    }
+
+    .table-inner-container, .inner-table-container {
+        flex: 0 0 100%;
+    }
+}
+/deep/ map-property, /deep/ properties-value-inner-table, /deep/ list-property{
+    width:100%;
+}
+
+.filtered {
+    /deep/ .checkbox-label-content{
+        background-color: yellow;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.ts b/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.ts
new file mode 100644
index 0000000000..7d0b219ffe
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.ts
@@ -0,0 +1,37 @@
+/**
+ * Created by rc2122 on 4/20/2017.
+ */
+import {Component, Input, Output, EventEmitter} from "@angular/core";
+import {PropertyFEModel} from "app/models";
+import {PropertiesService} from "../../../services/properties.service";
+
+@Component({
+    selector: 'properties-value-inner-table',
+    templateUrl: './properties-value-inner-table.component.html',
+    styleUrls: ['./properties-value-inner-table.component.less']
+})
+export class PropertiesValueInnerTableComponent {
+
+    @Input() property: PropertyFEModel;
+    @Input() selectedPropertyId: string;
+    @Input() propertyNameSearchText:string;
+    
+    @Output() selectChildProperty: EventEmitter<any> = new EventEmitter<PropertyFEModel>();
+    @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
+
+    constructor ( private propertiesService:PropertiesService){
+    }
+
+
+    onChildPropertySelected = (property) => {
+        this.selectChildProperty.emit(property);
+    };
+
+    propValueChanged = () => {
+        this.valueChanged.emit(this.property);
+    };
+
+    putDefaultValueInEmptyChildProperty = (childProp:PropertyFEModel):void => {
+        this.property.valueObjectRef[childProp.name] = this.property.valueObjectRef[childProp.name] || childProp.defaultValue;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html b/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html
new file mode 100644
index 0000000000..1fbf45e39f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html
@@ -0,0 +1,12 @@
+<div class="tooltip {{ placement }}"
+     [style.top]="top + 'px'"
+     [style.left]="left + 'px'"
+     [class.in]="isIn"
+     [class.fade]="isFade"
+     role="tooltip">
+    <div class="tooltip-arrow"></div>
+    <div class="tooltip-inner">
+        <ng-content></ng-content>
+        {{ content }}
+    </div>
+</div>
diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less b/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less
new file mode 100644
index 0000000000..1ff496f840
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less
@@ -0,0 +1,11 @@
+.tooltip-inner {
+    word-wrap: break-word;
+    max-width: 300px;
+}
+
+.tooltip.bottom .tooltip-arrow {
+    border-bottom-color: #000 !important;
+}
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts b/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts
new file mode 100644
index 0000000000..6e3e8065bb
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts
@@ -0,0 +1,195 @@
+import {Component, AfterViewInit, Input, ElementRef, ChangeDetectorRef} from "@angular/core";
+
+@Component
+({
+    selector: "tooltip-content",
+    templateUrl: "./tooltip-content.component.html",
+    styleUrls: ["./tooltip-content.component.less"]
+})
+
+export class TooltipContentComponent implements AfterViewInit {
+
+    // -------------------------------------------------------------------------
+    // Inputs / Outputs
+    // -------------------------------------------------------------------------
+
+    @Input() hostElement: HTMLElement;
+    @Input() content: string;
+    @Input() placement: "top"|"bottom"|"left"|"right" = "bottom";
+    @Input() animation: boolean = true;
+
+    // -------------------------------------------------------------------------
+    // Properties
+    // -------------------------------------------------------------------------
+
+    top: number = -100000;
+    left: number = -100000;
+    isIn: boolean = false;
+    isFade: boolean = false;
+
+    // -------------------------------------------------------------------------
+    // Constructor
+    // -------------------------------------------------------------------------
+
+    constructor(private element: ElementRef,
+                private cdr: ChangeDetectorRef) {
+    }
+
+    // -------------------------------------------------------------------------
+    // Lifecycle callbacks
+    // -------------------------------------------------------------------------
+
+    ngAfterViewInit(): void {
+        this.show();
+        this.cdr.detectChanges();
+    }
+
+    // -------------------------------------------------------------------------
+    // Public Methods
+    // -------------------------------------------------------------------------
+
+    show(): void {
+        if(!this.hostElement) {
+            return;
+        }
+
+        const position = this.positionElement(this.hostElement, this.element.nativeElement.children[0], this.placement);
+        this.top = position.top;
+        this.left = position.left;
+        this.isIn = true;
+        if (this.animation) {
+            this.isFade = true;
+        }
+    }
+
+    hide(): void {
+        this.top = -100000;
+        this.left = -100000;
+        this.isIn = true;
+        if(this.animation) {
+            this.isFade = false;
+        }
+    }
+
+    // -------------------------------------------------------------------------
+    // Private Methods
+    // -------------------------------------------------------------------------
+
+    private positionElement(hostElem: HTMLElement, targetElem: HTMLElement, positionStr: string, appendToBody: boolean = false): {top: number, left: number} {
+        let positionStrParts = positionStr.split("-");
+        let pos0 = positionStrParts[0];
+        let pos1 = positionStrParts[1] || "center";
+        let hostElemPosition = appendToBody ? this.offset(hostElem) : this.position(hostElem);
+        let targetElemWidth = targetElem.offsetWidth;
+        let targetElemHeight = targetElem.offsetHeight;
+        let shiftWidth: any = {
+            center(): number {
+                return hostElemPosition.left + hostElemPosition.width / 2 - targetElemWidth / 2;
+            },
+            left(): number {
+                return hostElemPosition.left;
+            },
+            right(): number {
+                return hostElemPosition.left + hostElemPosition.width;
+            }
+        };
+
+        let shiftHeight: any = {
+            center: function (): number {
+                return hostElemPosition.top + hostElemPosition.height / 2 - targetElemHeight / 2;
+            },
+            top: function (): number {
+                return hostElemPosition.top;
+            },
+            bottom: function (): number {
+                return hostElemPosition.top + hostElemPosition.height;
+            }
+        }
+
+        let targetElemPosition: {top: number, left: number};
+
+        switch (pos0) {
+            case "right":
+                targetElemPosition = {
+                    top: shiftHeight[pos1](),
+                    left: shiftWidth[pos0]()
+                };
+                break;
+
+            case "left":
+                targetElemPosition = {
+                    top: shiftHeight[pos1](),
+                    left: hostElemPosition.left - targetElemWidth
+                };
+                break;
+
+            case "bottom":
+                targetElemPosition = {
+                    top: shiftHeight[pos0](),
+                    left: shiftWidth[pos1]()
+                };
+                break;
+
+            default:
+                targetElemPosition = {
+                    top: hostElemPosition.top - targetElemHeight,
+                    left: shiftWidth[pos1]()
+                };
+                break;
+        }
+
+        return targetElemPosition;
+    }
+
+
+    private position(nativeElem: HTMLElement): {width: number, height: number, top: number, left: number} {
+        let offsetParentCBR = {top: 0, left: 0};
+        const elemBCR = this.offset(nativeElem);
+        const offsetParentElem = this.parentOffsetElem(nativeElem);
+        if(offsetParentElem !== window.document) {
+            offsetParentCBR = this.offset(offsetParentElem);
+            offsetParentCBR.top += offsetParentElem.clientTop - offsetParentElem.scrollTop;
+            offsetParentCBR.left += offsetParentElem.clientLeft - offsetParentElem.scrollTop;
+        }
+
+        const boundingClientRect = nativeElem.getBoundingClientRect();
+
+        return {
+            width: boundingClientRect.width || nativeElem.offsetWidth,
+            height: boundingClientRect.height || nativeElem.offsetHeight,
+            top: elemBCR.top - offsetParentCBR.top,
+            left: elemBCR.left - offsetParentCBR.left
+        };
+    }
+
+    private offset(nativeElem:any): {width: number, height: number, top: number, left: number} {
+        const boundingClientRect = nativeElem.getBoundingClientRect();
+        return {
+            width: boundingClientRect.width || nativeElem.offsetWidth,
+            height: boundingClientRect.height || nativeElem.offsetHeight,
+            top: boundingClientRect.top + (window.pageYOffset || window.document.documentElement.scrollTop),
+            left: boundingClientRect.left + (window.pageXOffset || window.document.documentElement.scrollLeft)
+        };
+    }
+
+    private getStyle(nativeElem: HTMLElement, cssProperty: string): string {
+        if(window.getComputedStyle) {
+            return (window.getComputedStyle(nativeElem) as any)[cssProperty];
+        }
+
+        return (nativeElem.style as any)[cssProperty];
+    }
+
+    private isStaticPositioned(nativeElem: HTMLElement): boolean {
+        return (this.getStyle(nativeElem, "position") || "static") === "static";
+    }
+
+    private parentOffsetElem(nativeElem: HTMLElement): any {
+        let offsetParent: any = nativeElem.offsetParent || window.document;
+        while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) {
+            offsetParent = offsetParent.offsetParent;
+        }
+
+        return offsetParent || window.document;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts b/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts
new file mode 100644
index 0000000000..e98b69003e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts
@@ -0,0 +1,81 @@
+import {
+    Directive, ComponentRef, ViewContainerRef, ComponentFactoryResolver, Input, HostListener
+} from "@angular/core";
+import {TooltipContentComponent} from "./tooltip-content.component";
+
+@Directive ({
+    selector: "[tooltip]"
+})
+export class TooltipComponent {
+
+    // -------------------------------------------------------------------------
+    // Properties
+    // -------------------------------------------------------------------------
+
+    private tooltip: ComponentRef<TooltipContentComponent>;
+    private visible: boolean;
+
+    // -------------------------------------------------------------------------
+    // Constructor
+    // -------------------------------------------------------------------------
+
+    constructor(private viewContainerRef: ViewContainerRef,
+                private resolver: ComponentFactoryResolver) {
+    }
+
+    // -------------------------------------------------------------------------
+    // Inputs / Outputs
+    // -------------------------------------------------------------------------
+
+    @Input("tooltip") content: string|TooltipContentComponent;
+    @Input() tooltipDisabled: boolean;
+    @Input() tooltipAnimation: boolean = true;
+    @Input() tooltipPlacement: "top"|"bottom"|"left"|"right" = "bottom";
+
+    // -------------------------------------------------------------------------
+    // Public Methods
+    // -------------------------------------------------------------------------
+
+    @HostListener("mouseenter")
+    show(): void {
+        if(this.tooltipDisabled || this.visible || this.content === "") {
+            return;
+        }
+
+        this.visible = true;
+        if (typeof this.content === "string") {
+            const factory = this.resolver.resolveComponentFactory(TooltipContentComponent);
+            if (!this.visible) {
+                return;
+            }
+
+            this.tooltip = this.viewContainerRef.createComponent(factory);
+            this.tooltip.instance.hostElement = this.viewContainerRef.element.nativeElement;
+            this.tooltip.instance.content = this.content as string;
+            this.tooltip.instance.placement = this.tooltipPlacement;
+            this.tooltip.instance.animation = this.tooltipAnimation;
+        } else {
+            const tooltip = this.content as TooltipContentComponent;
+            tooltip.hostElement = this.viewContainerRef.element.nativeElement;
+            tooltip.placement = this.tooltipPlacement;
+            tooltip.animation = this.tooltipAnimation;
+            tooltip.show();
+        }
+    }
+
+    @HostListener("mouseleave")
+    hide(): void {
+        if (!this.visible) {
+            return;
+        }
+
+        this.visible = false;
+        if (this.tooltip) {
+            this.tooltip.destroy();
+        }
+        if (this.content instanceof TooltipContentComponent) {
+            (this.content as TooltipContentComponent).hide();
+        }
+    }
+}
+
diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts b/catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts
new file mode 100644
index 0000000000..69976da6af
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts
@@ -0,0 +1,25 @@
+import {NgModule} from "@angular/core";
+import {TooltipContentComponent} from "./tooltip-content.component";
+import {TooltipComponent} from "./tooltip.component";
+import {CommonModule} from "@angular/common";
+
+@NgModule({
+    declarations: [
+        TooltipComponent,
+        TooltipContentComponent,
+    ],
+    imports: [
+        CommonModule
+    ],
+    exports: [
+        TooltipComponent,
+        TooltipContentComponent,
+    ],
+    entryComponents: [
+        TooltipContentComponent
+    ],
+    providers: []
+})
+export class TooltipModule {
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/page404/page404.component.html b/catalog-ui/src/app/ng2/pages/page404/page404.component.html
new file mode 100644
index 0000000000..d488587154
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/page404/page404.component.html
@@ -0,0 +1,3 @@
+<div class="page404">
+    Page404
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/page404/page404.component.less b/catalog-ui/src/app/ng2/pages/page404/page404.component.less
new file mode 100644
index 0000000000..2672f22f27
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/page404/page404.component.less
@@ -0,0 +1,4 @@
+.page404 {
+    font-size: 100px;
+    color: #ff0000;
+}
diff --git a/catalog-ui/src/app/ng2/pages/page404/page404.component.ts b/catalog-ui/src/app/ng2/pages/page404/page404.component.ts
new file mode 100644
index 0000000000..a3baf4fd02
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/page404/page404.component.ts
@@ -0,0 +1,9 @@
+import { Component, Inject } from '@angular/core';
+
+@Component({
+    templateUrl: './page404.component.html',
+    styleUrls: ['./page404.component.less']
+})
+export class PageNotFoundComponent {
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts
new file mode 100644
index 0000000000..6ef3e57678
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts
@@ -0,0 +1,72 @@
+import { NgModule } from "@angular/core";
+import { PropertiesAssignmentComponent } from "./properties-assignment.page.component";
+import { HierarchyNavigationComponent } from "./../../components/hierarchy-navigtion/hierarchy-navigation.component";
+import { BrowserModule } from "@angular/platform-browser";
+import { FormsModule } from "@angular/forms";
+import { HttpModule } from "@angular/http";
+import { TabModule } from '../../shared/tabs/tabs.module';
+import { CheckboxModule} from '../../shared/checkbox/checkbox.module';
+import { PropertiesTableComponent } from '../../components/properties-table/properties-table.component';
+import { InputsTableComponent } from '../../components/inputs-table/inputs-table.component';
+import { ContentAfterLastDotPipe } from "../../pipes/contentAfterLastDot.pipe";
+import { SearchFilterPipe } from "../../pipes/searchFilter.pipe";
+import { FilterChildPropertiesPipe } from "../../pipes/filterChildProperties.pipe";
+import { DataTypeService } from './../../services/data-type.service';
+import { PropertiesService } from './../../services/properties.service';
+import { PropertiesUtils } from './properties.utils';
+import { PostsService } from "../../services/posts.service";
+import { PropertiesValueInnerTableComponent } from "./../../components/properties-table/properties-value-inner-table/properties-value-inner-table.component";
+import { ListPropertyComponent } from "./../../components/properties-table/list-property/list-property.component";
+import { MapPropertyComponent } from "./../../components/properties-table/map-property/map-property.component";
+import { DynamicElementModule } from 'app/ng2/components/dynamic-element/dynamic-element.module';
+import { DynamicPropertyComponent } from './../../components/properties-table/dynamic-property/dynamic-property.component';
+import { DerivedPropertyComponent } from './../../components/properties-table/derived-property/derived-property.component';
+// import {PopoverContentComponent} from "../../components/popover/popover-content.component"
+// import {PopoverComponent} from "../../components/popover/popover.component"
+import { PopoverModule } from "../../components/popover/popover.module"
+import { FilterPropertiesAssignmentComponent } from "./../../components/filter-properties-assignment/filter-properties-assignment.component";
+import { GroupByPipe } from 'app/ng2/pipes/groupBy.pipe';
+import { KeysPipe } from 'app/ng2/pipes/keys.pipe';
+import {TooltipModule} from "../../components/tooltip/tooltip.module";
+
+@NgModule({
+    declarations: [
+        PropertiesAssignmentComponent,
+        PropertiesTableComponent,
+        InputsTableComponent,
+        ContentAfterLastDotPipe,
+        GroupByPipe,
+        KeysPipe,
+        SearchFilterPipe,
+        FilterChildPropertiesPipe,
+        HierarchyNavigationComponent,
+        PropertiesValueInnerTableComponent,
+        ListPropertyComponent,
+        MapPropertyComponent,
+        DerivedPropertyComponent,
+        DynamicPropertyComponent,
+        // PopoverContentComponent,
+        // PopoverComponent,
+        FilterPropertiesAssignmentComponent
+    ],
+    imports: [
+        BrowserModule,
+        FormsModule,
+        HttpModule,
+        TabModule,
+        CheckboxModule,
+        DynamicElementModule,
+        PopoverModule,
+        TooltipModule
+    ],
+    entryComponents: [PropertiesAssignmentComponent],
+    exports: [
+        PropertiesAssignmentComponent
+        // PopoverContentComponent,
+        // PopoverComponent
+    ],
+    providers: [PropertiesService, PropertiesUtils, DataTypeService, PostsService, ContentAfterLastDotPipe, GroupByPipe, KeysPipe]
+})
+export class PropertiesAssignmentModule {
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
new file mode 100644
index 0000000000..d1b671cff2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
@@ -0,0 +1,57 @@
+<div class="properties-assignment-page">
+    <div class="main-content">
+        <div class="left-column">
+            <tabs #propertyInputTabs tabStyle="round-tabs" (tabChanged)="tabChanged($event)" [hideIndicationOnTabChange]="true">
+                <tab tabTitle="Properties">
+                    <properties-table class="properties-table"
+                        [fePropertiesMap]="instanceFePropertiesMap | searchFilter:'name':searchQuery"
+                        [selectedPropertyId]="selectedFlatProperty.uniqueId"
+                        [propertyNameSearchText]="searchPropertyName"
+                        (valueChanged)="propertyValueChanged($event)"
+                        (propertySelected)="propertySelected($event)"
+                        (selectPropertyRow)="selectPropertyRow($event)"
+                        (selectChildProperty)="selectChildProperty($event)"
+                        (updateCheckedPropertyCount)="updateCheckedPropertyCount($event)"
+                        (selectInstanceRow)="selectInstanceRow($event)">
+                        </properties-table>
+                </tab>
+                <tab tabTitle="Inputs">
+                    <inputs-table class="properties-table" [inputs]="inputs | searchFilter:'name':searchQuery" (deleteInput)="deleteInput($event)" (inputValueChanged)="inputValueChanged($event)"></inputs-table>
+                </tab>
+            </tabs>
+            <div class="header">
+                <div class="search-filter-container">
+                    <input type="text" class="search-box" placeholder="Search" [(ngModel)]="searchQuery" />
+                    <span class="sprite search-icon"></span>
+                    <filter-properties-assignment *ngIf="!hideAdvanceSearch" #advanceSearch class="advance-search" [componentType]="component.componentType" (searchProperties)="searchPropertiesInstances($event)"></filter-properties-assignment>
+                    <span *ngIf="displayClearSearch && !hideAdvanceSearch" (click)="clickOnClearSearch()" class="clear-filter">Clear All</span>
+                </div>
+                <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount" (click)="declareProperties()">Declare</button>
+            </div>
+        </div>
+        <div class="right-column gray-border">
+            <tabs #hierarchyNavTabs tabStyle="simple-tabs">
+                <tab tabTitle="Composition">
+                    <div class="hierarchy-nav-container">
+                    <div class="hierarchy-header">{{component.name}}</div>
+                    <div *ngIf="!instancesNavigationData || instancesNavigationData.length === 0">No data to display</div>
+                    <hierarchy-navigation class="hierarchy-nav" (updateSelected)="onInstanceSelectedUpdate($event)"
+                                          [displayData]="instancesNavigationData"
+                                          [selectedItem]="selectedInstanceData.uniqueId"
+                                          [displayOptions]="hierarchyInstancesDisplayOptions"></hierarchy-navigation>
+                    </div>
+                </tab>
+                <tab tabTitle="Property Structure">
+                    <div class="hierarchy-nav-container">
+                    <div class="hierarchy-header">{{propertyStructureHeader || selectedFlatProperty.name || "No Property Selected"}}</div>
+                    <div *ngIf="!propertiesNavigationData || propertiesNavigationData.length === 0">No data to display</div>
+                    <hierarchy-navigation class="hierarchy-nav" (updateSelected)="onPropertySelectedUpdate($event)"
+                                          [displayData]="propertiesNavigationData"
+                                          [selectedItem]="selectedFlatProperty.uniqueId"
+                                          [displayOptions]="hierarchyPropertiesDisplayOptions"></hierarchy-navigation>
+                    </div>
+                </tab>
+            </tabs>
+        </div>
+    </div>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
new file mode 100644
index 0000000000..f7a62bbcb5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
@@ -0,0 +1,158 @@
+@import '../../../../assets/styles/variables';
+@ng2-shadow-gray: #f8f8f8;
+@ng2-light-gray: #eaeaea;
+@ng2-medium-gray: #d2d2d2;
+@ng2-med-dark-gray: #999999;
+@ng2-dark-gray: #5a5a5a;
+@ng2-shadow-blue: #e6f6fb;
+@ng2-bold-blue: #009fdb;
+@ng2-success-green:#4ca90c;
+@ng2-title-font-size:16px;
+@ng2-text-font-size: 14px;
+
+:host { display:block; height: 100%; }
+/deep/ tabs {display:flex; flex-direction:column; height:100%; }
+
+.properties-assignment-page {
+    height: 100%;
+
+    .main-content {
+        display:flex;
+        flex-direction:row;
+        height: 100%;
+    }
+
+    .left-column {
+        flex: 1 0 500px;
+        position: relative;
+        margin: 0 0 1em 0;
+
+        /deep/ .tabs {
+            width:25%;
+            text-align:center;
+
+        }
+
+        /deep/ .tab {
+            padding: 10px .5em;
+
+            &.active {
+                color:#009fdb;
+                border-color: #d2d2d2;
+                border-top: solid 4px #009fdb;
+                background-color: white;
+                padding-top:7px;
+            }
+        }
+
+        .header {
+            position:absolute;
+            top:0;
+            right:0;
+            min-width:200px;
+        }
+
+        .search-filter-container{
+            position: relative;
+            right: 164px;
+        }
+
+        .search-box {
+            border: 1px solid @ng2-medium-gray;
+            border-radius: 4px;
+            height: 32px;
+            margin: 0;
+            padding: 2px 20px 4px 10px;
+            outline: none;
+            font-style: italic;
+            color:@ng2-med-dark-gray;
+            margin-right:10px;
+
+            &::-moz-placeholder { color:@ng2-med-dark-gray;}
+            &::-webkit-input-placeholder{ color:@ng2-med-dark-gray;}
+        }
+        .search-icon {
+            background-position: -48px -3137px;
+            width: 14px;
+            height: 14px;
+            position: relative;
+            right: 34px;
+            top: 4px;
+        }
+        .advance-search{
+            position: relative;
+            right: 22px;
+        }
+        .clear-filter{
+            cursor: pointer;
+            color: @main_color_c;
+            font-family: @font-omnes-medium-italic;
+            text-decoration: underline;
+            position: relative;
+            top: 4px;
+            right: 16px;
+        }
+
+        .declare-button{
+            position: absolute;
+            top: 0;
+            right: 0;
+        }
+    }
+
+    .right-column {
+        display:flex;
+        flex:0 0 350px;
+        flex-direction:column;
+        margin: 3em 0 1em 1em;
+        padding: 10px;
+        overflow:auto;
+
+        /deep/ .tabs {
+            width: 33%;
+        }
+
+        /deep/ .tab {
+            padding: 0.5em 1em 0 1em;
+            white-space: nowrap;
+            font-size: 13px;
+        }
+    }
+
+    .hierarchy-tabs {
+        flex: 0 0 40px;
+    }
+
+    .gray-border {
+        border: 1px solid #ddd;
+    }
+
+
+    .hierarchy-nav-container {
+        flex:1;
+        overflow: auto;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .hierarchy-header {
+        height:30px;
+        line-height: 2.5em;
+        display: flex;
+        width: 100%;
+        padding-left: 14px;
+        font-weight: bold;
+        text-align: left;
+        background-color: @ng2-light-gray;
+        font-size: 13px;
+    }
+
+    .hierarchy-nav {
+        display: grid;
+        margin-top: 1em;
+        margin-left: 1em;
+        font-size: 12px;
+        padding-top: 1em;
+    }
+}
+
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
new file mode 100644
index 0000000000..299615b122
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
@@ -0,0 +1,344 @@
+import {Component, ViewChild, ElementRef, Renderer, Inject} from "@angular/core";
+import {PostsService} from "../../services/posts.service";
+import {PropertiesService, SimpleFlatProperty} from "../../services/properties.service";
+import { PropertiesUtils } from './properties.utils';
+import { PropertyFEModel, InstanceFePropertiesMap, InstanceBePropertiesMap, InstancePropertiesAPIMap, Component as ComponentData, FilterPropertiesAssignmentData } from "app/models";
+import { PROPERTY_TYPES, ResourceType } from "app/utils";
+import property = require("lodash/property");
+import {ComponentServiceNg2} from "../../services/component-services/component.service";
+import {ComponentInstanceServiceNg2} from "../../services/component-instance-services/component-instance.service"
+import {InputFEModel, ComponentInstance, PropertyBEModel, DerivedFEProperty, ResourceInstance} from "app/models";
+import {HierarchyDisplayOptions} from "../../components/hierarchy-navigtion/hierarchy-display-options"
+import {PropertyRowSelectedEvent} from "./../../components/properties-table/properties-table.component";
+import { KeysPipe } from 'app/ng2/pipes/keys.pipe';
+import {FilterPropertiesAssignmentComponent} from "../../components/filter-properties-assignment/filter-properties-assignment.component";
+
+@Component({
+    templateUrl: './properties-assignment.page.component.html',
+    styleUrls: ['./properties-assignment.page.component.less']
+})
+export class PropertiesAssignmentComponent {
+    title = "Properties & Inputs";
+
+    component:ComponentData;
+
+    propertiesNavigationData = [];
+    instancesNavigationData = [];
+
+    instanceFePropertiesMap:InstanceFePropertiesMap;
+    inputs: Array<InputFEModel> = [];
+    instances: Array<ComponentInstance> = [];
+    searchQuery: string;
+    propertyStructureHeader: string
+
+    selectedFlatProperty: SimpleFlatProperty = new SimpleFlatProperty();
+    selectedInstanceType: string;
+    selectedInstanceData: ComponentInstance = new ComponentInstance();
+    checkedPropertiesCount: number = 0;
+
+    hierarchyPropertiesDisplayOptions:HierarchyDisplayOptions = new HierarchyDisplayOptions('uniqueId', 'name', 'childrens');
+    hierarchyInstancesDisplayOptions:HierarchyDisplayOptions = new HierarchyDisplayOptions('uniqueId', 'name');
+    displayClearSearch = false;
+    searchPropertyName:string;
+    hideAdvanceSearch:boolean;
+
+    @ViewChild('hierarchyNavTabs') hierarchyNavTabs: ElementRef;
+    @ViewChild('propertyInputTabs') propertyInputTabs: ElementRef;
+    @ViewChild('advanceSearch') advanceSearch: FilterPropertiesAssignmentComponent;
+
+    constructor(private propertiesService:PropertiesService,
+                private propertiesUtils:PropertiesUtils,
+                private componentServiceNg2:ComponentServiceNg2,
+                private componentInstanceServiceNg2:ComponentInstanceServiceNg2,
+                @Inject("$stateParams") _stateParams,
+                private renderer: Renderer) {
+
+        this.instanceFePropertiesMap = new InstanceFePropertiesMap();
+
+        /* This is the way you can access the component data, please do not use any data except metadata, all other data should be received from the new api calls on the first time
+        than if the data is already exist, no need to call the api again - Ask orit if you have any questions*/
+        this.component = _stateParams.component;
+    }
+
+    ngOnInit() {
+        console.log("==>" + this.constructor.name + ": ngOnInit");
+        this.componentServiceNg2
+            .getComponentResourceInstances(this.component)
+            .subscribe(response => {
+                this.instances = response.componentInstances;
+
+                _.forEach(this.instances, (instance) => {
+                    this.instancesNavigationData.push(instance);
+                });
+
+                this.selectFirstInstanceByDefault();
+            });
+
+        this.componentServiceNg2
+            .getComponentInputs(this.component)
+            .subscribe(response => {
+                _.forEach(response.inputs, (input: PropertyBEModel) => {
+                    this.inputs.push(new InputFEModel(input));
+                });
+            })
+    }
+
+    selectFirstInstanceByDefault = () => {
+        if (this.instancesNavigationData[0] !== undefined) {
+            this.onInstanceSelectedUpdate(this.instancesNavigationData[0]);
+        }
+    }
+
+    propertyValueChanged = (event) => {
+        console.log("==>" + this.constructor.name + ": propertyValueChanged " + event);
+
+        if(this.selectedInstanceData.originType === ResourceType.VF) {
+            console.log("I want to update input value on the resource instance");
+            let inputToUpdate = new PropertyBEModel(event);
+            this.componentInstanceServiceNg2
+                .updateInstanceInput(this.component, this.selectedInstanceData.uniqueId, inputToUpdate)
+                .subscribe(response => {
+                    console.log("update resource instance input and got this response: ",response);
+                })
+        }
+        else {
+            // Copying the actual value from the object ref into the value if it's from a complex type
+            if(event.isDataType) {
+                event.value = JSON.stringify(event.valueObjectRef);
+            }
+            let propertyBe = new PropertyBEModel(event);
+            this.componentInstanceServiceNg2
+                .updateInstanceProperty(this.component, this.selectedInstanceData.uniqueId, propertyBe)
+                .subscribe(response => {
+                    console.log("updated resource instance property and got this response: ",response);
+                });
+            console.log(event);
+        }
+
+    };
+
+    inputValueChanged = (event) => {
+        console.log("==>" + this.constructor.name + ": inputValueChanged");
+        let inputToUpdate = new PropertyBEModel(event);
+
+        this.componentServiceNg2
+            .updateComponentInput(this.component, inputToUpdate)
+            .subscribe(response => {
+                console.log("updated the component input and got this response: ", response);
+            })
+    };
+
+    declareProperties = ():void => {
+        console.log("==>" + this.constructor.name + ": declareProperties");
+
+        let selectedProperties: InstanceBePropertiesMap = new InstanceBePropertiesMap();
+
+        let instancesNames = new KeysPipe().transform(this.instanceFePropertiesMap,[]);
+        angular.forEach(instancesNames, (instanceName:string):void=>{
+            selectedProperties[instanceName] = this.propertiesService.getCheckedProperties(this.instanceFePropertiesMap[instanceName]);
+            //selectedProperties[this.selectedInstanceData.uniqueId] = this.propertiesService.getCheckedProperties(this.properties);
+        });
+
+        let inputsToCreate: InstancePropertiesAPIMap;
+        if (this.selectedInstanceType !== ResourceType.VF) {
+            inputsToCreate = new InstancePropertiesAPIMap(null, selectedProperties);
+        } else {
+            inputsToCreate = new InstancePropertiesAPIMap(selectedProperties, null);
+        }
+        this.componentServiceNg2
+            .createInput(this.component, inputsToCreate)
+            .subscribe(response => {
+                this.setInputTabIndication(response.length);
+                this.checkedPropertiesCount = 0;
+                _.forEach(response, (input: PropertyBEModel) => { this.inputs.push(new InputFEModel(input)); });
+                this.findAndDisableDeclaredProperties();
+            });
+    }
+
+    //TODO: Can remove? no one use it
+    // getSelectedFEProps = (): Array<PropertyFEModel> => {
+    //     return this.properties.filter(prop => prop.isSelected && !prop.isDeclared);
+    // }
+
+    onInstanceSelectedUpdate = (resourceInstance: ResourceInstance) => {
+        console.log("==>" + this.constructor.name + ": onInstanceSelectedUpdate");
+        let instanceBePropertiesMap: InstanceBePropertiesMap = new InstanceBePropertiesMap();
+        this.selectedInstanceData = resourceInstance;
+        this.selectedInstanceType = resourceInstance.originType;
+
+        if(resourceInstance.originType === ResourceType.VF) {
+            this.componentInstanceServiceNg2
+                .getComponentInstanceInputs(this.component, resourceInstance)
+                .subscribe(response => {
+                    instanceBePropertiesMap[resourceInstance.uniqueId] = response;
+                    this.processInstancePropertiesResponse(instanceBePropertiesMap);
+                });
+        } else {
+            this.componentInstanceServiceNg2
+                .getComponentInstanceProperties(this.component, resourceInstance.uniqueId)
+                .subscribe(response => {
+                    instanceBePropertiesMap[resourceInstance.uniqueId] = response;
+                    this.processInstancePropertiesResponse(instanceBePropertiesMap);
+                });
+        }
+
+        if( this.searchPropertyName ){
+            this.clearSearch();
+        }
+    };
+
+    /**
+     * Entry point handling response from server
+     */
+    processInstancePropertiesResponse = (instanceBePropertiesMap:InstanceBePropertiesMap) => {
+        this.instanceFePropertiesMap = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren(instanceBePropertiesMap); //create flattened children
+        this.findAndDisableDeclaredProperties(); //disable properties or flattened children that are declared
+        this.checkedPropertiesCount = 0;
+    };
+
+    /**
+     * Handle select node in navigation area, and select the row in table
+     */
+    onPropertySelectedUpdate = ($event) => {
+        console.log("==>" + this.constructor.name + ": onPropertySelectedUpdate");
+        this.selectedFlatProperty = $event;
+        let parentProperty:PropertyFEModel = this.propertiesService.getParentPropertyFEModelFromPath(this.instanceFePropertiesMap[this.selectedFlatProperty.instanceName], this.selectedFlatProperty.path);
+        parentProperty.expandedChildPropertyId = this.selectedFlatProperty.path;
+    };
+
+    /**
+     * When user select row in table, this will prepare the hirarchy object for the tree.
+     */
+    selectPropertyRow = (propertyRowSelectedEvent:PropertyRowSelectedEvent) => {
+        console.log("==>" + this.constructor.name + ": selectPropertyRow " + propertyRowSelectedEvent.propertyModel.name);
+        let property = propertyRowSelectedEvent.propertyModel;
+        let instanceName = propertyRowSelectedEvent.instanceName;
+        this.propertyStructureHeader = null;
+
+        // Build hirarchy tree for the navigation and update propertiesNavigationData with it.
+        if(this.selectedInstanceData.originType !== ResourceType.VF) {
+            let simpleFlatProperty:Array<SimpleFlatProperty>;
+            if (property instanceof PropertyFEModel) {
+                simpleFlatProperty = this.propertiesService.getSimplePropertiesTree(property, instanceName);
+            } else if (property instanceof DerivedFEProperty) {
+                // Need to find parent PropertyFEModel
+                let parentPropertyFEModel:PropertyFEModel = _.find(this.instanceFePropertiesMap[instanceName], (tmpFeProperty):boolean => {
+                    return property.propertiesName.indexOf(tmpFeProperty.name)===0;
+                });
+                simpleFlatProperty = this.propertiesService.getSimplePropertiesTree(parentPropertyFEModel, instanceName);
+            }
+            this.propertiesNavigationData = simpleFlatProperty;
+        }
+
+        // Updatet the header in the navigation tree with property name.
+        if(property instanceof DerivedFEProperty) {
+            this.propertyStructureHeader = (property.propertiesName.split('#'))[0];
+        }
+
+        // Set selected property in table
+        this.selectedFlatProperty = new SimpleFlatProperty(property.uniqueId, null, property.name, null);
+        this.renderer.invokeElementMethod(this.hierarchyNavTabs, 'triggerTabChange', ['Property Structure']);
+    };
+
+    //TODO: Can remove? no one use it
+    // findParentProperty = (childProp: DerivedFEProperty): PropertyFEModel => {
+    //     return this.properties.find(prop => prop.name == childProp.propertiesName.substring(0, childProp.propertiesName.indexOf("#")));
+    // }
+
+    //used for declare button, to keep count of newly checked properties (and ignore declared properties)
+    updateCheckedPropertyCount = (increment: boolean):void => {
+        this.checkedPropertiesCount += (increment) ? 1 : -1;
+        console.log("CheckedProperties count is now.... " + this.checkedPropertiesCount);
+    }
+
+    selectInstanceRow = ($event) => {//get instance name
+        this.selectedInstanceData =  _.find(this.instancesNavigationData, (instance:ComponentInstance) => {
+            return instance.name == $event;
+        });
+        this.renderer.invokeElementMethod(
+            this.hierarchyNavTabs, 'triggerTabChange', ['Composition']);
+    }
+
+    tabChanged = (event) => {
+        console.log("==>" + this.constructor.name + ": tabChanged " + event);
+        this.hideAdvanceSearch = event.title !== "Properties";
+        this.searchQuery = '';
+    };
+
+    deleteInput = (input:InputFEModel) => {
+        console.log("==>" + this.constructor.name + ": deleteInput");
+        let inputToDelete = new PropertyBEModel(input);
+
+        this.componentServiceNg2
+            .deleteInput(this.component, inputToDelete)
+            .subscribe(response => {
+                this.inputs = this.inputs.filter(input => input.uniqueId !== response.uniqueId);
+                let propToEnable: PropertyFEModel = this.instanceFePropertiesMap[input.instanceName].find(prop => prop.name == input.propertyName);
+                propToEnable.setNonDeclared(response.inputPath);
+                this.propertiesService.undoDisableRelatedProperties(propToEnable, response.inputPath);
+                //this.propertiesService.initValueObjectRef(propToEnable); //TODO:speak to BE about value returned by server
+            });
+    }
+
+    setInputTabIndication = (numInputs: number): void => {
+        this.renderer.invokeElementMethod( this.propertyInputTabs, 'setTabIndication', ['Inputs', numInputs]);
+    }
+
+    findAndDisableDeclaredProperties = () => {
+        this.inputs.filter(input => input.instanceName === this.selectedInstanceData.normalizedName).forEach(input => {
+            let prop: PropertyFEModel = this.instanceFePropertiesMap[this.selectedInstanceData.uniqueId].find(prop => prop.name === input.propertyName);
+            if (prop) {
+                prop.setAsDeclared(input.inputPath); //if a path was sent, its a child prop. this param is optional
+                this.propertiesService.disableRelatedProperties(prop, input.inputPath)
+                //this.propertiesService.initValueObjectRef(prop);
+            }
+        });
+    };
+
+    searchPropertiesInstances = (filterData:FilterPropertiesAssignmentData) => {
+        //let filteredProperties = this.componentServiceNg2.filterComponentInstanceProperties(this.component, filterData);
+        let instanceBePropertiesMap:InstanceBePropertiesMap;
+        this.componentServiceNg2
+            .filterComponentInstanceProperties(this.component, filterData)
+            .subscribe(response => {
+                //instanceBePropertiesMap=response;
+                //console.log("================filter results=============");
+                //console.table(instanceBePropertiesMap);
+                this.processInstancePropertiesResponse(response);
+
+
+                //this.properties = [];
+                // _.forEach(instanceBePropertiesMap, (InstanceProperties:Array<PropertyBEModel>, instanceName:string) => {
+                //     this.properties = this.properties.concat(this.propertiesService.convertPropertiesToFEAndCreateChildren(InstanceProperties, instanceName));
+                // });
+
+
+                // this.instancesNavigationData = _.filter(this.instancesNavigationData, (instance:ComponentInstance) => {
+                //     return instanceBePropertiesMap[instance.name];
+                // });
+
+                // this.hierarchyPropertiesDisplayOptions.searchText = filterData.propertyName;//mark results in tree
+                this.searchPropertyName = filterData.propertyName;//mark in table
+                this.renderer.invokeElementMethod(this.hierarchyNavTabs, 'triggerTabChange', ['Composition']);
+                this.propertiesNavigationData = [];
+                this.displayClearSearch = true;
+            });
+
+    };
+
+    clearSearch = () => {
+        this.instancesNavigationData = this.instances;
+        this.searchPropertyName = "";
+        this.hierarchyPropertiesDisplayOptions.searchText = "";
+        this.displayClearSearch = false;
+        this.advanceSearch.clearAll();
+    }
+
+    clickOnClearSearch = () => {
+        this.clearSearch();
+        this.selectFirstInstanceByDefault();
+        this.renderer.invokeElementMethod(
+            this.hierarchyNavTabs, 'triggerTabChange', ['Composition']);
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts
new file mode 100644
index 0000000000..79769e21b5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts
@@ -0,0 +1,78 @@
+import { Injectable } from '@angular/core';
+import { DataTypeModel, PropertyFEModel, PropertyBEModel, InstanceBePropertiesMap, InstanceFePropertiesMap, SchemaProperty, DerivedFEProperty, DerivedFEPropertyMap, DerivedPropertyType, InputFEModel} from "app/models";
+import { DataTypeService } from "app/ng2/services/data-type.service";
+import { PROPERTY_TYPES } from "app/utils";
+import { UUID } from "angular2-uuid";
+
+@Injectable()
+export class PropertiesUtils {
+
+    constructor(private dataTypeService:DataTypeService) {}
+
+    /**
+     * Entry point when getting properties from server
+     * Returning InstanceFePropertiesMap
+     */
+    public convertPropertiesMapToFEAndCreateChildren = (instancePropertiesMap:InstanceBePropertiesMap): InstanceFePropertiesMap => {
+        let instanceFePropertiesMap:InstanceFePropertiesMap = new InstanceFePropertiesMap();
+        angular.forEach(instancePropertiesMap, (properties:Array<PropertyBEModel>, instanceName:string) => {
+            instanceFePropertiesMap[instanceName] = this.convertPropertiesToFEAndCreateChildren(properties);
+        });
+        return instanceFePropertiesMap;
+    }
+
+    /**
+     * Convert the properties Array<PropertyBEModel> to Array<PropertyFEModel>
+     */
+    private convertPropertiesToFEAndCreateChildren = (properties: Array<PropertyBEModel>): Array<PropertyFEModel> => {
+        let propertyFeArray: Array<PropertyFEModel> = [];
+        _.forEach(properties, (property: PropertyBEModel, index: number) => {
+            //console.log("=======" + property.name + "========");
+                if(!this.dataTypeService.getDataTypeByTypeName(property.type)){ // if type not exist in data types remove property from list
+                    console.log("ERROR: missing type " + property.type + " in dataTypes , of property ",property);
+                    return;
+                }
+                let propertyFe:PropertyFEModel = new PropertyFEModel(property);
+                if (propertyFe.isDataType) { //prop is not simple, list, or map. Need to create children.
+                    let tempProps: Array<DerivedFEProperty> = [];
+                    let dataTypeObj: DataTypeModel = this.dataTypeService.getDataTypeByTypeName(propertyFe.type);
+                    this.dataTypeService.getDerivedDataTypeProperties(dataTypeObj, tempProps, propertyFe.name);
+                    propertyFe.flattenedChildren = tempProps;
+                    propertyFe.expandedChildPropertyId = propertyFe.name;
+                    this.initValueObjectRef(propertyFe);
+                }
+                propertyFeArray.push(propertyFe);
+
+
+        });
+        return propertyFeArray;
+
+        //TODO: need to look at schema to create the nested properties for the following cases:
+        // 1 - when value is populated for a complex type (list or map)
+        // 2 - when adding new entries to a complex type (eg. adding a new entry to a list of AddressRequirements)
+    }
+
+    public initValueObjectRef = (property: PropertyFEModel): void => {
+        //console.log("Property " + property.name + " has value: " + property.value);
+        if (!property.isDataType || property.isDeclared) { //if property is declared, it gets a simple input instead. List and map values and pseudo-children will be handled in property component
+            property.value = property.value || property.defaultValue;
+        } else if (property.value){ //we have a complex property with a value. Lets parse property.value and populate our flattened children with those values
+            this.assignValuesRecursively(JSON.parse(property.value), property.flattenedChildren, property.name);
+        }
+    }
+
+    public assignValuesRecursively = (valueJSON: any, derivedPropArray: Array<DerivedFEProperty>, propName: string) => {
+        if (valueJSON && Object.keys(valueJSON)) {
+            Object.keys(valueJSON).forEach(valueKey => {
+                let childProp: DerivedFEProperty = derivedPropArray.find(prop => prop.propertiesName == propName + "#" + valueKey);
+                if (!childProp) return;
+                if (childProp.isDeclared || (childProp.derivedDataType != DerivedPropertyType.COMPLEX && !_.isEmpty(valueJSON[valueKey]))) {
+                    childProp.value = (typeof valueJSON[valueKey] === 'object')? JSON.stringify(valueJSON[valueKey]) : valueJSON[valueKey];
+                } else {
+                    this.assignValuesRecursively(valueJSON[valueKey], derivedPropArray, childProp.propertiesName)
+                }
+            });
+        }
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/pipes/contentAfterLastDot.pipe.ts b/catalog-ui/src/app/ng2/pipes/contentAfterLastDot.pipe.ts
new file mode 100644
index 0000000000..68fba92b77
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pipes/contentAfterLastDot.pipe.ts
@@ -0,0 +1,8 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'contentAfterLastDot' })
+export class ContentAfterLastDotPipe implements PipeTransform {
+    transform(value:string): string {
+        return value.split('.').pop();
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pipes/filterChildProperties.pipe.ts b/catalog-ui/src/app/ng2/pipes/filterChildProperties.pipe.ts
new file mode 100644
index 0000000000..d2eaef0391
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pipes/filterChildProperties.pipe.ts
@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DerivedFEProperty } from 'app/models';
+
+@Pipe({
+    name: 'filterChildProperties',
+})
+export class FilterChildPropertiesPipe implements PipeTransform {
+    public transform(childProperties: Array<DerivedFEProperty>, parentId: string) {
+        if (!parentId || !childProperties) return childProperties;
+
+        let validParents: Array<string> = [parentId];
+        while (parentId.lastIndexOf('#') > 0) {
+            parentId = parentId.substring(0, parentId.lastIndexOf('#'));
+            validParents.push(parentId);
+        }
+        return childProperties.filter(derivedProp => validParents.indexOf(derivedProp.parentName) > -1);
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pipes/groupBy.pipe.ts b/catalog-ui/src/app/ng2/pipes/groupBy.pipe.ts
new file mode 100644
index 0000000000..17ccc0ca75
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pipes/groupBy.pipe.ts
@@ -0,0 +1,19 @@
+/**
+ * Created by rc2122 on 5/17/2017.
+ */
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({name: 'groupBy'})
+export class GroupByPipe implements PipeTransform {
+    transform(value: Array<any>, field: string): Array<any> {
+        const groupedObj = value.reduce((prev, cur)=> {
+            if(!prev[cur[field]]) {
+                prev[cur[field]] = [cur];
+            } else {
+                prev[cur[field]].push(cur);
+            }
+            return prev;
+        }, {});
+        return Object.keys(groupedObj).map((key:string) => {return { key, value: groupedObj[key] }; });
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pipes/keys.pipe.ts b/catalog-ui/src/app/ng2/pipes/keys.pipe.ts
new file mode 100644
index 0000000000..13bd26969c
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pipes/keys.pipe.ts
@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({name: 'keys'})
+export class KeysPipe implements PipeTransform {
+  transform(value, args:string[]) : any {
+    let keys = [];
+    for (let key in value) {
+      keys.push(key);
+    }
+    return keys;
+  }
+}
diff --git a/catalog-ui/src/app/ng2/pipes/searchFilter.pipe.ts b/catalog-ui/src/app/ng2/pipes/searchFilter.pipe.ts
new file mode 100644
index 0000000000..7e017e8590
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pipes/searchFilter.pipe.ts
@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'searchFilter',
+})
+export class SearchFilterPipe implements PipeTransform {
+    public transform(value, key: string, term: string) {
+        if (!term || !term.length) return value;
+        return value.filter((item) => {
+            if (item.hasOwnProperty(key)) {
+                let regExp = new RegExp(term, 'gi');
+                return regExp.test(item[key]);
+            } else {
+                return false;
+            }
+        });
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/services/authentication.service.ts b/catalog-ui/src/app/ng2/services/authentication.service.ts
new file mode 100644
index 0000000000..7fe3e22f4c
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/authentication.service.ts
@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+import { sdc2Config } from './../../../main';
+import {IAppConfigurtaion, ICookie} from "../../models/app-config";
+import {Response, Headers, RequestOptions, Http} from '@angular/http';
+import {Cookie2Service} from "./cookie.service";
+import { Observable } from 'rxjs/Observable';
+
+@Injectable()
+export class AuthenticationService {
+
+    private cookieService:Cookie2Service;
+    private http:Http;
+
+    constructor(cookieService:Cookie2Service, http: Http) {
+        this.cookieService = cookieService;
+        this.http = http;
+    }
+
+    private getAuthHeaders():any {
+        let cookie:ICookie = sdc2Config.cookie;
+        let authHeaders:any = {};
+        authHeaders[cookie.userFirstName] = this.cookieService.getFirstName();
+        authHeaders[cookie.userLastName] = this.cookieService.getLastName();
+        authHeaders[cookie.userEmail] = this.cookieService.getEmail();
+        authHeaders[cookie.userIdSuffix] = this.cookieService.getUserId();
+        return authHeaders;
+    }
+
+    public authenticate(): Observable<JSON> {
+        let options = new RequestOptions({
+            headers: new Headers(this.getAuthHeaders())
+        });
+
+        let authUrl = sdc2Config.api.root + sdc2Config.api.GET_user_authorize;
+        return this.http
+            .get(authUrl, options)
+            .map((res: Response) => res.json());
+    }
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts b/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts
new file mode 100644
index 0000000000..85709894ff
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts
@@ -0,0 +1,51 @@
+import {Injectable} from '@angular/core';
+import {Response, RequestOptions, Headers} from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+import {HttpService} from "../http.service";
+import {sdc2Config} from "../../../../main";
+import {PropertyBEModel} from "app/models";
+import {CommonUtils} from "app/utils";
+import {Component, ComponentInstance, InputModel} from "app/models";
+
+@Injectable()
+export class ComponentInstanceServiceNg2 {
+
+    protected baseUrl;
+
+    constructor(private http: HttpService) {
+        this.baseUrl = sdc2Config.api.root + sdc2Config.api.component_api_root;
+    }
+
+    getComponentInstanceProperties(component: Component, componentInstanceId: string): Observable<Array<PropertyBEModel>> {
+
+        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstanceId + '/properties')
+            .map((res: Response) => {
+                return CommonUtils.initBeProperties(res.json());
+        })
+    }
+
+    getComponentInstanceInputs(component: Component, componentInstance: ComponentInstance): Observable<Array<PropertyBEModel>> {
+        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstance.uniqueId + '/' + componentInstance.componentUid + '/inputs')
+            .map((res: Response) => {
+                return CommonUtils.initInputs(res.json());
+            })
+    }
+
+    updateInstanceProperty(component: Component, componentInstanceId: string, property: PropertyBEModel): Observable<PropertyBEModel> {
+
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstance/' + componentInstanceId + '/property', property)
+            .map((res: Response) => {
+                return new PropertyBEModel(res.json());
+        })
+    }
+
+    updateInstanceInput(component: Component, componentInstanceId: string, input: PropertyBEModel): Observable<PropertyBEModel> {
+
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstance/' + componentInstanceId + '/input', input)
+            .map((res: Response) => {
+                return new PropertyBEModel(res.json());
+            })
+    }
+
+
+}
diff --git a/catalog-ui/src/app/ng2/services/component-services/component.service.ts b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
new file mode 100644
index 0000000000..3fa9fde40c
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
@@ -0,0 +1,149 @@
+import {Injectable, Query} from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/toPromise';
+import {Response, URLSearchParams} from '@angular/http';
+import { Component, PropertyBEModel, InstancePropertiesAPIMap, FilterPropertiesAssignmentData} from "app/models";
+import {downgradeInjectable} from '@angular/upgrade/static';
+import {HttpService} from "../http.service";
+import {COMPONENT_FIELDS} from "app/utils";
+import {ComponentGenericResponse} from "../responses/component-generic-response";
+import {sdc2Config} from "../../../../main";
+import {InstanceBePropertiesMap} from "../../../models/properties-inputs/property-fe-map";
+import {API_QUERY_PARAMS} from "app/utils";
+import {ComponentType, ServerTypeUrl} from "../../../utils/constants";
+
+declare var angular:angular.IAngularStatic;
+
+@Injectable()
+export class ComponentServiceNg2 {
+
+    protected baseUrl;
+
+    constructor(private http:HttpService) {
+        this.baseUrl = sdc2Config.api.root + sdc2Config.api.component_api_root;
+    }
+
+    private getComponentDataByFieldsName(componentType:string, componentId: string, fields:Array<string>):Observable<ComponentGenericResponse> {
+
+        let params:URLSearchParams = new URLSearchParams();
+        _.forEach(fields, (field:string):void => {
+            params.append(API_QUERY_PARAMS.INCLUDE, field);
+        });
+
+        return this.http.get(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/filteredDataByParams', {search: params})
+            .map((res:Response) => {
+                return new ComponentGenericResponse().deserialize(res.json());
+            }).do(error => console.log('server data:', error));
+    }
+
+    private getServerTypeUrl = (componentType:string):string => {
+        switch (componentType) {
+            case ComponentType.PRODUCT:
+                return ServerTypeUrl.PRODUCTS;
+            case ComponentType.SERVICE:
+                return ServerTypeUrl.SERVICES;
+            default:
+                return ServerTypeUrl.RESOURCES;
+        }
+    }
+
+    getComponentMetadata(component:Component):Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_METADATA]);
+    }
+
+    getComponentInstanceAttributesAndProperties(component:Component):Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_PROPERTIES, COMPONENT_FIELDS.COMPONENT_INSTANCES_ATTRIBUTES]);
+    }
+
+    getComponentAttributes(component:Component):Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_ATTRIBUTES]);
+    }
+
+    getComponentInstancesAndRelation(component:Component):Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_RELATION, COMPONENT_FIELDS.COMPONENT_INSTANCES]);
+    }
+
+    getComponentResourceInstances(component:Component):Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES]);
+    }
+
+    getComponentInputs(component:Component):Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INPUTS]);
+    }
+
+    getComponentDeploymentArtifacts(component:Component):Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_DEPLOYMENT_ARTIFACTS]);
+    }
+
+    getComponentInformationalArtifacts(component:Component):Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INFORMATIONAL_ARTIFACTS]);
+    }
+
+    getComponentInformationalArtifactsAndInstances(component:Component):Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INFORMATIONAL_ARTIFACTS, COMPONENT_FIELDS.COMPONENT_INSTANCES]);
+    }
+
+    getComponentToscaArtifacts(component:Component):Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_TOSCA_ARTIFACTS]);
+    }
+
+    getComponentProperties(component:Component):Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_PROPERTIES]);
+    }
+
+    getCapabilitiesAndRequirements(componentType: string, componentId:string):Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [COMPONENT_FIELDS.COMPONENT_REQUIREMENTS, COMPONENT_FIELDS.COMPONENT_CAPABILITIES]);
+    }
+
+    getDeploymentGraphData(component:Component):Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_RELATION, COMPONENT_FIELDS.COMPONENT_INSTANCES, COMPONENT_FIELDS.COMPONENT_GROUPS]);
+    }
+
+    createInput(component:Component, inputsToCreate:InstancePropertiesAPIMap):Observable<any> {
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/inputs', inputsToCreate)
+            .map(res => {
+                return res.json();
+            })
+    }
+
+    deleteInput(component:Component, input:PropertyBEModel):Observable<PropertyBEModel> {
+
+        return this.http.delete(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/delete/' + input.uniqueId + '/input')
+            .map((res:Response) => {
+                return new PropertyBEModel(res.json());
+            })
+    }
+
+    updateComponentInput(component:Component, input:PropertyBEModel):Observable<PropertyBEModel> {
+
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/update/inputs', input)
+            .map((res:Response) => {
+                return new PropertyBEModel(res.json())
+            })
+    }
+
+    filterComponentInstanceProperties(component: Component, filterData:FilterPropertiesAssignmentData): Observable<InstanceBePropertiesMap> {//instance-property-be-map
+        let params: URLSearchParams = new URLSearchParams();
+        _.forEach(filterData.selectedTypes, (type:string) => {
+            params.append('resourceType', type);
+        });
+
+        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/filteredproperties/' + filterData.propertyName, {search: params})
+            .map((res: Response) => {
+                return res.json();
+            });
+
+        // return {'ExtVL 0':[{definition: false,name:"network_assignments",password:false,required:true,type:"org.openecomp.datatypes.network.NetworkAssignments",uniqueId:"623cca1c-d605-4c9c-9f2b-935ec85ebcf8.network_assignments"},
+        //     {definition: false,name: "exVL_naming",password: false,required: true,type: "org.openecomp.datatypes.Naming",uniqueId: "623cca1c-d605-4c9c-9f2b-935ec85ebcf8.exVL_naming"},
+        //     {definition: false,name: "network_flows",password: false,required: false,type: "org.openecomp.datatypes.network.NetworkFlows",uniqueId: "623cca1c-d605-4c9c-9f2b-935ec85ebcf8.network_flows"},
+        //     {definition: false,name: "provider_network",password: false,required: true,type: "org.openecomp.datatypes.network.ProviderNetwork",uniqueId: "623cca1c-d605-4c9c-9f2b-935ec85ebcf8.provider_network"},
+        //     {definition: false,name: "network_homing",password: false,required: true,type: "org.openecomp.datatypes.EcompHoming",uniqueId: "623cca1c-d605-4c9c-9f2b-935ec85ebcf8.network_homing"}],
+        //     'NetworkCP 0':[{definition: false,description: "identifies MAC address assignments to the CP",name: "mac_requirements",password: false,required: false,type: "org.openecomp.datatypes.network.MacRequirements",uniqueId: "26ec2bfd-b904-46c7-87ed-b32775120f2c.mac_requirements"}],
+        //     'NetworkCP 1':[{definition: false,description: "identifies MAC address assignments to the CP",name: "mac_requirements",password: false,required: false,type: "org.openecomp.datatypes.network.MacRequirements",uniqueId: "26ec2bfd-b904-46c7-87ed-b32775120f2c.mac_requirements"}]};
+
+
+    }
+}
+
+angular.module('Sdc.Services').factory('ComponentServiceNg2', downgradeInjectable(ComponentServiceNg2)); // This is in order to use the service in angular1 till we finish remove all angular1 code
diff --git a/catalog-ui/src/app/ng2/services/component-services/resource.service.ts b/catalog-ui/src/app/ng2/services/component-services/resource.service.ts
new file mode 100644
index 0000000000..650f244d38
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/component-services/resource.service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/toPromise';
+import { Http, Response, Headers, RequestOptions } from '@angular/http';
+
+@Injectable()
+export class ResourceServiceNg2 {
+
+    protected baseUrl = "";
+
+    constructor(private http: Http) {
+
+    }
+
+
+
+
+}
diff --git a/catalog-ui/src/app/ng2/services/component-services/service.service.ts b/catalog-ui/src/app/ng2/services/component-services/service.service.ts
new file mode 100644
index 0000000000..b47b64c5c2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/component-services/service.service.ts
@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/toPromise';
+import { Response } from '@angular/http';
+import {Service} from "app/models";
+import { downgradeInjectable } from '@angular/upgrade/static';
+import {sdc2Config} from "../../../../main";
+import {HttpService} from "../http.service";
+
+
+@Injectable()
+export class ServiceServiceNg2 {
+
+    protected baseUrl = "";
+
+    constructor(private http: HttpService) {
+        this.baseUrl = sdc2Config.api.root + sdc2Config.api.component_api_root;
+    }
+
+    validateConformanceLevel(service: Service): Observable<boolean> {
+
+        return this.http.get(this.baseUrl + service.getTypeUrl() + service.uniqueId + '/conformanceLevelValidation')
+            .map((res: Response) => {
+                return res.json();
+            });
+    }
+
+}
+
+angular.module('Sdc.Services').factory('ServiceServiceNg2', downgradeInjectable(ServiceServiceNg2)); // This is in order to use the service in angular1 till we finish remove all angular1 code
diff --git a/catalog-ui/src/app/ng2/services/config.service.ts b/catalog-ui/src/app/ng2/services/config.service.ts
new file mode 100644
index 0000000000..0ac3b5a397
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/config.service.ts
@@ -0,0 +1,51 @@
+/**
+ * Created by ob0695 on 4/9/2017.
+ */
+
+import { Injectable } from '@angular/core';
+import { Http, Response } from '@angular/http';
+import 'rxjs/add/operator/toPromise';
+import {IAppConfigurtaion, ValidationConfiguration, Validations} from "app/models";
+import {sdc2Config} from './../../../main';
+
+declare var __ENV__: string;
+
+@Injectable()
+export class ConfigService {
+
+    private baseUrl;
+    public configuration: IAppConfigurtaion;
+
+    constructor(private http: Http) {
+        this.baseUrl = sdc2Config.api.root + sdc2Config.api.component_api_root;
+    }
+
+    loadValidationConfiguration(): Promise<ValidationConfiguration> {
+        let url: string = sdc2Config.validationConfigPath;
+        let promise: Promise<ValidationConfiguration> = this.http.get(url).map((res: Response) => res.json()).toPromise();
+        promise.then((validationData: Validations) => {
+            ValidationConfiguration.validation = validationData;
+        }).catch((ex) => {
+            console.error('Error loading validation.json configuration file, using fallback data', ex);
+            
+            let fallback:Validations = {
+                "propertyValue": {
+                    "max": 2500,
+                    "min": 0
+                },
+
+                "validationPatterns": {
+                    "string": "^[\\sa-zA-Z0-9+-]+$",
+                    "comment": "^[\\sa-zA-Z0-9+-_\\{\\}\"]+$",
+                    "integer": "^(([-+]?\\d+)|([-+]?0x[0-9a-fA-F]+))$"
+                }
+            };
+            
+            ValidationConfiguration.validation = fallback;
+            
+        });
+
+        return promise;
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/services/cookie.service.ts b/catalog-ui/src/app/ng2/services/cookie.service.ts
new file mode 100644
index 0000000000..2dc2ac3e6b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/cookie.service.ts
@@ -0,0 +1,65 @@
+import { Injectable } from '@angular/core';
+import {IAppConfigurtaion, ICookie} from "../../models/app-config";
+import {sdc2Config} from './../../../main';
+
+@Injectable()
+export class Cookie2Service {
+
+    private cookie:ICookie;
+    private cookiePrefix:string;
+
+    constructor() {
+        this.cookie = sdc2Config.cookie;
+
+        this.cookiePrefix = '';
+        let junctionName:string = this.getCookieByName(this.cookie.junctionName);
+        if ((junctionName !== null) && (junctionName !== '')) {
+            this.cookiePrefix = this.cookie.prefix + junctionName + '!';
+        }
+        console.log("junctionName:" + junctionName);
+    }
+
+    private getCookieByName = (cookieName:string):string => {
+        cookieName += '=';
+        let cookies:Array<string> = document.cookie.split(';');
+        let cookieVal:string = '';
+        cookies.forEach((cookie:string) => {
+            while (cookie.charAt(0) === ' ') {
+                cookie = cookie.substring(1);
+            }
+            if (cookie.indexOf(cookieName) === 0) {
+                cookieVal = cookie.substring(cookieName.length, cookie.length);
+                return;
+            }
+        });
+        return cookieVal;
+    };
+
+    public getUserIdSuffix = ():string => {
+        return this.cookie.userIdSuffix;
+    };
+
+    public getUserId = ():string => {
+        let userIdCookieName:string = this.cookiePrefix + this.cookie.userIdSuffix;
+        let userId:string = this.getCookieByName(userIdCookieName);
+        return userId;
+    };
+
+    public getFirstName = ():string => {
+        let firstNameCookieName:string = this.cookiePrefix + this.cookie.userFirstName;
+        let firstName:string = this.getCookieByName(firstNameCookieName);
+        return firstName;
+    };
+
+    public getLastName = ():string => {
+        let lastNameCookieName:string = this.cookiePrefix + this.cookie.userLastName;
+        let lastName:string = this.getCookieByName(lastNameCookieName);
+        return lastName;
+    };
+
+    public getEmail = ():string => {
+        let emailCookieName:string = this.cookiePrefix + this.cookie.userEmail;
+        let email:string = this.getCookieByName(emailCookieName);
+        return email;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/services/data-type.service.ts b/catalog-ui/src/app/ng2/services/data-type.service.ts
new file mode 100644
index 0000000000..e7ea1a8430
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/data-type.service.ts
@@ -0,0 +1,69 @@
+import { Injectable } from '@angular/core';
+import { DataTypeModel, DataTypesMap, PropertyBEModel, PropertyFEModel, DerivedFEProperty, DerivedFEPropertyMap } from "app/models";
+import { DataTypesService } from "app/services/data-types-service";
+import { PROPERTY_DATA, PROPERTY_TYPES } from "app/utils";
+
+/** This is a new service for NG2, to eventually replace app/services/data-types-service.ts
+ *
+ *  This service is a singleton that holds a map of all DataTypes, recieved from server on load.
+ *  It also contains convenience methods to check if a string is a valid dataType, and to retrieve a dataType's properties recursively
+ */
+
+@Injectable()
+export class DataTypeService {
+    private dataTypes: DataTypesMap;
+
+    constructor(private dataTypeService: DataTypesService) {
+        this.dataTypes = dataTypeService.getAllDataTypes(); //This should eventually be replaced by an NG2 call to the backend instead of utilizing Angular1 downgraded component.
+    }
+
+    public getDataTypeByTypeName(typeName: string): DataTypeModel {
+        return this.dataTypes[typeName];
+    }
+/*
+    //if the dt derived from simple- return the first parent type, else- return null
+    public getTypeForDataTypeDerivedFromSimple = (dataTypeName:string):string => {
+        /////////temporary hack for tosca primitives///////////////////////
+        if (!this.dataTypes[dataTypeName]) {
+            return PROPERTY_TYPES.STRING;
+        }
+        ///////////////////////////////////////////////////////////////////
+        if (this.dataTypes[dataTypeName].derivedFromName == PROPERTY_DATA.ROOT_DATA_TYPE || this.dataTypes[dataTypeName].properties) {
+            return null;
+        }
+        if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(this.dataTypes[dataTypeName].derivedFromName) > -1) {
+            return this.dataTypes[dataTypeName].derivedFromName
+        }
+        return this.getTypeForDataTypeDerivedFromSimple(this.dataTypes[dataTypeName].derivedFromName);
+    };
+
+    /**
+     * The function returns all properties for the DataType passed in, and recurses through parent dataTypes (derivedFrom) to retrieve their properties as well
+     * @param dataTypeObj
+     *
+    public getDataTypePropertiesRecursively(dataTypeObj: DataTypeModel): Array<PropertyBEModel> {
+        let propertiesArray: Array<PropertyBEModel> = dataTypeObj.properties || [];
+        if (PROPERTY_DATA.ROOT_DATA_TYPE !== dataTypeObj.derivedFromName) {
+            propertiesArray = propertiesArray.concat(this.getDataTypePropertiesRecursively(dataTypeObj.derivedFrom));
+        }
+        return propertiesArray;
+    }
+*/
+    
+    public getDerivedDataTypeProperties(dataTypeObj: DataTypeModel, propertiesArray: Array<DerivedFEProperty>, parentName: string) {
+        //push all child properties to array
+        if (dataTypeObj.properties) {
+            dataTypeObj.properties.forEach((derivedProperty) => {
+                propertiesArray.push(new DerivedFEProperty(derivedProperty, parentName));
+                let derivedDataTypeObj: DataTypeModel = this.getDataTypeByTypeName(derivedProperty.type);
+                this.getDerivedDataTypeProperties(derivedDataTypeObj, propertiesArray, parentName + "#" + derivedProperty.name);
+            });
+        }
+        //recurse parent (derivedFrom), in case one of parents contains properties
+        if (PROPERTY_DATA.ROOT_DATA_TYPE !== dataTypeObj.derivedFrom.name) {
+            this.getDerivedDataTypeProperties(dataTypeObj.derivedFrom, propertiesArray, parentName);
+        }    
+    }    
+    
+}
+
diff --git a/catalog-ui/src/app/ng2/services/http.service.ts b/catalog-ui/src/app/ng2/services/http.service.ts
new file mode 100644
index 0000000000..92e8ced142
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/http.service.ts
@@ -0,0 +1,73 @@
+import {Injectable} from '@angular/core';
+import {Http, XHRBackend, RequestOptions, Request, RequestOptionsArgs, Response, Headers} from '@angular/http';
+import {Observable} from 'rxjs/Observable';
+import {UUID} from 'angular2-uuid';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/catch';
+import {Dictionary} from "../../utils/dictionary/dictionary";
+import {SharingService, CookieService} from "app/services";
+import {sdc2Config} from './../../../main';
+
+@Injectable()
+export class HttpService extends Http {
+
+    constructor(backend:XHRBackend, options:RequestOptions, private sharingService:SharingService, private cookieService: CookieService) {
+        super(backend, options);
+        this._defaultOptions.withCredentials = true;
+        this._defaultOptions.headers.append(cookieService.getUserIdSuffix(), cookieService.getUserId());
+    }
+
+    request(request:string|Request, options?:RequestOptionsArgs):Observable<Response> {
+        /**
+         * For every request to the server, that the service id, or resource id is sent in the URL, need to pass UUID in the header.
+         * Check if the unique id exists in uuidMap, and if so get the UUID and add it to the header.
+         */
+        if (typeof request === 'string') { // meaning we have to add the token to the options, not in url
+            if (!options) {
+                // make option object
+                options = {headers: new Headers()};
+            }
+
+            var uuidValue = this.getUuidValue(request);
+            if(uuidValue!= ''){
+                options.headers['X-ECOMP-ServiceID'] = uuidValue;
+
+            }
+            options.headers.set('X-ECOMP-RequestID', UUID.UUID());
+
+        } else {
+            // we have to add the token to the url object
+            var uuidValue = this.getUuidValue((<Request>request).url);
+            if(uuidValue!= ''){
+                 request.headers.set('X-ECOMP-ServiceID',uuidValue);
+
+            }
+            request.headers.set('X-ECOMP-RequestID', UUID.UUID());
+        }
+        return super.request(request, options).catch(this.catchAuthError(this));
+    }
+
+    private getUuidValue = (url: string) :string => {
+        let map:Dictionary<string, string> = this.sharingService.getUuidMap();
+        if (map && url.indexOf(sdc2Config.api.root) > 0) {
+            map.forEach((key:string) => {
+                if (url.indexOf(key) !== -1) {
+                    return this.sharingService.getUuidValue(key);
+                }
+            });
+        }
+        return '';
+    }
+
+    private catchAuthError(self:HttpService) {
+        // we have to pass HttpService's own instance here as `self`
+        return (res:Response) => {
+            console.log(res);
+            if (res.status === 401 || res.status === 403) {
+                // if not authenticated
+                console.log(res);
+            }
+            return Observable.throw(res);
+        };
+    }
+}
diff --git a/catalog-ui/src/app/ng2/services/mocks/properties.mock.ts b/catalog-ui/src/app/ng2/services/mocks/properties.mock.ts
new file mode 100644
index 0000000000..0ce253e80b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/mocks/properties.mock.ts
@@ -0,0 +1,16 @@
+// import { PropertiesResponse } from './../../services/responses/properties.response';
+//
+// export const PROPERTIES_RESPONSE: PropertiesResponse = {
+//    "status":"ok",
+//    "errorcode":0,
+//    "properties": [
+//        {"name": "name1"},
+//        {"name": "name2"}
+//    ]
+// };
+
+
+export const COMPONENT_INSTANCE_RESPONSE: any = [{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.724ef51f-7595-4336-a8ef-b144e1c937da.contrailv2vlansubinterface5","name":"CP2","normalizedName":"cp2","componentUid":"724ef51f-7595-4336-a8ef-b144e1c937da","creationTime":1489586037851,"modificationTime":1489586037851,"posX":"549","posY":"531","propertyValueCounter":1,"inputValueCounter":1,"originType":"CP","customizationUUID":"0222925a-06c6-48ca-8573-13ba3b650539"},{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.8ac5a229-60d8-4d7f-8e0f-b630da55c3ae.ldsa_os27","name":"VF22","normalizedName":"vf22","componentUid":"8ac5a229-60d8-4d7f-8e0f-b630da55c3ae","creationTime":1489590640842,"modificationTime":1489590640842,"posX":"644","posY":"359","propertyValueCounter":1,"inputValueCounter":1,"originType":"VF","customizationUUID":"fb34e6a1-f0cc-42e3-853f-178fb122d670"},{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.00ac92c4-a0c5-4567-aefb-f2b7f3fecba9.vl4","name":"VL1","normalizedName":"vl1","componentUid":"00ac92c4-a0c5-4567-aefb-f2b7f3fecba9","creationTime":1489586006630,"modificationTime":1489586006630,"posX":"486","posY":"530","propertyValueCounter":1,"inputValueCounter":1,"originType":"VL","customizationUUID":"8d156a97-38ca-4637-a6a6-9268dd708431"},{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.39bf293d-2aa9-4596-b85d-a6fdef18aadc.newvf428","name":"VF11","normalizedName":"vf11","componentUid":"39bf293d-2aa9-4596-b85d-a6fdef18aadc","creationTime":1489590742501,"modificationTime":1489590742501,"posX":"350","posY":"76","propertyValueCounter":1,"inputValueCounter":1,"originType":"VF","customizationUUID":"253f646d-87d0-4b84-bc20-20343b6e28a2"},{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.f8f30484-5761-4de8-9de8-12f288ee0a54.contrailport7","name":"CP1","normalizedName":"cp1","componentUid":"f8f30484-5761-4de8-9de8-12f288ee0a54","creationTime":1489587207447,"modificationTime":1489587207447,"posX":"418","posY":"531","propertyValueCounter":1,"inputValueCounter":1,"originType":"CP","customizationUUID":"206b4ffa-e520-496a-b57b-0c103eff8c17"},{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.16022d8c-80cf-46e5-a730-5b4f634ea905.extcp38","name":"ExtCP 38","normalizedName":"extcp38","componentUid":"16022d8c-80cf-46e5-a730-5b4f634ea905","creationTime":1489654844116,"modificationTime":1489654844116,"posX":"473","posY":"419","propertyValueCounter":5,"inputValueCounter":1,"originType":"CP","customizationUUID":"21ebc94a-65b9-463e-b696-07cea08f789a"},{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.f8f30484-5761-4de8-9de8-12f288ee0a54.contrailport44","name":"ContrailPort 44","normalizedName":"contrailport44","componentUid":"f8f30484-5761-4de8-9de8-12f288ee0a54","creationTime":1489939897435,"modificationTime":1489939897435,"posX":"480","posY":"265","propertyValueCounter":1,"inputValueCounter":1,"originType":"CP","customizationUUID":"607e5819-fa19-4aac-97f6-04f092493a02"},{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.8ac5a229-60d8-4d7f-8e0f-b630da55c3ae.ldsa_os6","name":"VF2","normalizedName":"vf2","componentUid":"8ac5a229-60d8-4d7f-8e0f-b630da55c3ae","creationTime":1489586613957,"modificationTime":1489586613957,"posX":"638","posY":"531","propertyValueCounter":1,"inputValueCounter":1,"originType":"VF","customizationUUID":"12501356-44cc-427b-8749-c114d3434271"},{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.8ac5a229-60d8-4d7f-8e0f-b630da55c3ae.ldsa_os8","name":"VF1","normalizedName":"vf1","componentUid":"8ac5a229-60d8-4d7f-8e0f-b630da55c3ae","creationTime":1489587393612,"modificationTime":1489587393612,"posX":"334","posY":"529","propertyValueCounter":1,"inputValueCounter":1,"originType":"VF","customizationUUID":"cbca1972-e64c-4119-a430-ec90aa1397a7"},{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.8ac5a229-60d8-4d7f-8e0f-b630da55c3ae.ldsa_os32","name":"VF12","normalizedName":"vf12","componentUid":"8ac5a229-60d8-4d7f-8e0f-b630da55c3ae","creationTime":1489591429630,"modificationTime":1489591429630,"posX":"367","posY":"269","propertyValueCounter":1,"inputValueCounter":1,"originType":"VF","customizationUUID":"ac9c77c1-e84d-4967-9ea2-d929b56d10a8"}];
+export const COMPONENT_INPUT_RESPONSE: any = [{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.extcp38_mac_requirements_mac_range_plan","type":"string","required":true,"definition":false,"description":"reference to a MAC address range plan","password":false,"name":"extcp38_mac_requirements_mac_range_plan","parentUniqueId":"23b78e64-1734-4898-889d-eab9eba50019"},{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.extcp38_order","type":"integer","required":true,"definition":false,"description":"The order of the CP on the compute instance (e.g. eth2).","schema":{"property":{"definition":true,"password":false}},"password":false,"name":"extcp38_order","parentUniqueId":"23b78e64-1734-4898-889d-eab9eba50019"},{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.extcp38_network_role_tag","type":"string","required":true,"definition":false,"description":"Must correlate to the set of defined “network-role” tag identifiers from the associated HEAT template","schema":{"property":{"definition":true,"password":false}},"password":false,"name":"extcp38_network_role_tag","parentUniqueId":"23b78e64-1734-4898-889d-eab9eba50019"}];
+export const COMPONENT_PROPERTIES_RESPONSE: any =[{"schema":{"property":{"password":false,"definition":false}},"password":false,"parentUniqueId":"b80765f0-ef2b-43b1-b658-04e13970b5cf","defaultValue":"{\"naming_policy\":\"ggg\",\"ecomp_generated_naming\":false,\"supplemental_data\":{\"fff\":\"44\",\"uuu\":\"56\"}}","name":"inner-map-1","definition":false,"type":"org.openecomp.datatypes.EcompNaming","uniqueId":"property.b80765f0-ef2b-43b1-b658-04e13970b5cf.inner-map-1","required":false},{"schema":{"property":{"password":false,"definition":false}},"password":false,"parentUniqueId":"b80765f0-ef2b-43b1-b658-04e13970b5cf","defaultValue":"{\"min_subnets_count\":1,\"supplemental_data\":{\"aa\":\"11\",\"bb\":\"22\"},\"cidr_mask\":23,\"dhcp_enabled\":false,\"ip_version\":3}","name":"inner-simple-map","definition":false,"type":"org.openecomp.datatypes.network.IPv4SubnetAssignments","uniqueId":"property.b80765f0-ef2b-43b1-b658-04e13970b5cf.inner-simple-map","required":false},{"schema":{"property":{"password":false,"definition":false,"type":"org.openecomp.datatypes.heat.network.AddressPair"}},"password":false,"parentUniqueId":"b80765f0-ef2b-43b1-b658-04e13970b5cf","defaultValue":"{\"aaa\":{\"mac_address\":\"34\",\"ip_address\":\"56\"},\"bbb\":{\"mac_address\":\"sddf\",\"ip_address\":\"dfdg\"}}","name":"data-type-map","definition":false,"type":"map","uniqueId":"property.b80765f0-ef2b-43b1-b658-04e13970b5cf.data-type-map","required":false},{"schema":{"property":{"password":false,"definition":false,"type":"string"}},"password":false,"parentUniqueId":"b80765f0-ef2b-43b1-b658-04e13970b5cf","defaultValue":"{\"www\":\"dfsdf\",\"aaaa\":\"ert\"}","name":"simple-map","definition":false,"type":"map","uniqueId":"property.b80765f0-ef2b-43b1-b658-04e13970b5cf.simple-map","required":false}];
+
diff --git a/catalog-ui/src/app/ng2/services/posts.service.ts b/catalog-ui/src/app/ng2/services/posts.service.ts
new file mode 100644
index 0000000000..dbfd44f219
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/posts.service.ts
@@ -0,0 +1,54 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/toPromise';
+import 'rxjs/Rx';
+import {Response, Headers, RequestOptions, Http} from '@angular/http';
+import { COMPONENT_INSTANCE_RESPONSE,COMPONENT_INPUT_RESPONSE,COMPONENT_PROPERTIES_RESPONSE } from './mocks/properties.mock';
+import { HttpService } from './http.service';
+import { sdc2Config } from './../../../main';
+import {IAppConfigurtaion} from "../../models/app-config";
+
+@Injectable()
+export class PostsService {
+
+    private base;
+
+    constructor(private http: HttpService) {
+        this.base = sdc2Config.api.root;
+    }
+
+    getAppVersion(): Observable<JSON> {
+        return this.http
+            .get(this.base + sdc2Config.api.GET_SDC_Version)
+            .map((res: Response) => res.json());
+    }
+
+    // getProperties(id:string): Observable<any> {
+    //    return this.http
+    //         .get(this.base + sdc2Config.api.GET_SDC_Version)
+    //         .map((res: Response) => res.json());
+    // }
+
+    getProperties(): Observable<any> {
+       return Observable.create(observer => {
+            observer.next(COMPONENT_PROPERTIES_RESPONSE);
+            observer.complete();
+        });
+    }
+
+    getInstance(): Observable<any> {
+        return Observable.create(observer => {
+            observer.next(COMPONENT_INSTANCE_RESPONSE);
+            observer.complete();
+        });
+    }
+
+    getInputs(): Observable<any> {
+        return Observable.create(observer => {
+            observer.next(COMPONENT_INPUT_RESPONSE);
+            observer.complete();
+        });
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/services/properties.service.ts b/catalog-ui/src/app/ng2/services/properties.service.ts
new file mode 100644
index 0000000000..638e537cd1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/properties.service.ts
@@ -0,0 +1,249 @@
+import { Injectable } from '@angular/core';
+import { DataTypeModel, PropertyFEModel, PropertyBEModel, SchemaProperty, DerivedFEProperty, DerivedFEPropertyMap, DerivedPropertyType, InputFEModel} from "app/models";
+import { DataTypeService } from "./data-type.service";
+import { PROPERTY_TYPES } from "app/utils";
+import { ContentAfterLastDotPipe } from "../pipes/contentAfterLastDot.pipe";
+import { UUID } from "angular2-uuid";
+
+@Injectable()
+export class PropertiesService {
+
+    constructor(private dataTypeService:DataTypeService, private contentAfterLastDotPipe:ContentAfterLastDotPipe) {
+    }
+
+    public getParentPropertyFEModelFromPath = (properties:Array<PropertyFEModel>, path:string) => {
+        let parent:PropertyFEModel = _.find(properties, (property:PropertyFEModel):boolean=>{
+            return property.name === path.substring(0, path.indexOf('#'));
+        });
+        return parent;
+    }
+
+    //undo disabling of parent and child props=
+    public undoDisableRelatedProperties = (property: PropertyFEModel, childPath?: string): void => {
+        property.isDisabled = false;
+        if (!childPath) {
+            property.isSelected = false;
+            property.flattenedChildren && property.flattenedChildren.map(child => child.isDisabled = false);
+        } else { //QND - unselect everything and then re-do the disabling of declared props. TODO: put a flag on propertyFEModel instead to indicate who's causing them to be disabled instead
+            property.flattenedChildren.filter(child => child.isDisabled && !child.isDeclared).map(child => child.isDisabled = false);
+            property.flattenedChildren.filter(child => child.isDeclared || child.isSelected).forEach((childProp) => { //handle brothers who are selected - redo their disabled relatives as well
+                this.disableRelatedProperties(property, childProp.propertiesName);
+            });
+        }
+    }
+
+    //disable parents and children of prop
+    public disableRelatedProperties = (property:PropertyFEModel, childPath?: string): void => {
+        if (!childPath) { //selecting the parent property
+            property.isSelected = true;
+            property.flattenedChildren && property.flattenedChildren.map(child => { child.isSelected = false; child.isDisabled = true; });
+        } else {
+            property.isSelected = false;
+            property.isDisabled = true;
+            property.flattenedChildren.filter((childProp: DerivedFEProperty) => {
+                return (childProp.propertiesName.indexOf(childPath + "#") > -1 //is child of prop to disable
+                    || childPath.indexOf(childProp.propertiesName + "#") > -1); //is parent of prop to disable
+            }).map((child: DerivedFEProperty) => { child.isSelected = false; child.isDisabled = true; });
+        }
+    }
+
+    public getCheckedProperties = (properties:Array<PropertyFEModel>): Array<PropertyBEModel> => {
+        let selectedProps: Array<PropertyBEModel> = [];
+        properties.forEach(prop => {
+            if (prop.isSelected && !prop.isDeclared && !prop.isDisabled) {
+                selectedProps.push(new PropertyBEModel(prop));
+            } else if(prop.flattenedChildren) {
+                prop.flattenedChildren.forEach((child) => {
+                    if (child.isSelected && !child.isDeclared && !child.isDisabled) {
+                        let childProp = new PropertyBEModel(prop, child); //create it from the parent
+                        selectedProps.push(childProp);
+                    }
+                })
+            }
+        });
+        return selectedProps;
+    }
+
+    /**
+     * Build hirarchy structure for the tree when user selects on table row.
+     * First create Array<SimpleFlatProperty> and insert also the parent (PropertyFEModel) to this array.
+     * The Array is flat and contains SimpleFlatProperty that has parentName and uniqueId.
+     * Now we build hirarchy from this Array (that includes childrens) and return it for the tree
+     *
+     * @argument property: PropertyFEModel - property contains flattenedChildren array of DerivedFEProperty
+     * @returns  Array<SimpleFlatProperty> - containing childrens Array<SimpleFlatProperty>, augmantin childrens to SimpleFlatProperty.
+     */
+    public getSimplePropertiesTree(property: PropertyFEModel, instanceName:string):Array<SimpleFlatProperty> {
+        // Build Array of SimpleFlatProperty before unflatten function
+        let flattenProperties:Array<SimpleFlatProperty> = [];
+        flattenProperties.push(new SimpleFlatProperty(property.uniqueId, property.name, property.name, '', instanceName)); // Push the root property
+        _.each(property.flattenedChildren, (child:DerivedFEProperty):void => {
+            flattenProperties.push(new SimpleFlatProperty(child.uniqueId, child.propertiesName, child.name, child.parentName, instanceName));
+        });
+
+        let tree = this.unflatten(flattenProperties, '', []);
+        return tree[0].childrens; // Return the childrens without the root.
+    }
+
+    /**
+     * Unflatten Array<SimpleFlatProperty> and build hirarchy.
+     * The result will be Array<SimpleFlatProperty> that augmantin with childrens for each SimpleFlatProperty.
+     */
+    private unflatten( array:Array<SimpleFlatProperty>, parent:any, tree?:any ):any {
+        tree = typeof tree!=='undefined' ? tree : [];
+        parent = typeof parent!=='undefined' && parent!=='' ? parent : { path: '' };
+
+        var childrens = _.filter( array, (child:SimpleFlatProperty):boolean => {
+            return child.parentName == parent.path;
+        });
+
+        if( !_.isEmpty( childrens )  ){
+            if( parent.path == '' ){
+                tree = childrens;
+            } else {
+                parent['childrens'] = childrens;
+            }
+            _.each( childrens, ( child ):void => {
+                this.unflatten( array, child );
+            });
+        }
+        return tree;
+    }
+
+    // TODO: To remove
+    // public convertPropertiesToFEAndInitialize(properties: Array<PropertyBEModel>): Array<PropertyFEModel> {
+    //     let props:Array<PropertyFEModel> = [];
+    //     _.forEach(properties, (property: PropertyFEModel, index: number) => {
+    //         props[index] = new PropertyFEModel(property);
+    //         this.initValueObjectRef(props[index]);
+    //         if (props[index].isDataType ||
+    //             ((props[index].type === PROPERTY_TYPES.MAP || props[index].type === PROPERTY_TYPES.LIST) && props[index].schema.property.isDataType)) {
+    //             props[index].valueObjectRef = props[index].valueObjectRef || {};
+    //             let defaultValueObject:any = props[index].defaultValue ? JSON.parse(props[index].defaultValue): null;
+    //             this.createPropertiesTreeForProp(props[index], true, defaultValueObject);
+    //         }
+    //     });
+    //     return props;
+    // }
+
+
+    /**
+     * Converts a property's map values to properties and adds them to property.childrenProperties
+     * @param property - property to add children to
+     * @param onlyFirstLevel - recursively retrieve properties for each dataType?
+     */
+    //TODO: To remove
+    // public createPropertyNodesForMapOfDataTypes(property: PropertyFEModel, onlyFirstLevel:boolean):void {
+    //     property.childrenProperties = [];
+    //     angular.forEach(property.valueObjectRef,function(itemInMap:any, keyInMap:string){
+    //         let newProperty: PropertyFEModel = new PropertyFEModel(keyInMap,
+    //             property.schema.property.type,
+    //             UUID.UUID(),
+    //             property,
+    //             property.valueObjectRef[keyInMap]);
+    //         !onlyFirstLevel && this.createPropertiesTreeForProp(newProperty);
+    //         property.childrenProperties.push(newProperty);
+    //     },this);
+    // }
+
+
+    /**
+     * Converts a property's list values to properties and adds them to property.childrenProperties
+     * @param property - property to add children to
+     * @param onlyFirstLevel - recursively retrieve properties for each dataType?
+     */
+    //TODO: To remove
+    // public createPropertyNodesForListOfDataTypes(property: PropertyFEModel, onlyFirstLevel:boolean):void {
+    //     property.childrenProperties = [];
+    //     property.valueObjectRef.forEach((itemInList:any, index:number):void =>{
+    //         let newProperty: PropertyFEModel = new PropertyFEModel(this.contentAfterLastDotPipe.transform(property.schema.property.type),
+    //             property.schema.property.type,
+    //             UUID.UUID(),
+    //             property,
+    //             property.valueObjectRef[index]);
+    //         !onlyFirstLevel && this.createPropertiesTreeForProp(newProperty);
+    //         property.childrenProperties.push(newProperty);
+    //     });
+    // }
+
+    // private checkIfPropertyDerivedFromSimpleAndUpdateProp(property:PropertyFEModel | SchemaProperty): boolean{
+    //     property.derivedFromSimpleTypeName = this.dataTypeService.getTypeForDataTypeDerivedFromSimple(property.type);
+    //     if(property.derivedFromSimpleTypeName){
+    //         property.isSimpleType = true;
+    //         property.isDataType = false;
+    //     }
+    //     return property.isSimpleType;
+    // }
+
+    // TODO: Remove
+    public createPropertiesTreeForProp(property: PropertyFEModel, onlyFirstLevel?: boolean, defaultValueObj?: any): void {
+    }
+
+    public getPropertyFEModelFromDerivedPropertyUniqueId(properties: Array<PropertyFEModel>, uniqueId: string): PropertyFEModel {
+        // _.each(properties, (property):void => {
+        //     property.flattenedChildren
+
+        // });
+
+        // let rootProperty = _.find(properties, (property):boolean => { return property.uniqueId === uniqueId; });
+        // if
+        return null;
+    }
+
+    /**
+     * Utilizes the dataTypeService to retrieve children properties from dataTypes recursively.
+     * @param property
+     * @param onlyFirstLevel
+     */
+    // TODO: To remove
+    // public createPropertiesTreeForProp(property: PropertyFEModel, onlyFirstLevel?:boolean, defaultValueObj?:any ):void{
+    //     if (property.isDataType && !this.checkIfPropertyDerivedFromSimpleAndUpdateProp(property)){
+    //         let dataType: DataTypeModel = this.dataTypeService.getDataTypeByTypeName(property.type);
+    //         property.childrenProperties = [];
+    //         let childrenProperties = this.dataTypeService.getDataTypePropertiesRecursively(dataType);
+    //         childrenProperties.forEach((childProperty: PropertyBEModel):void => {
+    //             let childDataTypePropertyObj: PropertyFEModel = new PropertyFEModel(childProperty.name, childProperty.type,UUID.UUID(),property, {}, childProperty.schema);
+    //             //init empty object in valueObjectRef[childProperty.name] because this property's children should has ref to this obj.
+    //             if(!property.valueObjectRef[childDataTypePropertyObj.name]){
+    //                 if ((childDataTypePropertyObj.isDataType && !this.checkIfPropertyDerivedFromSimpleAndUpdateProp(childDataTypePropertyObj))
+    //                     || childDataTypePropertyObj.type === PROPERTY_TYPES.MAP){
+    //                     property.valueObjectRef[childDataTypePropertyObj.name] = {};
+    //                 }else if(childDataTypePropertyObj.type === PROPERTY_TYPES.LIST){
+    //                     property.valueObjectRef[childDataTypePropertyObj.name] = [];
+    //                 }
+    //             }
+    //             childDataTypePropertyObj.valueObjectRef = property.valueObjectRef[childDataTypePropertyObj.name];
+    //             property.valueObjectRef[childDataTypePropertyObj.name] =  property.valueObjectRef[childProperty.name] || childDataTypePropertyObj.defaultValue;
+    //             if( !childDataTypePropertyObj.isDataType && defaultValueObj ){//init property default value
+    //                 childDataTypePropertyObj.defaultValue = JSON.stringify(defaultValueObj[childDataTypePropertyObj.name]);
+    //             }
+    //             property.childrenProperties.push(childDataTypePropertyObj);
+    //             !onlyFirstLevel && this.createPropertiesTreeForProp(childDataTypePropertyObj, false, (defaultValueObj ? defaultValueObj[childDataTypePropertyObj.name] : null));
+    //         });
+    //     } else if (property.type == PROPERTY_TYPES.MAP && property.schema.property.isDataType && !this.checkIfPropertyDerivedFromSimpleAndUpdateProp(property.schema.property)){
+    //         if( property.valueObjectRef && !_.isEmpty(property.valueObjectRef)){
+    //             this.createPropertyNodesForMapOfDataTypes(property, onlyFirstLevel);
+    //         }
+    //     } else if (property.type == PROPERTY_TYPES.LIST && property.schema.property.isDataType && !this.checkIfPropertyDerivedFromSimpleAndUpdateProp(property.schema.property)){
+    //         if( property.valueObjectRef && property.valueObjectRef.length){
+    //             this.createPropertyNodesForListOfDataTypes(property, onlyFirstLevel);
+    //         }
+    //     }
+    // }
+}
+
+export class SimpleFlatProperty {
+    uniqueId:string;
+    path:string;
+    name:string;
+    parentName:string;
+    instanceName:string;
+
+    constructor(uniqueId?:string, path?:string, name?: string, parentName?:string, instanceName?:string) {
+        this.uniqueId = uniqueId;
+        this.path = path;
+        this.name = name;
+        this.parentName = parentName;
+        this.instanceName = instanceName;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts b/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts
new file mode 100644
index 0000000000..7dcd95d712
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts
@@ -0,0 +1,77 @@
+/**
+ * Created by ob0695 on 4/18/2017.
+ */
+
+import { ArtifactGroupModel, PropertyModel, PropertiesGroup, AttributeModel, AttributesGroup, ComponentInstance,
+    InputModel, Module, ComponentMetadata, RelationshipModel, RequirementsGroup, CapabilitiesGroup,InputFEModel} from "app/models";
+import {CommonUtils} from "app/utils";
+import {Serializable} from "../utils/serializable";
+import {PropertyBEModel} from "../../../models/properties-inputs/property-be-model";
+
+export class ComponentGenericResponse  implements Serializable<ComponentGenericResponse> {
+
+    public metadata: ComponentMetadata;
+    public deploymentArtifacts:ArtifactGroupModel;
+    public artifacts:ArtifactGroupModel;
+    public toscaArtifacts:ArtifactGroupModel;
+    public componentInstancesProperties:PropertiesGroup;
+    public componentInstancesAttributes:AttributesGroup;
+    public componentInstancesRelations:Array<RelationshipModel>;
+    public componentInstances:Array<ComponentInstance>;
+    public inputs:Array<PropertyBEModel>;
+    public capabilities:CapabilitiesGroup;
+    public requirements:RequirementsGroup;
+    public properties:Array<PropertyModel>;
+    public attributes:Array<AttributeModel>;
+    public groups:Array<Module>;
+    public interfaces:any;
+    public additionalInformation:any;
+    public derivedList:Array<any>;
+
+    deserialize (response): ComponentGenericResponse {
+
+        if(response.componentInstancesProperties) {
+            this.componentInstancesProperties = new PropertiesGroup(response.componentInstancesProperties);
+        }
+        if(response.componentInstancesAttributes) {
+            this.componentInstancesAttributes = new AttributesGroup(response.componentInstancesAttributes);
+        }
+        if(response.componentInstances) {
+            this.componentInstances = CommonUtils.initComponentInstances(response.componentInstances);
+        }
+        if(response.componentInstancesRelations) {
+            this.componentInstancesRelations = CommonUtils.initComponentInstanceRelations(response.componentInstancesRelations);
+        }
+        if(response.deploymentArtifacts) {
+            this.deploymentArtifacts = new ArtifactGroupModel(response.deploymentArtifacts);
+        }
+        if(response.inputs) {
+            this.inputs = CommonUtils.initInputs(response.inputs);
+        }
+        if(response.attributes) {
+            this.attributes = CommonUtils.initAttributes(response.attributes);
+        }
+        if(response.artifacts) {
+            this.artifacts = new ArtifactGroupModel(response.artifacts);
+        }
+        if(response.properties) {
+            this.properties = CommonUtils.initProperties(response.properties);
+        }
+        if(response.capabilities) {
+            this.capabilities = new CapabilitiesGroup(response.capabilities);
+        }
+        if(response.requirements) {
+            this.requirements = new RequirementsGroup(response.requirements);
+        }
+        if(response.toscaArtifacts) {
+            this.toscaArtifacts = new ArtifactGroupModel(response.toscaArtifacts);
+        }
+        if(response.metadata) {
+            this.metadata = new ComponentMetadata().deserialize(response.metadata);
+        }
+        if(response.groups) {
+            this.groups = CommonUtils.initModules(response.groups);
+        }
+        return this;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/services/responses/properties.response.ts b/catalog-ui/src/app/ng2/services/responses/properties.response.ts
new file mode 100644
index 0000000000..a3d82500eb
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/responses/properties.response.ts
@@ -0,0 +1,7 @@
+export class PropertiesResponse {
+    properties: Array<Property>;
+}
+
+class Property {
+    name: string
+}
diff --git a/catalog-ui/src/app/ng2/services/utils/serializable.ts b/catalog-ui/src/app/ng2/services/utils/serializable.ts
new file mode 100644
index 0000000000..f8be120613
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/utils/serializable.ts
@@ -0,0 +1,6 @@
+/**
+ * Created by ob0695 on 4/26/2017.
+ */
+export interface Serializable<T> {
+    deserialize(input: Object): T;
+}
diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html
new file mode 100644
index 0000000000..efe830d6e0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html
@@ -0,0 +1,8 @@
+<div class="checkbox-container {{checkboxStyle}}">
+    <div class="checkbox-animation" [@checkEffect]="checked"></div>
+    <label class="checkbox-label" >
+        <input type="checkbox" class="checkbox-hidden" [ngModel]="checked" (ngModelChange)="toggleState($event)" [disabled]="disabled" />
+        <div class="checkbox-icon"></div>
+        <span *ngIf="label" class="checkbox-label-content">{{label}}</span>
+    </label>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less
new file mode 100644
index 0000000000..7ed8a22194
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less
@@ -0,0 +1,64 @@
+ @import '../../../../assets/styles/tlv-sprite';
+ 
+.checkbox-container {
+    display:inline-block;
+    position:relative;
+    text-align: left;
+    height: 20px;
+
+
+    .checkbox-icon {
+        display: inline-block;
+    }
+    
+    .checkbox-label {
+        font-weight: normal;
+        font-size: inherit;
+    }
+
+    .checkbox-label-content {
+        margin-left:2px;
+    }
+
+    .checkbox-icon::before {
+        .tlv-sprite;
+        background-position: -10px -60px;
+        width: 14px;
+        height: 14px;
+        content: '';
+        display: inline-block;
+        margin-right: 0px;
+        margin-top: -2px;
+        vertical-align: middle;
+    }
+
+    input[type=checkbox].checkbox-hidden {
+        width:0;
+        height:0;
+        display:none;
+        &:checked ~ .checkbox-icon::before{
+            background-position: -10px -120px;
+        }
+        &[disabled] ~ .checkbox-icon::before {
+            /* TODO: add disabled styles here */
+            background-image: none;
+            background-color: #EFEFEF;
+            border-radius: 2px;
+            border: solid #CCC 1px;
+        }
+    }
+    
+    .checkbox-animation {
+        background-color: #009fdb;
+        position: absolute;
+        left: 2px;
+        top: 5px;
+        width:10px;
+        height:10px;
+        border-radius: 50%;
+        z-index: 1;
+        pointer-events: none;
+        opacity:0;
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts
new file mode 100644
index 0000000000..5a9954c336
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts
@@ -0,0 +1,30 @@
+import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
+import { trigger, state, style, transition, animate, keyframes } from '@angular/core';
+
+@Component({
+    selector: 'checkbox',
+    templateUrl: './checkbox.component.html',
+    styleUrls: ['./checkbox.component.less'],
+    encapsulation: ViewEncapsulation.None,
+    animations: [
+        trigger('checkEffect', [
+            state('true', style({ position: 'absolute', left: '2px', top: '5px', width: '10px', height: '10px', display: 'none', opacity: '.5' })),
+            state('false', style({ left: '-18px', top: '-15px', height: '50px', width: '50px', opacity: '0' })),
+            transition('1 => 0', animate('150ms ease-out')),
+            transition('0 => 1', animate('150ms ease-in'))
+        ])
+    ]
+})
+export class CheckboxComponent  {
+    
+    @Input() checkboxStyle: string;
+    @Input() label: string;
+    @Input() checked: boolean;
+    @Input() disabled: boolean;
+    @Output() checkedChange: EventEmitter<any> = new EventEmitter<any>();
+
+    toggleState(newValue:boolean) {
+        this.checkedChange.emit(newValue);
+    }
+}
+
diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.module.ts b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.module.ts
new file mode 100644
index 0000000000..116aa7f025
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.module.ts
@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { CheckboxComponent } from './checkbox.component';
+
+
+@NgModule({
+    imports: [CommonModule, BrowserModule, FormsModule],
+    declarations: [CheckboxComponent],
+    bootstrap: [],
+    exports: [CheckboxComponent]
+})
+export class CheckboxModule { }
+
+/** README: **/
+
+/** USAGE Example:
+ *In page.module.ts: import CheckboxModule
+ *In HTML:
+ *<checkbox checkboxStyle="class-goes-here" [label]="'Text goes here'" [disabled]="variable-goes-here" [(checked)]="default-or-variable-goes-here" (checkedChange)="change-event-goes-here()"></checkbox>
+ */
+
+/**STYLING: (ViewEncapsulation is set to None to allow styles to be overridden or customized)
+ *
+ * To create or override styles:
+ * Use /deep/ or >>> prefix to override styles via other components stylesheets
+ */
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar-routes.config.ts b/catalog-ui/src/app/ng2/shared/navbar/navbar-routes.config.ts
new file mode 100644
index 0000000000..d8a21e66c8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/navbar/navbar-routes.config.ts
@@ -0,0 +1,7 @@
+import { MenuType, RouteInfo } from './navbar.metadata';
+
+export const ROUTES: RouteInfo[] = [
+  { path: 'page1', title: 'Logo', menuType: MenuType.BRAND },
+  { path: 'page1', title: 'Page 1', menuType: MenuType.LEFT },
+  { path: 'page2', title: 'Page 2', menuType: MenuType.LEFT }
+];
diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.html b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.html
new file mode 100644
index 0000000000..d783be4c27
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.html
@@ -0,0 +1,23 @@
+<nav class="navbar navbar-dark">
+  <div class="clearfix">
+    <button (click)="isCollapsed = !isCollapsed"
+            class="navbar-toggler pull-xs-right hidden-sm-up" type="button"
+            aria-controls="bd-main-nav"
+            aria-label="Toggle navigation">
+      {{menuIcon}}
+    </button>
+    <a (click)="isCollapsed = true" class="navbar-brand hidden-sm-up" [routerLink]="[brandMenu.path]">
+      {{brandMenu.title}}
+    </a>
+  </div>
+  <div class="navbar-toggleable-xs navbar-collapse" id="bd-main-nav" [attr.aria-expanded]="!isCollapsed" [ngClass]="{collapse: isCollapsed}">
+    <ul class="nav navbar-nav">
+      <li (click)="isCollapsed = true" class="nav-item" routerLinkActive="active">
+        <a class="navbar-brand hidden-xs-down" [routerLink]="[brandMenu.path]">{{brandMenu.title}}</a>
+      </li>
+      <li (click)="isCollapsed = true" *ngFor="let menuItem of menuItems" class="nav-item" routerLinkActive="active" [ngClass]="getMenuItemClasses(menuItem)">
+        <a class="nav-item nav-link" [routerLink]="[menuItem.path]" routerLinkActive="active">{{menuItem.title}}</a>
+      </li>
+    </ul>
+  </div>
+</nav>
diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.less b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.less
new file mode 100644
index 0000000000..3e5165b798
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.less
@@ -0,0 +1,11 @@
+.active {
+  color: #ffffff;
+}
+.navbar-toggler {
+  border: solid 1px #cccccc;
+  color: #ff0000;
+}
+.navbar {
+  background-color: #0000ff;
+  border-radius: 0;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts
new file mode 100644
index 0000000000..b174f9d18d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts
@@ -0,0 +1,32 @@
+import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+import { ROUTES } from './navbar-routes.config';
+import { MenuType, RouteInfo } from './navbar.metadata';
+
+@Component({
+  selector: 'app-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: [ './navbar.component.less' ],
+  encapsulation: ViewEncapsulation.None
+})
+export class NavbarComponent implements OnInit {
+  public menuItems: Array<RouteInfo>;
+  public brandMenu: RouteInfo;
+  isCollapsed = true;
+
+  constructor() {}
+
+  ngOnInit() {
+    this.menuItems = ROUTES.filter(menuItem => menuItem.menuType !== MenuType.BRAND);
+    this.brandMenu = ROUTES.filter(menuItem => menuItem.menuType === MenuType.BRAND)[0];
+  }
+
+  public get menuIcon(): string {
+    return this.isCollapsed ? '☰' : '✖';
+  }
+
+  public getMenuItemClasses(menuItem: any) {
+    return {
+      'pull-xs-right': this.isCollapsed && menuItem.menuType === MenuType.RIGHT
+    };
+  }
+}
diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.metadata.ts b/catalog-ui/src/app/ng2/shared/navbar/navbar.metadata.ts
new file mode 100644
index 0000000000..245d0e6cfe
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/navbar/navbar.metadata.ts
@@ -0,0 +1,11 @@
+export enum MenuType {
+  BRAND,
+  LEFT,
+  RIGHT
+}
+
+export interface RouteInfo {
+  path: string;
+  title: string;
+  menuType: MenuType;
+}
diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts b/catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts
new file mode 100644
index 0000000000..18120a61fb
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { NavbarComponent } from "./navbar.component";
+
+@NgModule({
+  imports: [
+    RouterModule,
+    CommonModule
+  ],
+  declarations: [ NavbarComponent ],
+  exports: [
+    NavbarComponent
+  ]
+})
+export class NavbarModule {}
diff --git a/catalog-ui/src/app/ng2/shared/shared.module.ts b/catalog-ui/src/app/ng2/shared/shared.module.ts
new file mode 100644
index 0000000000..3e59e04441
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/shared.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { NavbarModule } from "./navbar/navbar.module";
+
+@NgModule({
+  declarations: [
+
+  ],
+  imports: [
+    CommonModule,
+    RouterModule,
+    NavbarModule
+  ],
+  exports: [
+  ]
+})
+
+export class SharedModule {}
diff --git a/catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts b/catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts
new file mode 100644
index 0000000000..06dcfa0b16
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'tab',
+    template: `
+    <div *ngIf="active" class="tab-content">
+      <ng-content></ng-content>
+    </div>
+    `,
+    encapsulation: ViewEncapsulation.None
+})
+export class Tab {
+    @Input('tabTitle') title: string;
+    @Input() active:boolean = false;
+    @Input() indication?: number;
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.html b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.html
new file mode 100644
index 0000000000..3e263a3862
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.html
@@ -0,0 +1,9 @@
+<div class="tabs {{tabStyle}}">
+    <div class="tab" *ngFor="let tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active">
+        {{tab.title}}
+        <div class="tab-indication" *ngIf="tab.indication" [@indicatorAnimation]="tab.indication">{{tab.indication}}</div>
+    </div>
+</div>
+<div class="tab-content-container">
+    <ng-content></ng-content>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less
new file mode 100644
index 0000000000..aa59428a64
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less
@@ -0,0 +1,85 @@
+@import '../../../../assets/styles/variables';
+
+.tabs {
+    display:flex;
+    flex: 0 0 auto;
+    flex-direction:row;
+}
+
+.tab {
+    flex: 1 0 auto;
+    cursor: pointer;
+    padding: .5em;
+}
+
+.tab-content-container {
+    flex: 1;
+    height: 100%;
+    overflow: hidden;
+    width:100%;
+}
+
+.tab-content {
+    height:100%;
+}
+
+/*Tab styles*/
+.tabs{
+    &.round-tabs .tab{
+        background-color: #f8f8f8;
+        color: #959595;
+        border: solid 1px #d2d2d2;
+        border-bottom:none;
+        border-left:none;
+        position:relative;
+
+        &:first-child {
+            border-top-left-radius: 8px;
+            border-left:solid 1px #d2d2d2;
+        }
+        &:last-child {
+            border-top-right-radius: 8px;
+        }
+
+        &.active {
+            background-color:#009fdb;
+            color:#e9e9e9;
+            border-color:#009fdb;
+        }
+
+        .tab-indication {
+            position: absolute;
+            top: -10px;
+            background-color: #009fdb;
+            right: 10px;
+            padding: 2px 0;
+            border-radius: 15px;
+            border: solid 1px #d2d2d2;
+            color:white;
+            width: 25px;
+            height: 25px;
+            text-align: center;
+            
+        }
+    }
+
+    &.simple-tabs .tab {
+        font-size: 12px;
+        color: @main_color_n;
+
+        &:after {
+            display:block;
+            content: '';
+            border-bottom: 2px solid @main_color_a;
+            transform: scaleX(0);
+            transition: transform 200ms ease-in-out;
+        }
+
+        &.active {
+            color: @main_color_a;
+            &:after {
+                transform: scaleX(1);
+            }
+        }
+    }
+}
diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts
new file mode 100644
index 0000000000..dc5616c6cb
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts
@@ -0,0 +1,58 @@
+import { Component, ContentChildren, QueryList, AfterContentInit, Input, Output, EventEmitter } from '@angular/core';
+import { Tab } from './tab/tab.component';
+import { ViewEncapsulation } from '@angular/core';
+import { trigger, state, style, transition, animate, keyframes } from '@angular/core';
+
+@Component({
+    selector: 'tabs',
+    templateUrl: './tabs.component.html',
+    styleUrls: ['./tabs.component.less'],
+    encapsulation: ViewEncapsulation.None,
+    animations: [
+        trigger('indicatorAnimation', [
+            transition(':enter', [style({ transform: 'translateY(-50%)', opacity: 0 }), animate('250ms', style({ transform: 'translateY(0)', opacity: 1 })) ]),
+            transition(':leave', [style({ opacity: 1 }), animate('500ms', style({ opacity: 0 })) ])
+        ])
+    ]
+})
+export class Tabs implements AfterContentInit {
+
+    @Input() tabStyle: string;
+    @Input() hideIndicationOnTabChange?: boolean = false;
+    @ContentChildren(Tab) tabs: QueryList<Tab>;
+    @Output() tabChanged: EventEmitter<Tab> = new EventEmitter<Tab>();
+
+
+    ngAfterContentInit() {  
+        //after contentChildren are set, determine active tab. If no active tab set, activate the first one
+        let activeTabs = this.tabs.filter((tab) => tab.active);
+ 
+        if (activeTabs.length === 0) {
+            this.selectTab(this.tabs.first);
+        }
+    }
+
+    selectTab(tab: Tab) {
+        //activate the tab the user clicked.
+        this.tabs.toArray().forEach(tab => {
+            tab.active = false;
+            if (this.hideIndicationOnTabChange && tab.indication) {
+                tab.indication = null;
+            }
+        });
+        tab.active = true;
+        this.tabChanged.emit(tab);
+    }
+
+    triggerTabChange(tabTitle) {
+        this.tabs.toArray().forEach(tab => {
+            tab.active = (tab.title == tabTitle) ? true : false;
+        });
+    }
+
+    setTabIndication(tabTitle:string, indication?:number) {
+        let selectedTab: Tab = this.tabs.toArray().find(tab => tab.title == tabTitle);
+        selectedTab.indication = indication || null;
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts b/catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts
new file mode 100644
index 0000000000..36c7335fde
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts
@@ -0,0 +1,35 @@
+import { Component, NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+
+import { Tabs } from './tabs.component';
+import { Tab } from './tab/tab.component';
+
+
+@NgModule({
+    imports: [BrowserModule],
+    declarations: [Tabs, Tab],
+    bootstrap: [],
+    exports: [Tabs, Tab]
+})
+export class TabModule { }
+
+/** README: **/
+
+/** USAGE Example:
+ *In page.module.ts: import TabModule
+ *In HTML:
+ *<tabs tabStyle="class-goes-here" (tabChanged)="tabChangedEvent($event) [hideIndicationOnTabChange]="optional-boolean">
+ *   <tab [tabTitle]="'Tab 1'">Content of tab 1</tab>
+ *   <tab tabTitle="Tab 2" >Content of tab 2</tab>
+ *   ...
+ *</tabs>
+ */
+
+/**STYLING: (ViewEncapsulation is set to None to allow styles to be overridden or customized)
+ * Existing options:
+ * tabStyle="round-tabs" will provide generic rounded tab look
+ *
+ * To create or override styles:
+ * Parent div has class ".tabs". Each tab has class ".tab". Active tab has class ".active".
+ * Use /deep/ or >>> prefix to override styles via other components stylesheets
+ */
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts b/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts
new file mode 100644
index 0000000000..c8c1d9b721
--- /dev/null
+++ b/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts
@@ -0,0 +1,51 @@
+/**
+ * Created by rc2122 on 4/6/2017.
+ */
+import {DataTypesService} from "../../services/data-types-service";
+import ICacheObject = angular.ICacheObject;
+import {SharingService} from "../../services/sharing-service";
+import {CookieService} from "../../services/cookie-service";
+
+/** Services we need to upgrade from angular1 to angular2 - in the future we need to rewrite them all to angular2 **/
+
+export function dataTypesServiceFactory(cacheObj: ICacheObject) {
+    return cacheObj.get('Sdc.Services.DataTypesService');
+}
+
+export function sharingServiceFactory(cacheObj: ICacheObject) {
+    return cacheObj.get('Sdc.Services.SharingService');
+}
+
+export function cookieServiceFactory(cacheObj: ICacheObject) {
+    return cacheObj.get('Sdc.Services.CookieService');
+}
+
+export function stateParamsServiceFactory(cacheObj: ICacheObject) {
+    return cacheObj.get('$stateParams');
+}
+
+export const DataTypesServiceProvider = {
+    provide: DataTypesService,
+    useFactory: dataTypesServiceFactory,
+    deps: ['$injector']
+};
+
+
+export const SharingServiceProvider = {
+    provide: SharingService,
+    useFactory: sharingServiceFactory,
+    deps: ['$injector']
+};
+
+
+export const CookieServiceProvider = {
+    provide: CookieService,
+    useFactory: cookieServiceFactory,
+    deps: ['$injector']
+};
+
+export const StateParamsServiceFactory = {
+    provide: '$stateParams',
+    useFactory: stateParamsServiceFactory,
+    deps: ['$injector']
+};
-- 
cgit 1.2.3-korg