diff --git a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-email-input/editable-email-input.component.ts b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-email-input/editable-email-input.component.ts
index 90acff24891741f308475961bd5ed9d663043e4a..7b57fa5ba7e2e2900b8fcaa93078c1728e885180 100644
--- a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-email-input/editable-email-input.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-email-input/editable-email-input.component.ts
@@ -57,7 +57,7 @@ export const EDITABLE_EMAIL_INPUT_VALUE_ACCESSOR: any = {
 
 export class EditableEmailInputComponent extends EditableFieldComponent {
 
-  @ViewChild('select') select: MatSelect;
+  @ViewChild('select', {static: false}) select: MatSelect;
 
   constructor(formBuilder: FormBuilder, elementRef: ElementRef) {
     super(elementRef);
diff --git a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-field.component.ts b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-field.component.ts
index 00d899e55b8e5364fdc26a42dceba9355be10193..91d5d0b478f5d4a57de6e57b08aa909c209ac9bc 100644
--- a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-field.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-field.component.ts
@@ -41,8 +41,9 @@ import { AsyncValidatorFn, ControlValueAccessor, FormControl, ValidatorFn } from
 
 import { VitamUIFieldErrorComponent } from '../vitamui-field-error/vitamui-field-error.component';
 
-@Directive()
-// tslint:disable-next-line:directive-class-suffix
+@Directive({
+  selector: '[appEditableFieldComponent]'
+})
 export class EditableFieldComponent implements AfterContentInit, ControlValueAccessor {
 
   @Input() label: string;
@@ -70,7 +71,7 @@ export class EditableFieldComponent implements AfterContentInit, ControlValueAcc
   @Output() editOpen = new EventEmitter<void>();
   @Output() editClose = new EventEmitter<boolean>();
 
-  @ViewChild(CdkConnectedOverlay) cdkConnectedOverlay: CdkConnectedOverlay;
+  @ViewChild(CdkConnectedOverlay, {static: false}) cdkConnectedOverlay: CdkConnectedOverlay;
   @ContentChildren(VitamUIFieldErrorComponent) errors: QueryList<VitamUIFieldErrorComponent>;
 
   @HostBinding('class.readonly') readonly = false;
diff --git a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-field.module.ts b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-field.module.ts
index c43cba4e370abe5af1d507df1295fa0af47cdefd..f20cc4856e56979579333813db41bc80a8cb6e82 100644
--- a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-field.module.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-field.module.ts
@@ -61,6 +61,7 @@ import { EditableToggleGroupComponent } from './editable-toggle-group/editable-t
 import { EmailsInputModule } from './emails-input/emails-input.module';
 import { LevelInputModule } from './level-input/level-input.module';
 import { MultipleEmailInputComponent } from './multiple-email-input/multiple-email-input.component';
+import { EditableFieldComponent } from './editable-field.component';
 
 
 @NgModule({
@@ -94,6 +95,7 @@ import { MultipleEmailInputComponent } from './multiple-email-input/multiple-ema
     HumanizedDurationPipe,
     MultipleEmailInputComponent,
     SubLevelPipe,
+    EditableFieldComponent
   ],
   exports: [
     EditableInputComponent,
diff --git a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-file/editable-file.component.ts b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-file/editable-file.component.ts
index 01263e7933783150a5299d31fce94c4ca3c77a2a..f1aabf7c795ee29bcff7e99547a9bbb98508c1db 100644
--- a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-file/editable-file.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-file/editable-file.component.ts
@@ -57,7 +57,7 @@ export class EditableFileComponent extends EditableFieldComponent {
   @Input() accept: string;
   file: File;
 
-  @ViewChild('fileInput') fileInput: ElementRef;
+  @ViewChild('fileInput', {static: false}) fileInput: ElementRef;
 
   constructor(elementRef: ElementRef) {
     super(elementRef);
diff --git a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-input/editable-input.component.ts b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-input/editable-input.component.ts
index 0b8b659c77aa4e585d6c90907411331cc179449f..287c49d5145f3ac1b15855bf887b1302a656f376 100644
--- a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-input/editable-input.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-input/editable-input.component.ts
@@ -56,7 +56,7 @@ export class EditableInputComponent extends EditableFieldComponent {
 
   @Input() maxlength: number;
   @Input() type = 'text';
-  @ViewChild('input') private input: ElementRef;
+  @ViewChild('input', {static: false}) private input: ElementRef;
 
   constructor(elementRef: ElementRef) {
     super(elementRef);
diff --git a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-select/editable-select.component.ts b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-select/editable-select.component.ts
index 3ee72d6fc62f493f5545100e40544c793bf3d305..5521a31c53f3325770eedd52d1ca932d62bdfe4f 100644
--- a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-select/editable-select.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-select/editable-select.component.ts
@@ -63,7 +63,7 @@ export class EditableSelectComponent extends EditableFieldComponent {
 
   @ContentChildren(EditableOptionComponent) options: QueryList<EditableOptionComponent>;
 
-  @ViewChild('select') select: MatSelect;
+  @ViewChild('select', {static: false}) select: MatSelect;
   @ViewChild('confirmDialog', { static: true }) confirmDialog: TemplateRef<EditableFieldComponent>;
 
   @Input() showConfirmDialog = false;
diff --git a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-textarea/editable-textarea.component.ts b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-textarea/editable-textarea.component.ts
index 67cb8b6e1893406766c20e6f8541e68dff8c36a1..3cd1d9c8a54e22e9e15fcb3102a8b5d1621f08ac 100644
--- a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-textarea/editable-textarea.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-textarea/editable-textarea.component.ts
@@ -55,7 +55,7 @@ export const EDITABLE_TEXTAREA_VALUE_ACCESSOR: any = {
 export class EditableTextareaComponent extends EditableFieldComponent {
 
   @Input() maxlength: number;
-  @ViewChild('input') private input: ElementRef;
+  @ViewChild('input', {static: false}) private input: ElementRef;
 
   constructor(elementRef: ElementRef) {
     super(elementRef);
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input-positive-number.component.ts b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input-positive-number.component.ts
index e6db47639a95b53b337b628384c06a8be14f6c2c..eff968482f6de92a97a282085fb3f095dbe7bea2 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input-positive-number.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input-positive-number.component.ts
@@ -69,7 +69,7 @@ export class VitamUIInputPositiveNumberComponent implements ControlValueAccessor
   set disabled(value: boolean) { this._disabled = coerceBooleanProperty(value); }
   // tslint:disable-next-line:variable-name
   private _disabled = false;
-  @ViewChild('vitamUIInputPositiveNumber') private input: ElementRef;
+  @ViewChild('vitamUIInputPositiveNumber', {static: false}) private input: ElementRef;
 
   @HostBinding('class.vitamui-focused') focused = false;
   @HostBinding('class.vitamui-float') labelFloat = false;
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input.component.ts b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input.component.ts
index c1f2ef513ec0f638ced5bb451fe694d75734b6ae..e6d41eede1e7bc9e66d0e7f26c7ffdcef88886a9 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input.component.ts
@@ -69,7 +69,7 @@ export class VitamUIInputComponent implements ControlValueAccessor, OnInit {
   set disabled(value: boolean) { this._disabled = coerceBooleanProperty(value); }
   // tslint:disable-next-line:variable-name
   private _disabled = false;
-  @ViewChild('vitamUIInput') private input: ElementRef;
+  @ViewChild('vitamUIInput', {static: false}) private input: ElementRef;
 
   @HostBinding('class.vitamui-focused') focused = false;
   @HostBinding('class.vitamui-float') labelFloat = false;
diff --git a/ui/ui-frontend-common/src/app/modules/sidenav-page.class.ts b/ui/ui-frontend-common/src/app/modules/sidenav-page.class.ts
index 4f277322bbd940a7782995331fa82fc75f0a9bad..009ba322773fa220e1c6b4a36de7415bed4dacb6 100644
--- a/ui/ui-frontend-common/src/app/modules/sidenav-page.class.ts
+++ b/ui/ui-frontend-common/src/app/modules/sidenav-page.class.ts
@@ -43,13 +43,14 @@ import { takeUntil } from 'rxjs/operators';
 import { AppRootComponent } from './app-root-component.class';
 import { GlobalEventService } from './global-event.service';
 
-@Directive()
-// tslint:disable-next-line:directive-class-suffix
+@Directive({
+  selector: '[appSidenavPage]'
+})
 export class SidenavPage<T> extends AppRootComponent implements AfterViewInit, OnDestroy {
 
   openedItem: T;
 
-  @ViewChild('panel') panel: MatSidenav;
+  @ViewChild('panel', {static: false}) panel: MatSidenav;
 
   private destroy = new Subject<void>();
 
diff --git a/ui/ui-frontend-common/src/app/modules/vitamui-common.module.ts b/ui/ui-frontend-common/src/app/modules/vitamui-common.module.ts
index 10c2ddac9e10446b987b1ef7a44e2e93ee5e1c70..2f00996a5155187f89f70cef89451567a3b9fa32 100644
--- a/ui/ui-frontend-common/src/app/modules/vitamui-common.module.ts
+++ b/ui/ui-frontend-common/src/app/modules/vitamui-common.module.ts
@@ -97,6 +97,7 @@ import { SecurityModule } from './security/security.module';
 import { StartupService } from './startup.service';
 import { SubrogationModule } from './subrogation/subrogation.module';
 import { VitamUIHttpInterceptor } from './vitamui-http-interceptor';
+import { SidenavPage } from './sidenav-page.class';
 
 export function startupServiceFactory(startupService: StartupService) {
   // leave it like this due to run packagr issue :
@@ -110,6 +111,7 @@ export function startupServiceFactory(startupService: StartupService) {
   declarations: [
     BlankComponent,
     ErrorDialogComponent,
+    SidenavPage
   ],
   imports: [
     CommonModule,
diff --git a/ui/ui-frontend-common/testing/src/vitamui-common-test.module.ts b/ui/ui-frontend-common/testing/src/vitamui-common-test.module.ts
index 518275d46ff94fb9274226dc891a258899e2e551..3de6ed8c0374f5be493ea7d5a8ea1e8a8fa27b2d 100644
--- a/ui/ui-frontend-common/testing/src/vitamui-common-test.module.ts
+++ b/ui/ui-frontend-common/testing/src/vitamui-common-test.module.ts
@@ -178,7 +178,9 @@ export class VitamUISlideToggleStubComponent implements ControlValueAccessor {
 
 // Editable fields
 
-@Directive()
+@Directive({
+  selector: '[EditableFieldStubComponent]'
+})
 // tslint:disable-next-line:directive-class-suffix
 export class EditableFieldStubComponent implements ControlValueAccessor {
   @Input() validator: ValidatorFn;
@@ -353,6 +355,7 @@ export class RowCollapseTriggerForStubDirective {
     StepperStubComponent,
     StrongifyStubPipe,
     TruncateStubPipe,
+    EditableFieldStubComponent
   ],
   exports: [
     ApplicationSelectContentStubComponent,