diff --git a/catalog-ui/src/app/models/componentsInstances/componentInstance.ts b/catalog-ui/src/app/models/componentsInstances/componentInstance.ts
index e91fcc9..2e0c1a5 100644
--- a/catalog-ui/src/app/models/componentsInstances/componentInstance.ts
+++ b/catalog-ui/src/app/models/componentsInstances/componentInstance.ts
@@ -34,7 +34,6 @@
 import {ResourceType, ComponentType} from "../../utils/constants";
 import {Capability} from "../capability";
 import {Requirement} from "../requirement";
-import {DirectivesEnum} from "../../ng2/components/logic/service-dependencies/directive-option";
 
 export interface IComponentInstance {
 
@@ -237,12 +236,8 @@
        return Array.isArray(this.directives) && this.directives.length > 0;
     }
 
-    public markAsSelect = () : void => {
-        this.directives.push(DirectivesEnum.SELECT);
-    }
-
-    public markAsSubstitute = () : void => {
-        this.directives.push(DirectivesEnum.SUBSTITUTE);
+    public setDirectiveValue = (selectedDirective: string) : void => {
+        this.directives.push(selectedDirective);
     }
 
     public unmarkAsDependent = (actualDirectiveValue: string) : void => {
diff --git a/catalog-ui/src/app/models/directives.ts b/catalog-ui/src/app/models/directives.ts
new file mode 100644
index 0000000..5293e1f
--- /dev/null
+++ b/catalog-ui/src/app/models/directives.ts
@@ -0,0 +1,22 @@
+/*
+* ============LICENSE_START=======================================================
+*  Copyright (C) 2020 Nordix Foundation. All rights reserved.
+*  ================================================================================
+*  Licensed under the Apache License, Version 2.0 (the "License");
+*  you may not use this file except in compliance with the License.
+*  You may obtain a copy of the License at
+*
+*        http://www.apache.org/licenses/LICENSE-2.0
+*  Unless required by applicable law or agreed to in writing, software
+*  distributed under the License is distributed on an "AS IS" BASIS,
+*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+*  See the License for the specific language governing permissions and
+*  limitations under the License.
+*
+*  SPDX-License-Identifier: Apache-2.0
+*  ============LICENSE_END=========================================================
+*/
+
+interface ListDirectiveResponse {
+  directives: string[];
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/directive-option.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/directive-option.ts
deleted file mode 100644
index f2c4b1f..0000000
--- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/directive-option.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export enum DirectivesEnum {
-    SELECT = 'select',
-    SELECTABLE = 'selectable',
-    SUBSTITUTE = 'substitute',
-    SUBSTITUTABLE = 'substitutable',
-}
-
-export namespace DirectiveValue {
-
-  export function values() {
-    return Object.keys(DirectivesEnum).filter(
-        (type) => isNaN(<any>type) && type !== 'values'
-    );
-  }
-}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html
index c3d4817..ef5e29b 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html
@@ -4,7 +4,7 @@
     <select name="singleSelect" id="singleSelect" ng-model="data.singleSelect"
             (change)='onOptionsSelected($event)'>
       <option>Select Directive</option>
-      <option *ngFor="let item of directiveValues.values()">{{item}}</option>
+      <option class="directives-options" *ngFor="let item of directiveOptions">{{item}}</option>
     </select>
   </div>
 
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
index 00be76c..9b15358 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
@@ -113,3 +113,8 @@
     }
   }
 }
+
+
+.directives-options {
+  text-transform: uppercase;
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts
index 90f82f8..ff5207b 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts
@@ -29,7 +29,6 @@
 import { ComponentMetadata } from '../../../../models/component-metadata';
 import { ServiceInstanceObject } from '../../../../models/service-instance-properties-and-interfaces';
 import { TopologyTemplateService } from '../../../services/component-services/topology-template.service';
-import {DirectivesEnum, DirectiveValue} from "./directive-option";
 
 export class ConstraintObject {
     servicePropertyName: string;
@@ -129,6 +128,7 @@
     capabilities: string = 'capabilities';
     properties: string = 'properties';
     private componentInstancesConstraints: ConstraintObject[] = [];
+    directiveOptions: string[];
 
     @Input() readonly: boolean;
     @Input() compositeService: ComponentMetadata;
@@ -136,7 +136,7 @@
     @Input() selectedInstanceSiblings: ServiceInstanceObject[];
     @Input() selectedInstanceConstraints: ConstraintObject[] = [];
     @Input() selectedInstanceProperties: PropertyBEModel[] = [];
-    @Input() directiveValues: any = DirectiveValue;
+    @Output() updateRulesListEvent: EventEmitter<ConstraintObject[]> = new EventEmitter<ConstraintObject[]>();
     @Output() updateNodeFilterProperties: EventEmitter<ConstraintObject[]> = new EventEmitter<ConstraintObject[]>();
     @Output() updateNodeFilterCapabilities: EventEmitter<ConstraintObject[]> = new EventEmitter<ConstraintObject[]>();
     @Output() loadRulesListEvent:EventEmitter<any> = new EventEmitter();
@@ -146,6 +146,7 @@
     }
 
     ngOnInit() {
+        this.loadDirectives();
         this.isLoading = false;
         this.operatorTypes = [
             {label: '>', value: OPERATOR_TYPES.GREATER_THAN},
@@ -161,6 +162,12 @@
         });
     }
 
+    loadDirectives() {
+        this.topologyTemplateService.getDirectiveList().subscribe((data: string[]) => {
+            this.directiveOptions = data;
+        })
+    }
+
     ngOnChanges(changes) {
         if (changes.currentServiceInstance) {
             this.currentServiceInstance = changes.currentServiceInstance.currentValue;
@@ -239,12 +246,7 @@
         if (this.isDependent) {
             this.openUpdateDependencyModal().instance.open();
         }
-        if (DirectivesEnum.SELECT == newDirectiveValue.toLowerCase() ||
-            DirectivesEnum.SELECTABLE == newDirectiveValue.toLowerCase()) {
-            this.currentServiceInstance.markAsSelect();
-        } else {
-            this.currentServiceInstance.markAsSubstitute();
-        }
+        this.currentServiceInstance.setDirectiveValue(newDirectiveValue);
     }
 
     updateComponentInstance(isDependentOrigVal: boolean, rulesListOrig: ConstraintObject[]) {
diff --git a/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts b/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts
index a7c8022..01b8ead 100644
--- a/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts
@@ -63,6 +63,7 @@
 import { ComponentMetadata } from "../../../models/component-metadata";
 import { PolicyInstance } from "../../../models/graph/zones/policy-instance";
 import { PropertyBEModel } from "../../../models/properties-inputs/property-be-model";
+import {map} from "rxjs/operators";
 
 /* we need to use this service from now, we will remove component.service when we finish remove the angular1.
  The service is duplicated since we can not use downgrades service with NGXS*/
@@ -529,4 +530,10 @@
     deleteRequirement(component: Component, reqId: string): Observable<Requirement> {
         return this.http.delete<Requirement>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/requirements/' + reqId);
     }
+
+    getDirectiveList(): Observable<string[]> {
+        return this.http.get<ListDirectiveResponse>(this.baseUrl + "directives")
+        .pipe(map(response => response.directives));
+    }
+
 }