first ng update => angular@8

.vscode/settings.json

@@ -7,6 +7,6 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "vscode.typescript-language-features"
   }
 }

apps/sales/src/app/components/breadcrumbs/breadcrumbs.component.ts

@@ -33,7 +33,7 @@ import { FILIALE_LANDING_PAGE } from '../../core/utils/app.constants';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BreadcrumbsComponent implements OnInit, OnDestroy, AfterViewInit {
-  @ViewChild('container', { read: ElementRef }) public container: ElementRef<any>;
+  @ViewChild('container', { read: ElementRef, static: false }) public container: ElementRef<any>;
   @Select(SharedSelectors.getBreadcrumbs) breadcrumbs$: Observable<Breadcrumb[]>;
   @Select(SharedSelectors.getCurrentProcess) currentProcess$: Observable<Process>;
   module: ModuleSwitcher;
@@ -94,7 +94,7 @@ export class BreadcrumbsComponent implements OnInit, OnDestroy, AfterViewInit {
     return false;
   }
 
-  constructor(private store: Store, private router: Router, private cdrf: ChangeDetectorRef, private appService: AppService) {}
+  constructor(private store: Store, private router: Router, private cdrf: ChangeDetectorRef, private appService: AppService) { }
 
   getBreadcrumbsFromCurentProcess() {
     this.currentProcess$
@@ -127,7 +127,7 @@ export class BreadcrumbsComponent implements OnInit, OnDestroy, AfterViewInit {
             setTimeout(() => {
               try {
                 this.initNavigationalArrow();
-              } catch (error) {}
+              } catch (error) { }
             }, 1000);
           }
         }
@@ -188,7 +188,7 @@ export class BreadcrumbsComponent implements OnInit, OnDestroy, AfterViewInit {
       setTimeout(() => {
         try {
           this.initNavigationalArrow();
-        } catch (error) {}
+        } catch (error) { }
       }, 100);
     }
   }

apps/sales/src/app/components/header/header.component.ts

@@ -18,12 +18,12 @@ import { BreadcrumbsState } from '../../core/store/state/breadcrumbs.state';
   styleUrls: ['./header.component.scss'],
 })
 export class HeaderComponent implements OnInit, OnDestroy {
-  @ViewChild('logOut') logOutDialog: LogOutComponent;
+  @ViewChild('logOut', { static: false }) logOutDialog: LogOutComponent;
   doubleChoiceSwitch: DoubleChoiceSwitch;
   module: ModuleSwitcher = ModuleSwitcher.Customer;
   destroy$ = new Subject();
 
-  constructor(private moduleSwitcherService: ModuleSwitcherService, private store: Store, private router: Router) {}
+  constructor(private moduleSwitcherService: ModuleSwitcherService, private store: Store, private router: Router) { }
 
   customer = 'Kunden';
 

apps/sales/src/app/components/printer-selection/printer-selection.component.ts

@@ -31,14 +31,14 @@ export class PrinterSelectionComponent implements OnInit, OnDestroy {
   printingRequested = false;
   submited = false;
   @Output() print: EventEmitter<string> = new EventEmitter();
-  @ViewChild('printBtn') printBtn: ButtonComponent;
+  @ViewChild('printBtn', { static: false }) printBtn: ButtonComponent;
 
   constructor(
     private printerService: PrinterService,
     private modalService: ModalService
-  ) {}
+  ) { }
 
-  ngOnInit() {}
+  ngOnInit() { }
 
   printerSelected(value: string | number) {
     this.selected = value;

apps/sales/src/app/components/process-header/process-header.component.ts

@@ -21,7 +21,7 @@ import { ModuleSwitcher } from '../../core/models/app-switcher.enum';
 })
 export class ProcessHeaderComponent implements OnInit, OnDestroy {
   startProcessLabel = 'VORGANG STARTEN';
-  @ViewChild('panel', { read: ElementRef }) public panel: ElementRef<any>;
+  @ViewChild('panel', { read: ElementRef, static: false }) public panel: ElementRef<any>;
   @Select(ProcessSelectors.getProcesses) process$: Observable<Process[]>;
   @Select(ProcessSelectors.getCurrentProcess) selectedProcess$: Observable<Process>;
   @Input() module: ModuleSwitcher;
@@ -43,14 +43,14 @@ export class ProcessHeaderComponent implements OnInit, OnDestroy {
   private iPadDetected = false;
   private iPadEventRecieved = false;
 
-  constructor(private store: Store, private router: Router, private cdr: ChangeDetectorRef, private windowRef: WindowRef) {}
+  constructor(private store: Store, private router: Router, private cdr: ChangeDetectorRef, private windowRef: WindowRef) { }
 
   addProcess() {
     const itemNo = !this.processes
       ? 0
       : this.processes && this.processes.length === 0
-      ? 1
-      : this.processes[this.processes.length - 1].id + 1;
+        ? 1
+        : this.processes[this.processes.length - 1].id + 1;
     const newProcess = <Process>{
       id: itemNo,
       new: true,

apps/sales/src/app/components/process-tab/process-tab.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, AfterViewInit } from '@angular/core';
+import { Component, OnInit, Input, ViewChild, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, AfterViewInit, ViewRef } from '@angular/core';
 import { Process } from '../../core/models/process.model';
 import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
 import { Store, Select } from '@ngxs/store';
@@ -21,7 +21,7 @@ import { AppState } from '../../core/store/state/app.state';
 import { AppSetCurrentProcess } from '../../core/store/actions/app.actions';
 import { ProcessSelectors } from '../../core/store/selectors/process.selectors';
 import { ModuleSwitcher } from '../../core/models/app-switcher.enum';
-import { ViewRef_ } from '@angular/core/src/view';
+
 import { USER_FORM_STATE_KEY, USER_EXTRAS_FORM_STATE_KEY, USER_ERRORS_FORM_STATE_KEY } from '../../core/utils/app.constants';
 import { DeleteFormState } from '../../core/store/actions/forms.actions';
 
@@ -57,13 +57,13 @@ export class ProcessTabComponent implements OnInit, OnDestroy, AfterViewInit {
   @Select(SharedSelectors.cartHasDownloadForProcess) cartHasDownloadForProcess$: Observable<{ status: boolean; currentProcessId: number }>;
   @Select(AppState.getCurrentProcessId) currentProcessId$: Observable<number>;
   destroy$ = new Subject();
-  @ViewChild('deleteporcessdialog')
+  @ViewChild('deleteporcessdialog', { static: false })
   processDeleteDialogComponent: ProcessDeleteDialogComponent;
   cartCount = 0;
   cartanimation = '';
   cartBackgroundForDownload = false;
 
-  constructor(private store: Store, private router: Router, private cdr: ChangeDetectorRef, private route: ActivatedRoute) {}
+  constructor(private store: Store, private router: Router, private cdr: ChangeDetectorRef, private route: ActivatedRoute) { }
   isProcessFinished = this.router.url === '/cart/confirmation';
 
   deleteProcess(process: Process) {
@@ -184,7 +184,7 @@ export class ProcessTabComponent implements OnInit, OnDestroy, AfterViewInit {
 
   detectChanges() {
     setTimeout(() => {
-      if (this.cdr !== null && this.cdr !== undefined && !(this.cdr as ViewRef_).destroyed) {
+      if (this.cdr !== null && this.cdr !== undefined && !(this.cdr as ViewRef).destroyed) {
         this.cdr.detectChanges();
       }
     }, 0);

apps/sales/src/app/core/error/component/error.service.ts

@@ -1,5 +1,4 @@
-import { Injectable, ViewChild } from '@angular/core';
-import { ErrorComponent } from './error.component';
+import { Injectable } from '@angular/core';
 import { Subject } from 'rxjs';
 
 @Injectable({ providedIn: 'root' })
@@ -7,7 +6,7 @@ export class ErrorService {
   private errors = new Subject<{ code: number; message: string; invalidProperties: string; logout: boolean }>();
   private recovery = new Subject<boolean>();
 
-  constructor() {}
+  constructor() { }
 
   public addErrors = (code: number, errors: string, invalidProperties: string, logout = false): void =>
     // tslint:disable-next-line: semicolon

apps/sales/src/app/modules/barcode-search/components/barcode-scanner/barcode-scanner.component.ts

@@ -11,7 +11,7 @@ import { takeUntil } from 'rxjs/operators';
 })
 export class BarcodeScannerComponent implements OnInit, OnDestroy {
   @Output() scan: EventEmitter<string> = new EventEmitter();
-  @ViewChild('scanner') scanner: ZXingScannerComponent;
+  @ViewChild('scanner', { static: false }) scanner: ZXingScannerComponent;
 
   allowedFormats = [BarcodeFormat.QR_CODE, BarcodeFormat.EAN_13, BarcodeFormat.CODE_128, BarcodeFormat.UPC_A];
   enabled = false;

apps/sales/src/app/modules/barcode-search/components/customer-card-manual-entry/customer-card-manual-entry.component.ts

@@ -1,9 +1,8 @@
-import { Component, OnInit, ViewChildren, ElementRef, QueryList, AfterViewInit, OnDestroy, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, AfterViewInit, OnDestroy, Output, EventEmitter } from '@angular/core';
 import { ModalService } from '@libs/ui';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { isNullOrUndefined } from 'util';
-import { Code128Reader } from '@zxing/library';
 
 @Component({
   selector: 'app-customer-card-manual-entry',
@@ -12,7 +11,7 @@ import { Code128Reader } from '@zxing/library';
 })
 export class CustomerCardManualEntryComponent implements OnInit, AfterViewInit, OnDestroy {
   id = 'customer-card-manual-entry-modal';
-  constructor(private modalService: ModalService) {}
+  constructor(private modalService: ModalService) { }
   focusManager$ = new Subject<number>();
   destroy$ = new Subject();
   @Output() scanner = new EventEmitter();
@@ -30,7 +29,7 @@ export class CustomerCardManualEntryComponent implements OnInit, AfterViewInit,
     return status;
   }
 
-  ngOnInit() {}
+  ngOnInit() { }
 
   ngAfterViewInit() {
     this.focusManager$.pipe(takeUntil(this.destroy$)).subscribe(codeIndex => {

apps/sales/src/app/modules/barcode-search/pages/article-barcode-search/barcode-search.component.ts

@@ -21,13 +21,13 @@ import { ItemDTO } from '@swagger/cat';
   styleUrls: ['barcode-search.component.scss'],
 })
 export class BarcodeSearchComponent implements OnInit, OnDestroy {
-  @ViewChild('scanner') scanner: BarcodeScannerScanditComponent;
+  @ViewChild('scanner', { static: false }) scanner: BarcodeScannerScanditComponent;
   @Select(ProcessSelectors.getProcesses) processes$: Observable<Process[]>;
   processes: Process[] = [];
   scanningVisible = false;
   destroy$ = new Subject();
 
-  constructor(private store: Store, private router: Router, protected productService: ProductService) {}
+  constructor(private store: Store, private router: Router, protected productService: ProductService) { }
 
   ngOnInit() {
     this.processes$.pipe(takeUntil(this.destroy$)).subscribe((p: Process[]) => (this.processes = p));

apps/sales/src/app/modules/barcode-search/pages/customer-card-barcode-search/customer-card-barcode-search.component.ts

@@ -23,10 +23,10 @@ import { ErrorService } from 'apps/sales/src/app/core/error/component/error.serv
   styleUrls: ['customer-card-barcode-search.component.scss'],
 })
 export class CustomerCardBarcodeSearchComponent implements OnInit, OnDestroy, AfterViewInit {
-  @ViewChild('scanner') scanner: CustomerCardScannerScanditComponent;
-  @ViewChild('manualentry') manualentry: CustomerCardManualEntryComponent;
-  @ViewChild('searchCardEmptyModal') searchCardEmptyModal: CustomerCardSearchEmptyModalComponent;
-  @ViewChild('searchCardErrorModal') searchCardErrorModal: CustomerCardSearchErrorModalComponent;
+  @ViewChild('scanner', { static: false }) scanner: CustomerCardScannerScanditComponent;
+  @ViewChild('manualentry', { static: false }) manualentry: CustomerCardManualEntryComponent;
+  @ViewChild('searchCardEmptyModal', { static: false }) searchCardEmptyModal: CustomerCardSearchEmptyModalComponent;
+  @ViewChild('searchCardErrorModal', { static: false }) searchCardErrorModal: CustomerCardSearchErrorModalComponent;
   @Select(ProcessSelectors.getProcesses) processes$: Observable<Process[]>;
   processes: Process[] = [];
   destroy$ = new Subject();
@@ -42,7 +42,7 @@ export class CustomerCardBarcodeSearchComponent implements OnInit, OnDestroy, Af
     private cdrf: ChangeDetectorRef,
     private windowRef: WindowRef,
     private errorService: ErrorService
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.processes$.pipe(takeUntil(this.destroy$)).subscribe((p: Process[]) => (this.processes = p));

apps/sales/src/app/modules/cart/components/change-order-type/change-order-type.component.ts

@@ -8,6 +8,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   OnDestroy,
+  ViewRef,
 } from '@angular/core';
 import { ModalService } from '@libs/ui';
 import { Store, Select } from '@ngxs/store';
@@ -30,7 +31,7 @@ import { CheckoutService } from 'apps/sales/src/app/core/services/checkout.servi
 import { SearchDropdownComponent } from '@libs/ui/lib/search-dropdown';
 import { ItemDTO } from '@swagger/cat';
 import { allowedAvailabilityStatusCodes } from '../../../../core/utils/product.util';
-import { ViewRef_ } from '@angular/core/src/view';
+
 
 export interface ProcessAvailibilityMapper {
   branchId: number;
@@ -46,7 +47,7 @@ export interface ProcessAvailibilityMapper {
 })
 export class ChangeOrderTypeComponent implements OnInit, OnDestroy {
   @Select(BranchSelectors.getBranches) branches$: Observable<{ [key: number]: BranchDTO }>;
-  @ViewChild('branchesdropdown') branchesdd: SearchDropdownComponent;
+  @ViewChild('branchesdropdown', { static: false }) branchesdd: SearchDropdownComponent;
 
   private _item: CartReviewItem;
   @Input() set item(val: CartReviewItem) {
@@ -143,7 +144,7 @@ export class ChangeOrderTypeComponent implements OnInit, OnDestroy {
     private cdr: ChangeDetectorRef,
     private branchService: BranchService,
     private checkoutService: CheckoutService
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.currency = this.book.catalogAvailability.price.value.currency;
@@ -464,7 +465,7 @@ export class ChangeOrderTypeComponent implements OnInit, OnDestroy {
 
   detectChanges() {
     setTimeout(() => {
-      if (this.cdr !== null && this.cdr !== undefined && !(this.cdr as ViewRef_).destroyed) {
+      if (this.cdr !== null && this.cdr !== undefined && !(this.cdr as ViewRef).destroyed) {
         this.cdr.detectChanges();
       }
     }, 0);

apps/sales/src/app/modules/cart/components/delivery-cart-row/delivery-cart-row.component.ts

@@ -3,12 +3,12 @@ import { CartReviewItem } from '../../pages/cart-review/cart-review.component';
 import { ProductAvailabilityService } from '../../../../core/services/product-availability.service';
 import { BranchSelectors } from '../../../../core/store/selectors/branch.selector';
 import { map, tap, take } from 'rxjs/operators';
-import { ChangeDetectionStrategy, Component, Input, OnInit, Output, EventEmitter, ChangeDetectorRef, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit, Output, EventEmitter, ChangeDetectorRef, ViewChild, ViewRef } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { DeleteProductFromCart } from '../../../../core/store/actions/cart.actions';
 import { of, Observable } from 'rxjs';
 import { ChangeOrderTypeComponent } from '../change-order-type/change-order-type.component';
-import { ViewRef_ } from '@angular/core/src/view';
+
 import { DeleteDropdownComponent } from '@libs/ui';
 import { allowedAvailabilityStatusCodes } from 'apps/sales/src/app/core/utils/product.util';
 import { DeliveryOption } from 'apps/sales/src/app/core/models/delivery-option.model';
@@ -22,8 +22,8 @@ import { AvailabilityDTO } from '@swagger/cat';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DeliveryCartRowComponent implements OnInit {
-  @ViewChild('changeOrder') changeOrderDialog: ChangeOrderTypeComponent;
-  @ViewChild('ref') deleteDropdown: DeleteDropdownComponent;
+  @ViewChild('changeOrder', { static: false }) changeOrderDialog: ChangeOrderTypeComponent;
+  @ViewChild('ref', { static: false }) deleteDropdown: DeleteDropdownComponent;
   @Input() item: CartReviewItem;
   @Output() details = new EventEmitter();
   @Output() editAdress = new EventEmitter();
@@ -61,7 +61,7 @@ export class DeliveryCartRowComponent implements OnInit {
     .fill(0)
     .map((_, i) => i + 1);
 
-  constructor(private availabilityService: ProductAvailabilityService, private store: Store, private cdRef: ChangeDetectorRef) {}
+  constructor(private availabilityService: ProductAvailabilityService, private store: Store, private cdRef: ChangeDetectorRef) { }
 
   ngOnInit() {
     if (this.item.orderTypeChanged) {
@@ -160,7 +160,7 @@ export class DeliveryCartRowComponent implements OnInit {
   // This method is needed because of the console error ViewDestroyedError: Attempt to use a destroyed view
   detectChanges() {
     setTimeout(() => {
-      if (this.cdRef !== null && this.cdRef !== undefined && !(this.cdRef as ViewRef_).destroyed) {
+      if (this.cdRef !== null && this.cdRef !== undefined && !(this.cdRef as ViewRef).destroyed) {
         this.cdRef.detectChanges();
       }
     }, 0);

apps/sales/src/app/modules/cart/components/delivery-cart/delivery-cart.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, OnDestroy, Output, EventEmitter, Input } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, OnDestroy, Output, EventEmitter, Input, ViewRef } from '@angular/core';
 import { Cart } from '../../../../core/models/cart.model';
 import { DeliveryOption } from '../../../../core/models/delivery-option.model';
 import {
@@ -21,7 +21,7 @@ import { Address } from '../../../../core/models/user.model';
 import { isArrayMinLength } from '../../../../core/utils/app.utils';
 import { DeleteProductFromCart } from 'apps/sales/src/app/core/store/actions/cart.actions';
 import { cartItem } from 'apps/sales/src/app/shared/animations/cart-item.animation';
-import { ViewRef_ } from '@angular/core/src/view';
+
 
 @Component({
   selector: 'app-delivery-cart',
@@ -40,7 +40,7 @@ export class DeliveryCartComponent implements OnInit, OnDestroy {
   lastDeletedItemIndex = -1;
   destroy$ = new Subject();
 
-  constructor(private store: Store, private router: Router, private cdr: ChangeDetectorRef) {}
+  constructor(private store: Store, private router: Router, private cdr: ChangeDetectorRef) { }
 
   ngOnInit() {
     this.delivery$ = this.cartData$.pipe(
@@ -165,7 +165,7 @@ export class DeliveryCartComponent implements OnInit, OnDestroy {
 
   detectChanges() {
     setTimeout(() => {
-      if (this.cdr !== null && this.cdr !== undefined && !(this.cdr as ViewRef_).destroyed) {
+      if (this.cdr !== null && this.cdr !== undefined && !(this.cdr as ViewRef).destroyed) {
         this.cdr.detectChanges();
       }
     }, 0);

apps/sales/src/app/modules/cart/components/download-cart-row/download-cart-row.component.ts

@@ -12,7 +12,7 @@ import { Store } from '@ngxs/store';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DownloadCartRowComponent implements OnInit {
-  @ViewChild('ref') deleteDropdown: DeleteDropdownComponent;
+  @ViewChild('ref', { static: false }) deleteDropdown: DeleteDropdownComponent;
   @Input() item: CartReviewItem;
   @Output() details = new EventEmitter();
   @Output() editAdress = new EventEmitter();
@@ -50,7 +50,7 @@ export class DownloadCartRowComponent implements OnInit {
   quantityError;
   availableQuantity = [1];
 
-  constructor(private store: Store, private cdRef: ChangeDetectorRef) {}
+  constructor(private store: Store, private cdRef: ChangeDetectorRef) { }
 
   ngOnInit() {
     this.deactivateTenPlus = true;

apps/sales/src/app/modules/cart/components/notification-settings/notification-settings.component.scss

@@ -83,7 +83,7 @@ label {
   position: relative;
 
   &.view {
-    /deep/ app-checkbox {
+    ::ng-deep app-checkbox {
       .option .checkbox .checkbox-icon {
         opacity: 0;
       }

apps/sales/src/app/modules/cart/components/notification-settings/notification-settings.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ChangeDetectorRef, ChangeDetectionStrategy, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, ChangeDetectorRef, ChangeDetectionStrategy, Output, EventEmitter, OnDestroy, ViewRef } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, AbstractControl } from '@angular/forms';
 import { Select, Store } from '@ngxs/store';
 import { take, takeUntil } from 'rxjs/operators';
@@ -7,7 +7,7 @@ import { SetUserDetails } from '../../../../core/store/actions/customer.actions'
 import { CustomValidators } from '../../../../shared/validation/custom-validation';
 import { SharedSelectors } from '../../../../core/store/selectors/shared.selectors';
 import { User } from '../../../../core/models/user.model';
-import { ViewRef_ } from '@angular/core/src/view';
+
 import { ProcessSelectors } from 'apps/sales/src/app/core/store/selectors/process.selectors';
 import { SetCustomerNotificationFlag } from 'apps/sales/src/app/core/store/actions/process.actions';
 
@@ -48,7 +48,7 @@ export class NotificationSettingsComponent implements OnInit, OnDestroy {
 
   @Output() notificationInEditMode = new EventEmitter<boolean>();
 
-  constructor(private fb: FormBuilder, private store: Store, private cdr: ChangeDetectorRef) {}
+  constructor(private fb: FormBuilder, private store: Store, private cdr: ChangeDetectorRef) { }
 
   ngOnInit() {
     if (this.customer) {
@@ -283,7 +283,7 @@ export class NotificationSettingsComponent implements OnInit, OnDestroy {
 
   detectChanges() {
     setTimeout(() => {
-      if (this.cdr !== null && this.cdr !== undefined && !(this.cdr as ViewRef_).destroyed) {
+      if (this.cdr !== null && this.cdr !== undefined && !(this.cdr as ViewRef).destroyed) {
         this.cdr.detectChanges();
       }
     }, 0);

apps/sales/src/app/modules/cart/components/pick-up-cart-row/pick-up-cart-row.component.ts

@@ -10,6 +10,7 @@ import {
   ChangeDetectorRef,
   ViewChild,
   OnDestroy,
+  ViewRef,
 } from '@angular/core';
 import { ProductAvailabilityService } from '../../../../core/services/product-availability.service';
 import { map, tap, take, takeUntil } from 'rxjs/operators';
@@ -17,7 +18,7 @@ import { Store } from '@ngxs/store';
 import { DeleteProductFromCart } from '../../../../core/store/actions/cart.actions';
 import { ChangeOrderTypeComponent } from '../change-order-type/change-order-type.component';
 import { Subject, of, Observable } from 'rxjs';
-import { ViewRef_ } from '@angular/core/src/view';
+
 import { DeleteDropdownComponent } from '@libs/ui';
 import { allowedAvailabilityStatusCodes } from 'apps/sales/src/app/core/utils/product.util';
 import { DeliveryOption } from 'apps/sales/src/app/core/models/delivery-option.model';
@@ -31,8 +32,8 @@ import { AvailabilityDTO } from '@swagger/cat';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PickUpCartRowComponent implements OnInit, OnDestroy {
-  @ViewChild('changeOrder') changeOrderDialog: ChangeOrderTypeComponent;
-  @ViewChild('ref') deleteDropdown: DeleteDropdownComponent;
+  @ViewChild('changeOrder', { static: false }) changeOrderDialog: ChangeOrderTypeComponent;
+  @ViewChild('ref', { static: false }) deleteDropdown: DeleteDropdownComponent;
   @Input() item: CartReviewItem;
   @Output() details = new EventEmitter();
   @Output() editAdress = new EventEmitter();
@@ -71,7 +72,7 @@ export class PickUpCartRowComponent implements OnInit, OnDestroy {
     .fill(0)
     .map((_, i) => i + 1);
 
-  constructor(private availabilityService: ProductAvailabilityService, private store: Store, private cdRef: ChangeDetectorRef) {}
+  constructor(private availabilityService: ProductAvailabilityService, private store: Store, private cdRef: ChangeDetectorRef) { }
 
   ngOnInit() {
     if (this.item.orderTypeChanged) {
@@ -172,7 +173,7 @@ export class PickUpCartRowComponent implements OnInit, OnDestroy {
   // This method is needed because of the console error ViewDestroyedError: Attempt to use a destroyed view
   detectChanges() {
     setTimeout(() => {
-      if (this.cdRef !== null && this.cdRef !== undefined && !(this.cdRef as ViewRef_).destroyed) {
+      if (this.cdRef !== null && this.cdRef !== undefined && !(this.cdRef as ViewRef).destroyed) {
         this.cdRef.detectChanges();
       }
     }, 0);

apps/sales/src/app/modules/cart/components/take-now-cart-row/take-now-cart-row.component.ts

@@ -1,6 +1,6 @@
 import { UpdateCartEntryQuantity } from './../../../../core/store/actions/cart-entry.actions';
 import { CartReviewItem } from '../../pages/cart-review/cart-review.component';
-import { Component, OnInit, Input, EventEmitter, Output, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild } from '@angular/core';
+import { Component, OnInit, Input, EventEmitter, Output, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, ViewRef } from '@angular/core';
 import { isNullOrUndefined } from 'util';
 import { ProductService } from '../../../../core/services/product.service';
 import { map, tap, take, switchMap } from 'rxjs/operators';
@@ -9,7 +9,7 @@ import { DeleteProductFromCart } from '../../../../core/store/actions/cart.actio
 import { of, Observable, Subject } from 'rxjs';
 import { ChangeOrderTypeComponent } from '../change-order-type/change-order-type.component';
 import { ProductAvailabilityService } from '../../../../core/services/product-availability.service';
-import { ViewRef_ } from '@angular/core/src/view';
+
 import { DeleteDropdownComponent } from '@libs/ui';
 
 @Component({
@@ -19,8 +19,8 @@ import { DeleteDropdownComponent } from '@libs/ui';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TakeNowCartRowComponent implements OnInit {
-  @ViewChild('changeOrder') changeOrderDialog: ChangeOrderTypeComponent;
-  @ViewChild('ref') deleteDropdown: DeleteDropdownComponent;
+  @ViewChild('changeOrder', { static: false }) changeOrderDialog: ChangeOrderTypeComponent;
+  @ViewChild('ref', { static: false }) deleteDropdown: DeleteDropdownComponent;
   @Input() item: CartReviewItem;
   @Output() details = new EventEmitter();
   @Output() editAdress = new EventEmitter();
@@ -51,7 +51,7 @@ export class TakeNowCartRowComponent implements OnInit {
     private availabilityService: ProductAvailabilityService,
     private store: Store,
     private cdRef: ChangeDetectorRef
-  ) {}
+  ) { }
 
   ngOnInit() {
     if (this.item.orderTypeChanged) {
@@ -139,7 +139,7 @@ export class TakeNowCartRowComponent implements OnInit {
   // This method is needed because of the console error ViewDestroyedError: Attempt to use a destroyed view
   detectChanges() {
     setTimeout(() => {
-      if (this.cdRef !== null && this.cdRef !== undefined && !(this.cdRef as ViewRef_).destroyed) {
+      if (this.cdRef !== null && this.cdRef !== undefined && !(this.cdRef as ViewRef).destroyed) {
         this.cdRef.detectChanges();
       }
     }, 0);

apps/sales/src/app/modules/cart/pages/cart-confirmation/cart-confirmation.component.ts

@@ -37,7 +37,7 @@ export interface OrderData {
 export class CartConfirmationComponent implements OnInit, OnDestroy {
   @Select(SharedSelectors.getConfirmedCart) cartData$: Observable<ProcessCartConfirmed>;
   @Select(SharedSelectors.getFinishedOrderCustomer) customer$: Observable<User>;
-  @ViewChild('printModal') printModal: PrinterSelectionComponent;
+  @ViewChild('printModal', { static: false }) printModal: PrinterSelectionComponent;
 
   destroy$ = new Subject();
   customer: User;
@@ -68,7 +68,7 @@ export class CartConfirmationComponent implements OnInit, OnDestroy {
   showOverviewTaxMessage = false;
   firstLoad = true;
 
-  constructor(private store: Store, private printer: PrinterService) {}
+  constructor(private store: Store, private printer: PrinterService) { }
 
   ngOnInit() {
     this.customer$

apps/sales/src/app/modules/cart/pages/cart-review/cart-review.component.ts

@@ -73,9 +73,9 @@ export const cartToCartReviewArray = (cart: Cart[]) => {
 })
 export class CartReviewComponent implements OnInit, OnDestroy {
   @Select(SharedSelectors.getCart) cartData$: Observable<ProcessCart>;
-  @ViewChild('payMethod') payMethodDialog: PayMethodComponent;
-  @ViewChild('printModal') printModal: PrinterSelectionComponent;
-  @ViewChild('continue') continueBtn: ButtonComponent;
+  @ViewChild('payMethod', { static: false }) payMethodDialog: PayMethodComponent;
+  @ViewChild('printModal', { static: false }) printModal: PrinterSelectionComponent;
+  @ViewChild('continue', { static: false }) continueBtn: ButtonComponent;
 
   deliveryCount$: Observable<number>;
   takeNowCount$: Observable<number>;
@@ -290,10 +290,10 @@ export class CartReviewComponent implements OnInit, OnDestroy {
         ? 'stop'
         : animation
       : changingDelivery
-      ? this.takeNowLength === 0
-        ? 'stop'
-        : animation
-      : 'stop';
+        ? this.takeNowLength === 0
+          ? 'stop'
+          : animation
+        : 'stop';
     return status;
   }
 

apps/sales/src/app/modules/customer/components/create-customer-card/create-customer-card.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, HostListener, Renderer, ChangeDetectorRef, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, OnDestroy, HostListener, Renderer, ChangeDetectorRef, ViewChild, AfterViewInit, ViewRef } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, AbstractControl } from '@angular/forms';
 import { Store, Select } from '@ngxs/store';
 import {
@@ -31,7 +31,7 @@ import { AddressDTO } from '@swagger/crm';
 import { ButtonComponent, SelectComponent } from '@libs/ui';
 import { AppService } from 'apps/sales/src/app/core/services/app.service';
 import { AddressSugestionsComponent } from '../address-sugestions/address-sugestions.component';
-import { ViewRef_ } from '@angular/core/src/view';
+
 import { ErrorService } from 'apps/sales/src/app/core/error/component/error.service';
 import { FormsSelectors } from 'apps/sales/src/app/core/store/selectors/forms.selectors';
 import { SaveFormState, DeleteFormState } from 'apps/sales/src/app/core/store/actions/forms.actions';
@@ -49,9 +49,9 @@ export class CreateCustomerCardComponent implements OnInit, OnDestroy {
   @Select(SharedSelectors.getCustomerEditData) customerEditData$: Observable<EditCustomerData>;
   @Select(CountrySelector.getCountriesIterable) countries$: Observable<Country[]>;
   @Select(CountrySelector.getDeutchlandIterable) deutchland$: Observable<Country[]>;
-  @ViewChild('postBtn') postBtn: ButtonComponent;
-  @ViewChild('landDD') landDD: SelectComponent;
-  @ViewChild('suggestions') suggestions: AddressSugestionsComponent;
+  @ViewChild('postBtn', { static: false }) postBtn: ButtonComponent;
+  @ViewChild('landDD', { static: false }) landDD: SelectComponent;
+  @ViewChild('suggestions', { static: false }) suggestions: AddressSugestionsComponent;
   destroy$ = new Subject();
   destroyForm$ = new Subject();
   userForm: FormGroup;
@@ -133,7 +133,7 @@ export class CreateCustomerCardComponent implements OnInit, OnDestroy {
     private cdrf: ChangeDetectorRef,
     private appService: AppService,
     private errorService: ErrorService
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.isIPad = this.appService.isIPadEnv();
@@ -1118,7 +1118,7 @@ export class CreateCustomerCardComponent implements OnInit, OnDestroy {
 
   detectChanges() {
     setTimeout(() => {
-      if (this.cdrf !== null && this.cdrf !== undefined && !(this.cdrf as ViewRef_).destroyed) {
+      if (this.cdrf !== null && this.cdrf !== undefined && !(this.cdrf as ViewRef).destroyed) {
         this.cdrf.detectChanges();
       }
     }, 0);

apps/sales/src/app/modules/customer/components/customer-address-form/customer-address-form.component.ts

@@ -37,8 +37,8 @@ export class CustomerAddressFormComponent implements OnInit, OnDestroy {
   @Input() isBillingForm = true;
   @Select(SharedSelectors.getCustomerEditData) customerEditData$: Observable<EditCustomerData>;
   @Select(CountrySelector.getCountriesIterable) countries$: Observable<Country[]>;
-  @ViewChild('suggestions') suggestions: AddressSugestionsComponent;
-  @ViewChild('postBtn') postBtn: ButtonComponent;
+  @ViewChild('suggestions', { static: false }) suggestions: AddressSugestionsComponent;
+  @ViewChild('postBtn', { static: false }) postBtn: ButtonComponent;
   form: FormGroup;
   submitted = false;
   destroy$ = new Subject();
@@ -74,7 +74,7 @@ export class CustomerAddressFormComponent implements OnInit, OnDestroy {
     private cdrf: ChangeDetectorRef,
     private errorService: ErrorService,
     private route: ActivatedRoute
-  ) {}
+  ) { }
 
   ngOnInit(): void {
     if (this.customerInput) {

apps/sales/src/app/modules/customer/components/customer-search-card/customer-search-card.component.ts

@@ -32,10 +32,10 @@ export class CustomerSearchCardComponent implements OnInit, AfterViewInit, OnDes
   searchError = '';
 
   @Input() searchParams = '';
-  @ViewChild('searchInput') searchInput: SearchInputComponent;
-  @ViewChild('searchEmptyModal') searchEmptyModal: CustomerSearchEmptyModalComponent;
+  @ViewChild('searchInput', { static: false }) searchInput: SearchInputComponent;
+  @ViewChild('searchEmptyModal', { static: false }) searchEmptyModal: CustomerSearchEmptyModalComponent;
 
-  constructor(private store: Store, private router: Router, private customerService: CustomerService) {}
+  constructor(private store: Store, private router: Router, private customerService: CustomerService) { }
 
   ngOnInit() {
     this.store.dispatch(new ClearCachedCustomers());
@@ -79,13 +79,13 @@ export class CustomerSearchCardComponent implements OnInit, AfterViewInit, OnDes
                 name:
                   (searchParams.length > 12 ? searchParams.substring(0, 12) + '...' : searchParams) +
                   ` (${
-                    !isNullOrUndefined(response)
-                      ? !isNullOrUndefined(response.hits)
-                        ? response.hits
-                        : response.customers
+                  !isNullOrUndefined(response)
+                    ? !isNullOrUndefined(response.hits)
+                      ? response.hits
+                      : response.customers
                         ? response.customers.length
                         : 0
-                      : 0
+                    : 0
                   } Ergebnisse)`,
                 path: '/customer/results'
               },

apps/sales/src/app/modules/customer/pages/customer-order-detail/customer-order-detail.component.ts

@@ -25,7 +25,7 @@ import { CustomerSelectors } from 'apps/sales/src/app/core/store/selectors/custo
   styleUrls: ['./customer-order-detail.component.scss'],
 })
 export class CustomerOrderDetailComponent implements OnInit, OnDestroy {
-  @ViewChild('printModal') printModal: PrinterSelectionComponent;
+  @ViewChild('printModal', { static: false }) printModal: PrinterSelectionComponent;
   @Select(BranchSelectors.getBranches) branches$: Observable<{
     [key: number]: BranchDTO;
   }>;
@@ -56,7 +56,7 @@ export class CustomerOrderDetailComponent implements OnInit, OnDestroy {
     private orderService: OrdersService,
     private printer: PrinterService,
     private shelfService: CollectingShelfService
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.route.params
@@ -131,9 +131,9 @@ export class CustomerOrderDetailComponent implements OnInit, OnDestroy {
             : '-',
         suplier:
           item.data.subsetItems[0].data.supplier &&
-          item.data.subsetItems[0].data.supplier.data &&
-          this.suppliers &&
-          this.suppliers[item.data.subsetItems[0].data.supplier.data.id]
+            item.data.subsetItems[0].data.supplier.data &&
+            this.suppliers &&
+            this.suppliers[item.data.subsetItems[0].data.supplier.data.id]
             ? this.suppliers[item.data.subsetItems[0].data.supplier.data.id].name
             : '-',
         ticketNumber: ticketNumber ? ticketNumber : '-',

apps/sales/src/app/modules/customer/pages/customer-search-result/customer-search-result.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, AfterViewInit, ViewChild, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, AfterViewInit, ViewChild, ChangeDetectorRef, ChangeDetectionStrategy, ViewRef } from '@angular/core';
 import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
 import { User, Address } from '../../../../core/models/user.model';
@@ -26,7 +26,7 @@ import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { CUSTOMER_SCROLL_INDEX } from '../../../../core/utils/app.constants';
 import { AppState } from 'apps/sales/src/app/core/store/state/app.state';
 import { DeliveryOption } from 'apps/sales/src/app/core/models/delivery-option.model';
-import { ViewRef_ } from '@angular/core/src/view';
+
 import { Side } from '@libs/ui/lib/small-double-choice-switch';
 
 export interface CustomerFilters {
@@ -42,7 +42,7 @@ export interface CustomerFilters {
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CustomerSearchResultComponent implements OnInit {
-  @ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport;
+  @ViewChild(CdkVirtualScrollViewport, { static: false }) viewport: CdkVirtualScrollViewport;
   @Select(SharedSelectors.getSearchedCustomers) customers$: Observable<CustomerSearchResult>;
   @Select(SharedSelectors.getCart) cartData$: Observable<ProcessCart>;
   customerSearch: CustomerSearch;
@@ -66,7 +66,7 @@ export class CustomerSearchResultComponent implements OnInit {
     private customerService: CustomerService,
     private route: ActivatedRoute,
     private cdrf: ChangeDetectorRef
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.cartData$
@@ -253,7 +253,7 @@ export class CustomerSearchResultComponent implements OnInit {
 
   detectChanges() {
     setTimeout(() => {
-      if (this.cdrf !== null && this.cdrf !== undefined && !(this.cdrf as ViewRef_).destroyed) {
+      if (this.cdrf !== null && this.cdrf !== undefined && !(this.cdrf as ViewRef).destroyed) {
         this.cdrf.detectChanges();
       }
     }, 0);

apps/sales/src/app/modules/dashboard/components/book-card/book-card.component.ts

@@ -32,7 +32,7 @@ import { WindowRef } from 'apps/sales/src/app/core/services/window-ref.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BookCardComponent implements OnInit {
-  @ViewChild('books', { read: ElementRef }) public books: ElementRef<any>;
+  @ViewChild('books', { read: ElementRef, static: false }) public books: ElementRef<any>;
   @Select(ProcessSelectors.getProcesses) processes$: Observable<Process[]>;
   @Input() card: FeedCard;
   isIPad: boolean;
@@ -49,7 +49,7 @@ export class BookCardComponent implements OnInit {
     private router: Router,
     private cdrf: ChangeDetectorRef,
     private windowRef: WindowRef
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.isIPad = this.isIPadEnv();
@@ -144,7 +144,7 @@ export class BookCardComponent implements OnInit {
         this.books.nativeElement.scrollLeft + 102 * 3;
       const scrollLeft =
         newScrollLeftPosition + this.offset * 2 >
-        this.books.nativeElement.scrollWidth
+          this.books.nativeElement.scrollWidth
           ? this.books.nativeElement.scrollWidth
           : newScrollLeftPosition;
       this.books.nativeElement.scrollTo({

apps/sales/src/app/modules/filter/filter-group/components/select-filter/select-filter.component.ts

@@ -34,14 +34,14 @@ export class SelectFilterComponent implements OnChanges, AfterViewInit {
   @Input()
   max?: number;
 
-  @ViewChild('optionsContainer')
+  @ViewChild('optionsContainer', { static: false })
   optionsContainer: ElementRef;
 
   canScroll = false;
   scrollPositionPersantage = 0;
   allSelected$ = new BehaviorSubject<boolean>(false);
 
-  constructor(private cdr: ChangeDetectorRef) {}
+  constructor(private cdr: ChangeDetectorRef) { }
 
   ngAfterViewInit(): void {
     this.onOptionsContentScroll();

apps/sales/src/app/modules/filter/selected-filter-options/components/selected-filter-options.component.ts

@@ -33,7 +33,7 @@ export class SelectedFilterOptionsComponent implements AfterViewInit {
   collapsedStateNumberOfSelectedFiltersShown = 3;
   isCollapsed = true;
 
-  constructor(private cdr: ChangeDetectorRef, private renderer: Renderer2) {}
+  constructor(private cdr: ChangeDetectorRef, private renderer: Renderer2) { }
 
   ngAfterViewInit() {
     this.items.changes.subscribe((_) => {

apps/sales/src/app/modules/goods-in/pages/goods-in-order-details/goods-in-order-details.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, ViewChild, ElementRef, AfterViewInit, ChangeDetectorRef, HostListener } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, ElementRef, AfterViewInit, ChangeDetectorRef, HostListener, ViewRef } from '@angular/core';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { take, switchMap, filter, takeUntil, concatMap, catchError, map } from 'rxjs/operators';
 import { of, Observable, Subject } from 'rxjs';
@@ -13,7 +13,7 @@ import { Breadcrumb } from 'apps/sales/src/app/core/models/breadcrumb.model';
 import { SetEditOrder } from 'apps/sales/src/app/core/store/actions/collecting-shelf.action';
 import { PrinterService } from 'apps/sales/src/app/core/services/printer.service';
 import { AppService } from 'apps/sales/src/app/core/services/app.service';
-import { ViewRef_ } from '@angular/core/src/view';
+
 
 enum Tag {
   Maxi = 0,
@@ -57,12 +57,12 @@ export class GoodsInOrderDetailsComponent implements OnInit, OnDestroy, AfterVie
   tags: {
     [tag: number]: { label?: string; selected: boolean };
   } = {
-    0: { selected: false },
-    1: { selected: false },
-    2: { selected: false },
-    3: { selected: false },
-    4: { selected: false },
-  };
+      0: { selected: false },
+      1: { selected: false },
+      2: { selected: false },
+      3: { selected: false },
+      4: { selected: false },
+    };
   labelChecked = false;
   notAvailableModel = {
     comment: { value: '', disabled: true, errors: undefined },
@@ -71,7 +71,7 @@ export class GoodsInOrderDetailsComponent implements OnInit, OnDestroy, AfterVie
   isIPad = false;
 
   // attibutes for horizontal navigational arrow of all items
-  @ViewChild('allItemsEL') allItemsEL: ElementRef;
+  @ViewChild('allItemsEL', { static: false }) allItemsEL: ElementRef;
   showNext = false;
   showBack = false;
   showFowardContainer = false;
@@ -88,7 +88,7 @@ export class GoodsInOrderDetailsComponent implements OnInit, OnDestroy, AfterVie
     private printerService: PrinterService,
     private appService: AppService,
     private cdr: ChangeDetectorRef
-  ) {}
+  ) { }
 
   get status() {
     if (this.processingStatus) {
@@ -251,8 +251,8 @@ export class GoodsInOrderDetailsComponent implements OnInit, OnDestroy, AfterVie
                 ? collection[orderItem.data.orderItemNumber]
                 : 0
               : orderItem && orderItem.data.quantity
-              ? orderItem.data.quantity
-              : 0;
+                ? orderItem.data.quantity
+                : 0;
             if (quantity > 0 && orderId && orderItemId && orderItemSubsetId) {
               observer.next({
                 orderId: orderId,
@@ -527,7 +527,7 @@ export class GoodsInOrderDetailsComponent implements OnInit, OnDestroy, AfterVie
 
   detectChanges() {
     setTimeout(() => {
-      if (this.cdr !== null && this.cdr !== undefined && !(this.cdr as ViewRef_).destroyed) {
+      if (this.cdr !== null && this.cdr !== undefined && !(this.cdr as ViewRef).destroyed) {
         this.cdr.detectChanges();
       }
     }, 0);

apps/sales/src/app/modules/goods-in/pages/goods-in-search-results/goods-in-search-results.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, OnDestroy, ViewChild } from '@angular/core';
-import { ViewRef_ } from '@angular/core/src/view';
+import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, OnDestroy, ViewChild, ViewRef } from '@angular/core';
+
 import { GoodsInSearch } from 'apps/sales/src/app/core/models/GoodsInSearch.model';
 import { GoodsInSearchResultsDataSource } from './goods-in-search-results.datasource';
 import { Subject } from 'rxjs';
@@ -23,7 +23,7 @@ import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class GoodsInSearchResultsComponent implements OnInit, OnDestroy {
-  @ViewChild('scroller') scroller: CdkVirtualScrollViewport;
+  @ViewChild('scroller', { static: false }) scroller: CdkVirtualScrollViewport;
   goodsInSearch: GoodsInSearch;
   ds: GoodsInSearchResultsDataSource;
   destroy$ = new Subject();
@@ -31,7 +31,7 @@ export class GoodsInSearchResultsComponent implements OnInit, OnDestroy {
   useCache = false;
   id: number;
   doScroll = true;
-  constructor(private cdr: ChangeDetectorRef, private goodsInService: GoodsInService, private store: Store) {}
+  constructor(private cdr: ChangeDetectorRef, private goodsInService: GoodsInService, private store: Store) { }
 
   ngOnInit() {
     this.initialize();
@@ -124,7 +124,7 @@ export class GoodsInSearchResultsComponent implements OnInit, OnDestroy {
 
   detectChanges() {
     setTimeout(() => {
-      if (this.cdr !== null && this.cdr !== undefined && !(this.cdr as ViewRef_).destroyed) {
+      if (this.cdr !== null && this.cdr !== undefined && !(this.cdr as ViewRef).destroyed) {
         this.cdr.detectChanges();
       }
     }, 0);

apps/sales/src/app/modules/goods-in/pages/goods-in-search/goods-in-search.component.ts

@@ -23,9 +23,9 @@ import { GOODS_IN_SCROLL_INDEX } from 'apps/sales/src/app/core/utils/app.constan
   styleUrls: ['./goods-in-search.component.scss'],
 })
 export class GoodsInSearchComponent implements OnInit {
-  @ViewChild('searchInput') searchInput: SearchInputComponent;
+  @ViewChild('searchInput', { static: false }) searchInput: SearchInputComponent;
   error: string;
-  constructor(private store: Store, private goodsInService: GoodsInService, private router: Router) {}
+  constructor(private store: Store, private goodsInService: GoodsInService, private router: Router) { }
 
   ngOnInit() {
     this.initialize();

apps/sales/src/app/modules/newsletter-signup/pages/newsletter-signup.component.ts

@@ -12,7 +12,7 @@ import { CheckboxOption } from '@libs/ui';
   animations: [circleAnimation, removeAnimation, expandAnimation],
 })
 export class NewsletterSignupComponent implements OnInit {
-  @ViewChild(SignaturePadComponent) sigPad: SignaturePadComponent;
+  @ViewChild(SignaturePadComponent, { static: false }) sigPad: SignaturePadComponent;
 
   stage = 'one';
   options = [];
@@ -46,7 +46,7 @@ export class NewsletterSignupComponent implements OnInit {
     },
   ];
 
-  constructor() {}
+  constructor() { }
 
   ngOnInit() {
     this.options = [...this.init];

apps/sales/src/app/modules/product/components/add-product-review/add-product-review.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit, ChangeDetectorRef, ElementRef, ViewChild } from '@angular/core';
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
 import { ModalService } from '@libs/ui';
-import { FormBuilder, FormGroup, Validators, AbstractControl, ValidationErrors } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
 
 @Component({
   selector: 'app-add-product-review',
@@ -18,7 +18,7 @@ export class AddProductReviewComponent implements OnInit {
   ];
   submitted = false;
   reviewForm: FormGroup;
-  constructor(private modalService: ModalService, private fb: FormBuilder, private cdrf: ChangeDetectorRef) {}
+  constructor(private modalService: ModalService, private fb: FormBuilder) { }
 
   get f() {
     return this.reviewForm.controls;

apps/sales/src/app/modules/product/components/branches-avalability-overview/branches-avalability-overview.component.ts

@@ -28,7 +28,7 @@ export class BranchesAvalabilityOverviewComponent implements OnInit, OnDestroy {
   destroy$ = new Subject();
 
   @Input() item: ItemDTO;
-  @ViewChild('searchInput') searchInput: SearchInputComponent;
+  @ViewChild('searchInput', { static: false }) searchInput: SearchInputComponent;
 
   error: string;
 
@@ -37,7 +37,7 @@ export class BranchesAvalabilityOverviewComponent implements OnInit, OnDestroy {
     private availabilityService: ProductAvailabilityService,
     private store: Store,
     private branchService: BranchService
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.branches$

apps/sales/src/app/modules/product/components/product-card/product-card.component.ts

@@ -56,7 +56,7 @@ export class ProductCardComponent implements OnInit, OnDestroy, AfterViewChecked
   authors: string[];
   destroy$ = new Subject();
 
-  @ViewChild('titleLine') titleLine: ElementRef;
+  @ViewChild('titleLine', { static: false }) titleLine: ElementRef;
   private clearAfterCheckedTimeout;
 
   constructor(
@@ -64,9 +64,9 @@ export class ProductCardComponent implements OnInit, OnDestroy, AfterViewChecked
     private router: Router,
     private store: Store,
     private renderer: Renderer2
-  ) {}
+  ) { }
 
-  ngOnInit() {}
+  ngOnInit() { }
 
   ngOnDestroy() {
     this.destroy$.next();
@@ -132,7 +132,7 @@ export class ProductCardComponent implements OnInit, OnDestroy, AfterViewChecked
     if (!!date) {
       try {
         const dateToFormat = new Date(date);
-        const monthName = dateToFormat.toLocaleString('de', {month: 'long'});
+        const monthName = dateToFormat.toLocaleString('de', { month: 'long' });
         return `${monthName} ${dateToFormat.getFullYear()}`;
       } catch (error) {
         console.error(error);

apps/sales/src/app/modules/product/components/product-checkout/product-checkout.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Output, EventEmitter, Input, OnDestroy, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input, OnDestroy, ViewChild, ChangeDetectorRef, ViewRef } from '@angular/core';
 import { ModalService, ButtonComponent, DeleteDropdownComponent } from '@libs/ui';
 import { Router } from '@angular/router';
 import { Store, Select } from '@ngxs/store';
@@ -25,7 +25,7 @@ import { SharedSelectors } from '../../../../core/store/selectors/shared.selecto
 import { SearchDropdownComponent } from '@libs/ui/lib/search-dropdown';
 import { AddBranchesIfNotLoaded } from 'apps/sales/src/app/core/store/actions/branch.actions';
 import { allowedAvailabilityStatusCodes } from 'apps/sales/src/app/core/utils/product.util';
-import { ViewRef_ } from '@angular/core/src/view';
+
 
 @Component({
   selector: 'app-checkout',
@@ -37,8 +37,8 @@ export class ProductCheckoutComponent implements OnInit, OnDestroy {
   @Select(SharedSelectors.getBreadcrumbs) getBreadcrumbs$: Observable<Breadcrumb[]>;
   @Select(BranchSelectors.getBranches) branches$: Observable<{ [key: number]: BranchDTO }>;
 
-  @ViewChild('deleteDropdown') deleteDropdown: DeleteDropdownComponent;
-  @ViewChild('branchesdropdown') branchesdd: SearchDropdownComponent;
+  @ViewChild('deleteDropdown', { static: false }) deleteDropdown: DeleteDropdownComponent;
+  @ViewChild('branchesdropdown', { static: false }) branchesdd: SearchDropdownComponent;
 
   id = 'checkout-modal';
   stepOne = true;
@@ -196,7 +196,7 @@ export class ProductCheckoutComponent implements OnInit, OnDestroy {
     private branchService: BranchService,
     private datePipe: DatePipe,
     private cdrf: ChangeDetectorRef
-  ) {}
+  ) { }
 
   ngOnInit() {
     if (this.isDownload) {
@@ -630,7 +630,7 @@ export class ProductCheckoutComponent implements OnInit, OnDestroy {
 
   detectChanges() {
     setTimeout(() => {
-      if (this.cdrf !== null && this.cdrf !== undefined && !(this.cdrf as ViewRef_).destroyed) {
+      if (this.cdrf !== null && this.cdrf !== undefined && !(this.cdrf as ViewRef).destroyed) {
         this.cdrf.detectChanges();
       }
     }, 0);

apps/sales/src/app/modules/product/components/product-other-formats/product-other-formats.component.ts

@@ -24,7 +24,7 @@ import { WindowRef } from 'apps/sales/src/app/core/services/window-ref.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProductOtherFormatsComponent implements OnInit {
-  @ViewChild('formats', { read: ElementRef }) public formats: ElementRef<any>;
+  @ViewChild('formats', { read: ElementRef, static: false }) public formats: ElementRef<any>;
   showNext = false;
   showBack = false;
   showFowardContainer = false;
@@ -53,7 +53,7 @@ export class ProductOtherFormatsComponent implements OnInit {
 
   @HostBinding('style.padding-bottom') bottomPadding: string;
 
-  constructor(private cdr: ChangeDetectorRef, private router: Router, private store: Store, private windowRef: WindowRef) {}
+  constructor(private cdr: ChangeDetectorRef, private router: Router, private store: Store, private windowRef: WindowRef) { }
 
   ngOnInit() {
     this.isIPad = this.isIPadEnv();

apps/sales/src/app/modules/product/components/product-review/product-review.component.ts

@@ -1,10 +1,9 @@
-import { Component, OnInit, Input, AfterViewInit, ViewChild } from '@angular/core';
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { ModalService } from '@libs/ui';
 import { ProductReview } from '../../../../core/models/product-review.model';
-import { of, Observable } from 'rxjs';
+import { of } from 'rxjs';
 import { Review } from '../../../../core/models/review.model';
 import { AddProductReviewComponent } from '../add-product-review/add-product-review.component';
-import { restoreView } from '@angular/core/src/render3';
 
 @Component({
   selector: 'app-product-review',
@@ -44,14 +43,14 @@ export class ProductReviewComponent implements OnInit {
       return this._fullStars + (this._halfStars === 1 ? 0.5 : 0);
     }
   }
-  @ViewChild('addReview') addReview: AddProductReviewComponent;
+  @ViewChild('addReview', { static: false }) addReview: AddProductReviewComponent;
 
   // [HIMA-292] - feature disabled
   reviewFeatureDisabled = true;
 
-  constructor(private modalService: ModalService) {}
+  constructor(private modalService: ModalService) { }
 
-  ngOnInit() {}
+  ngOnInit() { }
 
   getMoreBtn(index: number) {
     if (this.moreBtn && this.moreBtn.find(t => t.index === index)) {

apps/sales/src/app/modules/product/pages/product-details/product-details.component.ts

@@ -43,18 +43,18 @@ import { allowedAvailabilityStatusCodes } from 'apps/sales/src/app/core/utils/pr
   animations: [shrinkTitleAnimation, shrinkSecondaryAnimation, shrinkMainCard],
 })
 export class ProductDetailsComponent implements OnInit, OnDestroy {
-  @ViewChild('productDetailContainer', { read: ElementRef })
+  @ViewChild('productDetailContainer', { read: ElementRef, static: false })
   private productDetailContainer: ElementRef<any>;
-  @ViewChild('checkout') checkoutDialog: ProductCheckoutComponent;
-  @ViewChild('photoGallery') photoGallery: PhotoGalleryComponent;
-  @ViewChild('productReview') productReview: ProductReviewComponent;
-  @ViewChild('branchesAvailabilityInfo')
+  @ViewChild('checkout', { static: false }) checkoutDialog: ProductCheckoutComponent;
+  @ViewChild('photoGallery', { static: false }) photoGallery: PhotoGalleryComponent;
+  @ViewChild('productReview', { static: false }) productReview: ProductReviewComponent;
+  @ViewChild('branchesAvailabilityInfo', { static: false })
   branchesAvailabilityInfo: BranchesAvalabilityOverviewComponent;
-  @ViewChild('printModal') printModal: PrinterSelectionComponent;
-  @ViewChild('addtocart') addToCartBtn: ButtonComponent;
-  @ViewChild('recommendations') recommendations: RecommendationsComponent;
-  @ViewChild('otherformats') elOtherformats: ProductOtherFormatsComponent;
-  @ViewChild('panformatsel', { read: ElementRef }) public formats: ElementRef<any>;
+  @ViewChild('printModal', { static: false }) printModal: PrinterSelectionComponent;
+  @ViewChild('addtocart', { static: false }) addToCartBtn: ButtonComponent;
+  @ViewChild('recommendations', { static: false }) recommendations: RecommendationsComponent;
+  @ViewChild('otherformats', { static: false }) elOtherformats: ProductOtherFormatsComponent;
+  @ViewChild('panformatsel', { read: ElementRef, static: false }) public formats: ElementRef<any>;
   expanded = true;
   id: number;
   item: ItemDTO;
@@ -266,7 +266,7 @@ export class ProductDetailsComponent implements OnInit, OnDestroy {
     private cdrf: ChangeDetectorRef,
     private printer: PrinterService,
     private datePipe: DatePipe
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.loadCartState();
@@ -425,10 +425,10 @@ export class ProductDetailsComponent implements OnInit, OnDestroy {
         review.length === 0
           ? 0
           : review
-              .map((t) => t.rating)
-              .reduce((total, num) => {
-                return total + num;
-              }) / review.length,
+            .map((t) => t.rating)
+            .reduce((total, num) => {
+              return total + num;
+            }) / review.length,
       employeeReviews: review.length,
       reviews: review.map((t) => {
         return <Review>{
@@ -709,10 +709,10 @@ export class ProductDetailsComponent implements OnInit, OnDestroy {
             (
               response:
                 | {
-                    branchId: number;
-                    type: CheckoutType;
-                    av: AvailabilityDTO[];
-                  }
+                  branchId: number;
+                  type: CheckoutType;
+                  av: AvailabilityDTO[];
+                }
                 | { error: boolean; message: string; type: CheckoutType }
             ) => {
               if (
@@ -846,7 +846,7 @@ export class ProductDetailsComponent implements OnInit, OnDestroy {
     }
   }
 
-  cartActionCompleted(open: boolean) {}
+  cartActionCompleted(open: boolean) { }
 
   formatDate(date: Date | string): string {
     if (!!date) {

apps/sales/src/app/modules/product/pages/product-results/product-results.component.ts

@@ -53,7 +53,7 @@ export class ProductResultsComponent implements OnInit, OnDestroy, AfterViewInit
   products: Product[];
   skip = 0;
   processCount = 0;
-  @ViewChild('scroller') scroller: CdkVirtualScrollViewport;
+  @ViewChild('scroller', { static: false }) scroller: CdkVirtualScrollViewport;
   @ViewChildren('productCard') productCardList: QueryList<ProductCardComponent>;
   loading = true;
   filters: Filter[];
@@ -94,7 +94,7 @@ export class ProductResultsComponent implements OnInit, OnDestroy, AfterViewInit
     private productService: ProductService,
     private cdr: ChangeDetectorRef,
     private productUtils: ProductUtilService
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.store
@@ -312,11 +312,11 @@ export class ProductResultsComponent implements OnInit, OnDestroy, AfterViewInit
       filters = this.currentSearch.fitlers.map((f: Filter) =>
         f.id === 'cattype'
           ? {
-              ...f,
-              items: f.items.map((fi: FilterItem) =>
-                fi.id === '2' ? { ...fi, selected: this.acrhiveFilter } : { ...fi, selected: false }
-              ),
-            }
+            ...f,
+            items: f.items.map((fi: FilterItem) =>
+              fi.id === '2' ? { ...fi, selected: this.acrhiveFilter } : { ...fi, selected: false }
+            ),
+          }
           : f
       );
     }

apps/sales/src/app/modules/product/pages/product-search/components/filter-item/filter-item.component.ts

@@ -49,11 +49,11 @@ export class FilterItemComponent implements OnInit, OnDestroy {
   topPosition = 0;
   setContanerRightPosition = false;
   allowRecoveryScroll = false;
-  @ViewChild('optionContainer') optionContainer: ElementRef<any>;
+  @ViewChild('optionContainer', { static: false }) optionContainer: ElementRef<any>;
 
   @Output() confirmed = new EventEmitter();
 
-  @ViewChild('menu') menu: ElementRef<any>;
+  @ViewChild('menu', { static: false }) menu: ElementRef<any>;
 
   get containerHeight() {
     if (this.menu) {
@@ -78,7 +78,7 @@ export class FilterItemComponent implements OnInit, OnDestroy {
     private productUtils: ProductUtilService,
     private appService: AppService,
     private cdrf: ChangeDetectorRef
-  ) {}
+  ) { }
 
   toggleMenu(id: string) {
     const action = this.filter.expanded ? new UnselectFilterById(id) : new SelectFilterById(id);

apps/sales/src/app/modules/product/pages/product-search/components/filter/filter.component.ts

@@ -36,7 +36,7 @@ export class FilterComponent implements OnInit, OnDestroy {
   @Select(SharedSelectors.getSelectedFilterItems) filters$: Observable<Filter[]>;
   @Output() toggle = new EventEmitter();
   @Input() selectedFilterMode: Side;
-  @ViewChild('filterContainer') filterContainer: ElementRef<any>;
+  @ViewChild('filterContainer', { static: false }) filterContainer: ElementRef<any>;
   @ViewChildren(SelectedFilterItemComponent) selectedFilters: QueryList<SelectedFilterItemComponent>;
   filterIndexArray$: Observable<Filter[]>;
   showMore: boolean;
@@ -61,7 +61,7 @@ export class FilterComponent implements OnInit, OnDestroy {
     return this.filterCount;
   }
 
-  constructor(private store: Store, private windowService: WindowRef, private cdrf: ChangeDetectorRef) {}
+  constructor(private store: Store, private windowService: WindowRef, private cdrf: ChangeDetectorRef) { }
 
   selectedFilters$(id: string) {
     return this.filters$.pipe(

apps/sales/src/app/modules/product/pages/product-search/components/text-search/text-search.component.ts

@@ -81,9 +81,9 @@ export class TextSearchComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
-  @ViewChild('searchInput') searchInput: SearchInputComponent;
+  @ViewChild('searchInput', { static: false }) searchInput: SearchInputComponent;
 
-  constructor(private store: Store, private router: Router, private productService: ProductService, private appService: AppService) {}
+  constructor(private store: Store, private router: Router, private productService: ProductService, private appService: AppService) { }
 
   ngOnInit() {
     this.isIPad = this.appService.isIPadEnv();

apps/sales/src/app/modules/recommendations/recommendations.component.ts

@@ -20,7 +20,7 @@ import { WindowRef } from '../../core/services/window-ref.service';
   styleUrls: ['recommendations.component.scss'],
 })
 export class RecommendationsComponent implements OnInit, OnDestroy {
-  @ViewChild('books', { read: ElementRef }) public books: ElementRef<any>;
+  @ViewChild('books', { read: ElementRef, static: false }) public books: ElementRef<any>;
   @Input() book?: ItemDTO;
   @Output() redirect: EventEmitter<number> = new EventEmitter();
   recommendations: RecommendationItem[] = [];
@@ -39,7 +39,7 @@ export class RecommendationsComponent implements OnInit, OnDestroy {
 
   private scrollTimeout;
 
-  constructor(private recoService: RecommandationService, private store: Store, private router: Router, private windowRef: WindowRef) {}
+  constructor(private recoService: RecommandationService, private store: Store, private router: Router, private windowRef: WindowRef) { }
 
   // deprecated method - invoces call with id
   openBook(bookId: number) {

apps/sales/src/app/modules/remission/components/remission-list-card-started/remission-list-card-started.component.ts

@@ -6,6 +6,7 @@ import {
   ChangeDetectorRef,
   EventEmitter,
   Output,
+  ViewRef,
 } from '@angular/core';
 import {
   RemissionProduct,
@@ -17,7 +18,7 @@ import { Store } from '@ngxs/store';
 import { RemissionHelperService } from '../../services/remission-helper.service';
 // tslint:disable-next-line: max-line-length
 import { RemissionAddProductToShippingDocumentDialogComponent } from '../remission-add-product-to-shipping-document-dialog/remission-add-product-to-shipping-document-dialog.component';
-import { ViewRef_ } from '@angular/core/src/view';
+
 // tslint:disable-next-line: max-line-length
 import { RemissionAddProductToShippingDocumentPartiallyDialogComponent } from '../remission-add-product-to-shipping-document-partially-dialog/remission-add-product-to-shipping-document-partially-dialog.component';
 import { ErrorService } from 'apps/sales/src/app/core/error/component/error.service';
@@ -40,9 +41,9 @@ export class RemissionListCardStartedComponent implements OnInit {
   @Input() remissionProcess: RemissionProcess;
   @Output() updateShippingDocument = new EventEmitter<void>();
 
-  @ViewChild('addProductDialog')
+  @ViewChild('addProductDialog', { static: false })
   addProductDialog: RemissionAddProductToShippingDocumentDialogComponent;
-  @ViewChild('addProductPartiallyDialog')
+  @ViewChild('addProductPartiallyDialog', { static: false })
   addProductPartiallyDialog: RemissionAddProductToShippingDocumentPartiallyDialogComponent;
   selectedFeatureDescription: string;
   toolTipOpened = [];
@@ -59,9 +60,9 @@ export class RemissionListCardStartedComponent implements OnInit {
     private remissionHelper: RemissionHelperService,
     private cdr: ChangeDetectorRef,
     private errorService: ErrorService
-  ) {}
+  ) { }
 
-  ngOnInit() {}
+  ngOnInit() { }
 
   openTooltip(index: number) {
     this.toolTipOpened = this.toolTipOpened.map(
@@ -220,7 +221,7 @@ export class RemissionListCardStartedComponent implements OnInit {
       if (
         this.cdr !== null &&
         this.cdr !== undefined &&
-        !(this.cdr as ViewRef_).destroyed
+        !(this.cdr as ViewRef).destroyed
       ) {
         this.cdr.detectChanges();
       }

apps/sales/src/app/modules/remission/components/remission-list/remission-list.component.ts

@@ -16,8 +16,8 @@ import { SetRemissionIsLoading } from 'apps/sales/src/app/core/store/actions/rem
   styleUrls: ['./remission-list.component.scss'],
 })
 export class RemissionListComponent implements OnInit, OnDestroy {
-  @ViewChild('scroller') scroller: CdkVirtualScrollViewport;
-  @ViewChild('remissionListContainer') remissionListContainer: ElementRef;
+  @ViewChild('scroller', { static: false }) scroller: CdkVirtualScrollViewport;
+  @ViewChild('remissionListContainer', { static: false }) remissionListContainer: ElementRef;
   @Input() started = false;
   @Input() hits: number;
   @Input() remissionProcess: RemissionProcess;
@@ -60,7 +60,7 @@ export class RemissionListComponent implements OnInit, OnDestroy {
     private remissionHelper: RemissionHelperService,
     private store: Store,
     private cdr: ChangeDetectorRef
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.fetchProductPaged(this.page)

apps/sales/src/app/modules/remission/components/remission-printer-selection/remission-printer-selection.component.ts

@@ -30,14 +30,14 @@ export class RemissionPrinterSelectionComponent implements OnInit, OnDestroy {
   printingRequested = false;
   submited = false;
   @Output() print: EventEmitter<string> = new EventEmitter();
-  @ViewChild('printBtn') printBtn: ButtonComponent;
+  @ViewChild('printBtn', { static: false }) printBtn: ButtonComponent;
 
   constructor(
     private remissionService: RemissionService,
     private modalService: ModalService
-  ) {}
+  ) { }
 
-  ngOnInit() {}
+  ngOnInit() { }
 
   printerSelected(value: string | number) {
     this.selected = value;

apps/sales/src/app/modules/remission/components/remission-shipping-document-card/remission-shipping-document-card.component.ts

@@ -22,7 +22,7 @@ export class RemissionShippingDocumentCardComponent {
 
   @Output() updateShippingDocument = new EventEmitter<void>();
 
-  @ViewChild('removeProductDialog')
+  @ViewChild('removeProductDialog', { static: false })
   removeProductDialog: RemissionRemoveProductFromShippingDocumentDialogComponent;
 
   showRemoveProductDialog = false;
@@ -31,7 +31,7 @@ export class RemissionShippingDocumentCardComponent {
     private cdr: ChangeDetectorRef,
     private remissionService: RemissionService,
     private remissionHelper: RemissionHelperService
-  ) {}
+  ) { }
 
   remove() {
     this.remissionService

apps/sales/src/app/modules/remission/components/remission-shipping-document/remission-shipping-document.component.ts

@@ -45,7 +45,7 @@ export class RemissionShippingDocumentComponent implements OnInit, OnDestroy {
 
   @Output() updateShippingDocument = new EventEmitter<void>();
 
-  @ViewChild('remissionConfirmDeleteDialog')
+  @ViewChild('remissionConfirmDeleteDialog', { static: false })
   remissionConfirmDeleteDialog: RemissionConfirmDeleteShippingDocumentDialogComponent;
 
   destroy$ = new Subject();
@@ -54,9 +54,9 @@ export class RemissionShippingDocumentComponent implements OnInit, OnDestroy {
     private store: Store,
     private router: Router,
     private remissionService: RemissionService
-  ) {}
+  ) { }
 
-  ngOnInit() {}
+  ngOnInit() { }
 
   ngOnDestroy(): void {
     this.destroy$.next();

apps/sales/src/app/modules/remission/pages/remission-add-product-to-remission-list/remission-add-product-to-remission-list.component.ts

@@ -28,18 +28,18 @@ export class RemissionAddProductToRemissionListComponent
   implements OnInit, AfterViewInit {
   errorMessage: string;
 
-  @ViewChild('input') input: ElementRef;
-  @ViewChild('searchInput') searchInput: SearchInputComponent;
-  @ViewChild('invalidBarcodeDialog')
+  @ViewChild('input', { static: false }) input: ElementRef;
+  @ViewChild('searchInput', { static: false }) searchInput: SearchInputComponent;
+  @ViewChild('invalidBarcodeDialog', { static: false })
   invalidBarcodeDialog: RemissionScanProductInvalidBarcodeComponent;
 
   constructor(
     private store: Store,
     private remissionService: RemissionService,
     private router: Router
-  ) {}
+  ) { }
 
-  ngOnInit() {}
+  ngOnInit() { }
 
   ngAfterViewInit() {
     this.searchInput.focus();

apps/sales/src/app/modules/remission/pages/remission-details/remission-details.component.ts

@@ -62,10 +62,10 @@ export class RemissionDetailsComponent
   isIPad = false;
   showScanner = false;
 
-  @ViewChild('printModal') printModal: PrinterSelectionComponent;
-  @ViewChild('remissionConfirmDeleteDialog')
+  @ViewChild('printModal', { static: false }) printModal: PrinterSelectionComponent;
+  @ViewChild('remissionConfirmDeleteDialog', { static: false })
   remissionConfirmDeleteDialog: RemissionConfirmDeleteShippingDocumentDialogComponent;
-  @ViewChild('scanner')
+  @ViewChild('scanner', { static: false })
   scannerComponent: RemissionContainerScannerScanditComponent;
 
   constructor(
@@ -76,7 +76,7 @@ export class RemissionDetailsComponent
     private remissionService: RemissionService,
     private errorService: ErrorService,
     private appService: AppService
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.isIPad = this.checkIfIpad();
@@ -130,7 +130,7 @@ export class RemissionDetailsComponent
             remissionProcess =>
               remissionProcess.shippingDocuments[0] &&
               remissionProcess.shippingDocuments[0].shippingDocumentNumber ===
-                receiptNumber
+              receiptNumber
           )
         )
       )

apps/sales/src/app/modules/remission/pages/remission-finish/remission-finish.component.ts

@@ -45,12 +45,12 @@ export class RemissionFinishComponent implements OnInit, OnDestroy {
   currentRemissionProcess$: Observable<RemissionProcess>;
   @Select(RemissionSelectors.getRemissionProcessStatuses)
   remissionProcessStatuses$: Observable<RemissionProcessStatuses>;
-  @ViewChild('invalidBarcodeDialog')
+  @ViewChild('invalidBarcodeDialog', { static: false })
   invalidBarcodeDialog: RemissionScanProductInvalidBarcodeComponent;
-  @ViewChild('invalidDocumentDialog')
+  @ViewChild('invalidDocumentDialog', { static: false })
   invalidDocumentDialog: RemissionScanShippingDocumentClosedComponent;
-  @ViewChild('printModal') printModal: PrinterSelectionComponent;
-  @ViewChild('confirmScanModal') confirmScanModal: RemissionScanConfirmationDialogComponent;
+  @ViewChild('printModal', { static: false }) printModal: PrinterSelectionComponent;
+  @ViewChild('confirmScanModal', { static: false }) confirmScanModal: RemissionScanConfirmationDialogComponent;
   pageStatus: RemissionFinishingProcessStatus;
   suppliers: {
     leftSupplier: RemissionSupplier;
@@ -98,7 +98,7 @@ export class RemissionFinishComponent implements OnInit, OnDestroy {
     private cdrf: ChangeDetectorRef,
     private appService: AppService,
     private nativeContainerService: NativeContainerService
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.initialize();
@@ -231,10 +231,10 @@ export class RemissionFinishComponent implements OnInit, OnDestroy {
   }
 
   completeScan(barcode: string) {
-      this.showError = false;
-      this.containerId = barcode;
-      this.store.dispatch(new SetRemissionScannedContainerId(this.containerId));
-      this.completeShippingDocument();
+    this.showError = false;
+    this.containerId = barcode;
+    this.store.dispatch(new SetRemissionScannedContainerId(this.containerId));
+    this.completeShippingDocument();
   }
 
   abandonScan() {

apps/sales/src/app/modules/remission/pages/remission-list-create/product-list/product-list.component.ts

@@ -29,9 +29,9 @@ import { UpdateShippingDocuent } from 'apps/sales/src/app/core/store/actions/rem
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RemissionProductListComponent implements OnInit, OnDestroy, AfterViewInit {
-  @ViewChild('toTopToBottomActions')
+  @ViewChild('toTopToBottomActions', { static: false })
   toTopToBottomActions: RemissionToTopToBottomActionsComponent;
-  @ViewChild('remissionList') remissionList: RemissionListComponent;
+  @ViewChild('remissionList', { static: false }) remissionList: RemissionListComponent;
   @ViewChildren('remissionListHitsRef') remissionHitsRef: QueryList<ElementRef>;
 
   @Input() remissionListContainer: HTMLElement;
@@ -86,7 +86,7 @@ export class RemissionProductListComponent implements OnInit, OnDestroy, AfterVi
   // Feature Flag: Indicates whether to load entire remission list on navigate to bottom
   loadAllProductsOnNavigateToBottom = false;
 
-  constructor(private store: Store, private remissionService: RemissionService) {}
+  constructor(private store: Store, private remissionService: RemissionService) { }
 
   ngOnInit() {
     this.initProducts();

apps/sales/src/app/modules/remission/pages/remission-list-create/remission-list-create.component.ts

@@ -67,15 +67,15 @@ export class RemissionListCreateComponent implements OnInit, OnDestroy {
   remissionListHits$: Observable<number>;
   listLoaded$: Observable<boolean>;
 
-  @ViewChild('toTopToBottomActions')
+  @ViewChild('toTopToBottomActions', { static: false })
   toTopToBottomActions: RemissionToTopToBottomActionsComponent;
-  @ViewChild('remissionList') remissionList: RemissionListComponent;
-  @ViewChild('remissionListContainer') remissionListContainer: ElementRef;
-  @ViewChild('remissionStartDialog')
+  @ViewChild('remissionList', { static: false }) remissionList: RemissionListComponent;
+  @ViewChild('remissionListContainer', { static: false }) remissionListContainer: ElementRef;
+  @ViewChild('remissionStartDialog', { static: false })
   remissionStartDialog: RemissionStartDialogComponent;
-  @ViewChild('addProductToRemissionDialog')
+  @ViewChild('addProductToRemissionDialog', { static: false })
   addProductToRemissionDialog: AddProductToRemissionDialogComponent;
-  @ViewChild('invalidBarcodeDialog')
+  @ViewChild('invalidBarcodeDialog', { static: false })
   invalidBarcodeDialog: RemissionScanProductInvalidBarcodeComponent;
   destroy$ = new Subject();
 
@@ -101,7 +101,7 @@ export class RemissionListCreateComponent implements OnInit, OnDestroy {
     private appService: AppService,
     private route: ActivatedRoute,
     private nativeContainerService: NativeContainerService
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.initialisations();

apps/sales/src/app/modules/remission/pages/remission-list-started/remission-list-started.component.ts

@@ -62,9 +62,9 @@ export class RemissionListStartedComponent implements OnInit, OnDestroy {
   containerScroll$ = new BehaviorSubject<Event>(undefined);
   isCompleteButtomEnabled$: Observable<boolean>;
 
-  @ViewChild('remissionList') remissionList: RemissionListComponent;
-  @ViewChild('remissionListContainer') remissionListContainer: ElementRef;
-  @ViewChild('shippingDocumentContainer') shippingDocumentContainer: ElementRef;
+  @ViewChild('remissionList', { static: false }) remissionList: RemissionListComponent;
+  @ViewChild('remissionListContainer', { static: false }) remissionListContainer: ElementRef;
+  @ViewChild('shippingDocumentContainer', { static: false }) shippingDocumentContainer: ElementRef;
   @ViewChildren('shippingDocumentContainer')
   shippingDocumentRef: QueryList<ElementRef>;
 
@@ -94,7 +94,7 @@ export class RemissionListStartedComponent implements OnInit, OnDestroy {
     private remissionHelper: RemissionHelperService,
     private router: Router,
     private cdrf: ChangeDetectorRef
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.initRemissionProcess();

apps/sales/src/app/modules/remission/pages/remission-list-started/shipping-document-creation/shipping-document-creation.component.ts

@@ -45,7 +45,7 @@ export class ShippingDocumentCreationComponent implements OnInit {
   @Select(RemissionSelectors.allowScanningShippingDocument)
   enableScan$: Observable<boolean>;
 
-  @ViewChild('invalidBarcodeDialog')
+  @ViewChild('invalidBarcodeDialog', { static: false })
   invalidBarcodeDialog: RemissionScanProductInvalidBarcodeComponent;
 
   constructor(
@@ -54,7 +54,7 @@ export class ShippingDocumentCreationComponent implements OnInit {
     private remissionService: RemissionService,
     private errorService: ErrorService,
     private store: Store
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.showScanningButton$ = this.enableScan$.pipe(
@@ -102,7 +102,7 @@ export class ShippingDocumentCreationComponent implements OnInit {
             catchError((error) => {
               const invalidProperties =
                 error.invalidProperties &&
-                Object.keys(error.invalidProperties).length > 0
+                  Object.keys(error.invalidProperties).length > 0
                   ? JSON.stringify(error.invalidProperties)
                   : undefined;
               this.errorService.addErrors(

apps/sales/src/app/modules/shelf/components/barcode-search/barcode-search.component.ts

@@ -21,13 +21,13 @@ import { OrderItemListItemDTO, ListResponseArgsOfOrderItemListItemDTO } from '@s
   styleUrls: ['barcode-search.component.scss'],
 })
 export class ShelfBarcodeSearchComponent implements OnInit, OnDestroy {
-  @ViewChild('scanner') scanner: BarcodeScannerScanditComponent;
+  @ViewChild('scanner', { static: false }) scanner: BarcodeScannerScanditComponent;
   scanningVisible = false;
   destroy$ = new Subject();
 
-  constructor(private store: Store, private router: Router, private collectingShelf: CollectingShelfService) {}
+  constructor(private store: Store, private router: Router, private collectingShelf: CollectingShelfService) { }
 
-  ngOnInit() {}
+  ngOnInit() { }
 
   triggerSearch(barcode) {
     if (isNullOrUndefined(barcode) || barcode.length <= 1) {
@@ -60,7 +60,7 @@ export class ShelfBarcodeSearchComponent implements OnInit, OnDestroy {
     if (order && (order.compartmentCode || order.orderId)) {
       const path = `/shelf/details/${order.compartmentCode ? order.compartmentCode : order.orderId}/${order.orderId}/${
         order.processingStatus
-      }/${order.compartmentCode ? 'c' : 'o'}`;
+        }/${order.compartmentCode ? 'c' : 'o'}`;
       this.store.dispatch(
         new AddBreadcrumb(
           <Breadcrumb>{

apps/sales/src/app/modules/shelf/components/text-search/text-search.component.ts

@@ -36,7 +36,7 @@ export class ShelfTextSearchComponent implements OnInit, AfterViewInit, OnDestro
   private iPadDetected = false;
   private iPadEventRecieved = false;
 
-  @ViewChild('searchInput') searchInput: SearchInputComponent;
+  @ViewChild('searchInput', { static: false }) searchInput: SearchInputComponent;
 
   destroy$ = new Subject();
 
@@ -46,7 +46,7 @@ export class ShelfTextSearchComponent implements OnInit, AfterViewInit, OnDestro
     private mapper: ShelfMapping,
     private collectingShelf: CollectingShelfService,
     private windowRef: WindowRef
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.isIPad = this.isIPadEnv();
@@ -120,7 +120,7 @@ export class ShelfTextSearchComponent implements OnInit, AfterViewInit, OnDestro
     if (order && (order.compartmentCode || order.orderId)) {
       const path = `/shelf/details/${order.compartmentCode ? order.compartmentCode : order.orderId}/${order.orderId}/${
         order.processingStatus
-      }/${order.compartmentCode ? 'c' : 'o'}`;
+        }/${order.compartmentCode ? 'c' : 'o'}`;
       this.store.dispatch(
         new AddBreadcrumb(
           <Breadcrumb>{

apps/sales/src/app/modules/shelf/pages/shelf-order-details/shelf-order-details.component.ts

@@ -1,6 +1,6 @@
 import { Subject, of, Observable } from 'rxjs';
 
-import { Component, OnDestroy, OnInit, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef, AfterContentChecked } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef, AfterContentChecked, ViewRef } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { ActivatedRoute, Router } from '@angular/router';
 import { switchMap, takeUntil, take, catchError, concatMap, filter } from 'rxjs/operators';
@@ -23,7 +23,7 @@ import {
 } from 'apps/sales/src/app/core/store/actions/breadcrumb.actions';
 import { Breadcrumb } from 'apps/sales/src/app/core/models/breadcrumb.model';
 import { ChangeCurrentRoute } from 'apps/sales/src/app/core/store/actions/process.actions';
-import { ViewRef_ } from '@angular/core/src/view';
+
 import { objectNotNull } from 'apps/sales/src/app/core/utils/app.utils';
 import { isNullOrUndefined } from 'util';
 import { CustomerService } from 'apps/sales/src/app/core/services/customer.service';
@@ -40,7 +40,7 @@ export const ARRIVED = 128;
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ShelfOrderDetailsComponent implements OnInit, OnDestroy, AfterContentChecked {
-  @ViewChild('partialModal') partialModal: ShelfPartialCollectionModalComponent;
+  @ViewChild('partialModal', { static: false }) partialModal: ShelfPartialCollectionModalComponent;
   destroy$ = new Subject();
 
   orderDTO: OrderDTO;
@@ -82,7 +82,7 @@ export class ShelfOrderDetailsComponent implements OnInit, OnDestroy, AfterConte
     private cdrf: ChangeDetectorRef,
     private router: Router,
     private customerService: CustomerService
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.loadOrder();
@@ -496,8 +496,8 @@ export class ShelfOrderDetailsComponent implements OnInit, OnDestroy, AfterConte
                 ? collection[orderItem.orderItemNumber]
                 : 0
               : orderItem && orderItem.quantity
-              ? orderItem.quantity
-              : 0;
+                ? orderItem.quantity
+                : 0;
             if (quantity > 0 && orderId && orderItemId && orderItemSubsetId) {
               observer.next({
                 orderId: orderId,
@@ -668,7 +668,7 @@ export class ShelfOrderDetailsComponent implements OnInit, OnDestroy, AfterConte
       }
       const path = `/shelf/edit/${this.order.compartmentCode ? this.order.compartmentCode : this.order.orderId}/${this.order.orderId}/${
         this.status
-      }/${this.order.compartmentCode ? 'c' : 'o'}/shelf/0/0`;
+        }/${this.order.compartmentCode ? 'c' : 'o'}/shelf/0/0`;
       this.store.dispatch(
         new AddBreadcrumb(
           <Breadcrumb>{
@@ -794,7 +794,7 @@ export class ShelfOrderDetailsComponent implements OnInit, OnDestroy, AfterConte
 
   detectChanges() {
     setTimeout(() => {
-      if (this.cdrf !== null && this.cdrf !== undefined && !(this.cdrf as ViewRef_).destroyed) {
+      if (this.cdrf !== null && this.cdrf !== undefined && !(this.cdrf as ViewRef).destroyed) {
         this.cdrf.detectChanges();
       }
     }, 0);

apps/sales/src/app/modules/shelf/pages/shelf-search-results/shelf-search-results.component.ts

@@ -22,7 +22,7 @@ import { CollectingShelfSelectors } from 'apps/sales/src/app/core/store/selector
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ShelfSearchResultsComponent implements OnInit, OnDestroy {
-  @ViewChild('scroller') scroller: CdkVirtualScrollViewport;
+  @ViewChild('scroller', { static: false }) scroller: CdkVirtualScrollViewport;
 
   shelfSearch: ShelfSearch;
   ds: ShelfSearchDataSource;
@@ -34,7 +34,7 @@ export class ShelfSearchResultsComponent implements OnInit, OnDestroy {
   doScroll = true;
   useCache = false;
 
-  constructor(private store: Store, private collectingShelf: CollectingShelfService, private cdr: ChangeDetectorRef) {}
+  constructor(private store: Store, private collectingShelf: CollectingShelfService, private cdr: ChangeDetectorRef) { }
 
   ngOnInit() {
     this.store.dispatch(new ClearShelfOrdersForProcess());

apps/sales/src/app/pages/content/content.component.ts

@@ -19,10 +19,10 @@ import { RemissionStartedLeaveDialogComponent } from '../../modules/remission/co
   styleUrls: ['./content.component.scss']
 })
 export class ContentPageComponent implements OnInit, OnDestroy {
-  @ViewChild(ErrorComponent) element: ErrorComponent;
-  @ViewChild(RemissionStartedLeaveDialogComponent) remissionStartedLeaveDialog: RemissionStartedLeaveDialogComponent;
-  @ViewChild(RemissionLeaveDialogComponent) remissionLeavingDialog: RemissionLeaveDialogComponent;
-  @ViewChild(RemissionReminderDialogComponent) remissionReminderDialog: RemissionReminderDialogComponent;
+  @ViewChild(ErrorComponent, { static: false }) element: ErrorComponent;
+  @ViewChild(RemissionStartedLeaveDialogComponent, { static: false }) remissionStartedLeaveDialog: RemissionStartedLeaveDialogComponent;
+  @ViewChild(RemissionLeaveDialogComponent, { static: false }) remissionLeavingDialog: RemissionLeaveDialogComponent;
+  @ViewChild(RemissionReminderDialogComponent, { static: false }) remissionReminderDialog: RemissionReminderDialogComponent;
   module: ModuleSwitcher = ModuleSwitcher.Customer;
   destroy$ = new Subject();
   showBreadcrumbs$: Observable<boolean>;

libs/shared/src/lib/collecting-shelf-scanner/collecting-shelf-scanner-scandit.component.ts

@@ -28,7 +28,7 @@ export class CollectingShelfScannerScanditComponent implements AfterViewInit, On
     enabledSymbologies: [Barcode.Symbology.CODE128, Barcode.Symbology.EAN13]
   });
 
-  @ViewChild('scanner') scanner: ScanditSdkBarcodePickerComponent;
+  @ViewChild('scanner', { static: false }) scanner: ScanditSdkBarcodePickerComponent;
   log = 'tst';
   constructor(private cameraError: CameraErrorHandler, private cdRef: ChangeDetectorRef, private native: NativeContainerService) {
     this.webview = this.native.isUiWebview();

libs/shared/src/lib/customer-card-scanner/customer-card-scanner-scandit.component.ts

@@ -28,7 +28,7 @@ export class CustomerCardScannerScanditComponent implements AfterViewInit, OnDes
     enabledSymbologies: [Barcode.Symbology.CODE128, Barcode.Symbology.EAN13],
   });
 
-  @ViewChild('scanner') scanner: ScanditSdkBarcodePickerComponent;
+  @ViewChild('scanner', { static: false }) scanner: ScanditSdkBarcodePickerComponent;
   log = 'tst';
   constructor(private cameraError: CameraErrorHandler, private cdRef: ChangeDetectorRef, private native: NativeContainerService) {
     this.webview = this.native.isUiWebview();

libs/shared/src/lib/remission-container-scanner/remission-container-scanner-scandit.component.ts

@@ -28,7 +28,7 @@ export class RemissionContainerScannerScanditComponent implements AfterViewInit,
     enabledSymbologies: [Barcode.Symbology.CODE128, Barcode.Symbology.EAN13]
   });
 
-  @ViewChild('scanner') scanner: ScanditSdkBarcodePickerComponent;
+  @ViewChild('scanner', { static: false }) scanner: ScanditSdkBarcodePickerComponent;
   log = 'tst';
   constructor(private cameraError: CameraErrorHandler, private cdRef: ChangeDetectorRef, private native: NativeContainerService) {
     this.webview = this.native.isUiWebview().isNative;

libs/shared/src/lib/remission-product-scanner/remission-product-scanner-scandit.component.ts

@@ -28,7 +28,7 @@ export class RemissionProductScannerScanditComponent implements AfterViewInit, O
     enabledSymbologies: [Barcode.Symbology.CODE128, Barcode.Symbology.EAN13]
   });
 
-  @ViewChild('scanner') scanner: ScanditSdkBarcodePickerComponent;
+  @ViewChild('scanner', { static: false }) scanner: ScanditSdkBarcodePickerComponent;
   log = 'tst';
   constructor(private cameraError: CameraErrorHandler, private cdRef: ChangeDetectorRef, private native: NativeContainerService) {
     this.webview = this.native.isUiWebview();

libs/shared/src/lib/remission-shipping-document-scanner/remission-shipping-document-scanner-scandit.component.ts

@@ -69,7 +69,7 @@ export class RemissionShippingDocumentScannerScanditComponent
 
   public settings: ScanSettings;
 
-  @ViewChild('scanner') scanner: ScanditSdkBarcodePickerComponent;
+  @ViewChild('scanner', { static: false }) scanner: ScanditSdkBarcodePickerComponent;
   log = 'tst';
   constructor(
     private cameraError: CameraErrorHandler,

libs/shared/src/lib/signature-pad/signature-pad.component.ts

@@ -7,7 +7,7 @@ import { AfterViewInit, Component, ViewChild } from '@angular/core';
   template: ` <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad> `,
 })
 export class SignaturePadComponent implements AfterViewInit {
-  @ViewChild(SignaturePad) signaturePad: SignaturePad;
+  @ViewChild(SignaturePad, { static: false }) signaturePad: SignaturePad;
 
   public signaturePadOptions: Object = {
     // passed through to szimek/signature_pad constructor
@@ -16,7 +16,7 @@ export class SignaturePadComponent implements AfterViewInit {
     canvasHeight: 200,
   };
 
-  constructor() {}
+  constructor() { }
 
   ngAfterViewInit() {
     // this.signaturePad is now available

libs/ui/src/lib/button/button.component.ts

@@ -4,9 +4,10 @@ import {
   Output,
   EventEmitter,
   ChangeDetectionStrategy,
-  ChangeDetectorRef
+  ChangeDetectorRef,
+  ViewRef
 } from '@angular/core';
-import { ViewRef_ } from '@angular/core/src/view';
+
 
 @Component({
   selector: 'app-button',
@@ -33,7 +34,7 @@ export class ButtonComponent {
   @Output() loaded: EventEmitter<boolean> = new EventEmitter();
   loading = false;
 
-  constructor(private cdrf: ChangeDetectorRef) {}
+  constructor(private cdrf: ChangeDetectorRef) { }
 
   onAction() {
     if (this.disabled) {
@@ -77,7 +78,7 @@ export class ButtonComponent {
       if (
         this.cdrf !== null &&
         this.cdrf !== undefined &&
-        !(this.cdrf as ViewRef_).destroyed
+        !(this.cdrf as ViewRef).destroyed
       ) {
         this.cdrf.detectChanges();
       }

libs/ui/src/lib/date-picker/date-picker.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, Output, EventEmitter } from '@angular/core';
-import { ViewRef_ } from '@angular/core/src/view';
+import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, Output, EventEmitter, ViewRef } from '@angular/core';
+
 
 @Component({
   selector: 'lib-date-picker',
@@ -46,7 +46,7 @@ export class DatePickerComponent implements OnInit {
     6: 'S',
   };
   @Output() changed = new EventEmitter<Date>();
-  constructor(private cdr: ChangeDetectorRef) {}
+  constructor(private cdr: ChangeDetectorRef) { }
 
   ngOnInit() {
     this.initialize();
@@ -148,7 +148,7 @@ export class DatePickerComponent implements OnInit {
 
   detectChanges() {
     setTimeout(() => {
-      if (this.cdr !== null && this.cdr !== undefined && !(this.cdr as ViewRef_).destroyed) {
+      if (this.cdr !== null && this.cdr !== undefined && !(this.cdr as ViewRef).destroyed) {
         this.cdr.detectChanges();
       }
     }, 0);

libs/ui/src/lib/delete-dropdown-fixed/delete-dropdown-fixed.component.ts

@@ -27,14 +27,14 @@ export class DeleteDropdownFixedComponent implements AfterViewInit, OnInit, Afte
   @Output() valueChanges: EventEmitter<number> = new EventEmitter();
   @Output() delete: EventEmitter<boolean> = new EventEmitter();
   @Output() switch: EventEmitter<boolean> = new EventEmitter();
-  @ViewChild('customInput') customInput: ElementRef;
-  @ViewChild('selectedDiv') selectedDiv: ElementRef;
+  @ViewChild('customInput', { static: false }) customInput: ElementRef;
+  @ViewChild('selectedDiv', { static: false }) selectedDiv: ElementRef;
   isOpen = false;
   inputValue: number;
   showInput = false;
   top: number;
   right: number;
-  constructor(private cdrf: ChangeDetectorRef) {}
+  constructor(private cdrf: ChangeDetectorRef) { }
 
   onChange(option: number) {
     if (option === -1) {

libs/ui/src/lib/delete-dropdown/delete-dropdown.component.ts

@@ -28,8 +28,8 @@ export class DeleteDropdownComponent implements AfterViewInit, AfterViewChecked,
   @Output() valueChanges: EventEmitter<number> = new EventEmitter();
   @Output() delete: EventEmitter<boolean> = new EventEmitter();
   @Output() switch: EventEmitter<boolean> = new EventEmitter();
-  @ViewChild('customInput') customInput: ElementRef;
-  @ViewChild('changeButton') changeButton: ButtonComponent;
+  @ViewChild('customInput', { static: false }) customInput: ElementRef;
+  @ViewChild('changeButton', { static: false }) changeButton: ButtonComponent;
   shouldFocus = false;
   timer: any;
 
@@ -54,7 +54,7 @@ export class DeleteDropdownComponent implements AfterViewInit, AfterViewChecked,
   inputValue: number;
   showInput = false;
 
-  constructor(private cdrf: ChangeDetectorRef) {}
+  constructor(private cdrf: ChangeDetectorRef) { }
 
   onChange(option: number) {
     if (option === -1) {

libs/ui/src/lib/dropdown/dropdown.component.ts

@@ -41,10 +41,10 @@ export class DropdownComponent {
   isOpen = false;
   absolute = false;
   top = 152 * this.index;
-  @ViewChild('slectedItem') element: ElementRef;
-  @ViewChild('container') container: ElementRef;
+  @ViewChild('slectedItem', { static: false }) element: ElementRef;
+  @ViewChild('container', { static: false }) container: ElementRef;
 
-  constructor(private cdrf: ChangeDetectorRef) {}
+  constructor(private cdrf: ChangeDetectorRef) { }
 
   onChange(option: any, event: any) {
     if (this.showClosingArrow && (event.target.id === 'close-kv' || event.target.id === 'close-dd')) {

libs/ui/src/lib/input/input.component.ts

@@ -8,9 +8,10 @@ import {
   AfterViewInit,
   ChangeDetectionStrategy,
   OnInit,
-  ChangeDetectorRef
+  ChangeDetectorRef,
+  ViewRef
 } from '@angular/core';
-import { ViewRef_ } from '@angular/core/src/view';
+
 
 @Component({
   selector: 'app-input',
@@ -19,7 +20,7 @@ import { ViewRef_ } from '@angular/core/src/view';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class InputComponent implements OnInit, AfterViewInit {
-  @ViewChild('input') input: ElementRef;
+  @ViewChild('input', { static: false }) input: ElementRef;
   @Input() type: string;
   @Input() id: string;
   @Input() value: string = null;
@@ -42,7 +43,7 @@ export class InputComponent implements OnInit, AfterViewInit {
   }
   @Output() valueChanges: EventEmitter<string> = new EventEmitter();
 
-  constructor(private cdRef: ChangeDetectorRef) {}
+  constructor(private cdRef: ChangeDetectorRef) { }
 
   ngOnInit() {
     this.dirty = this.value && this.value.length > 0 ? true : false;
@@ -68,7 +69,7 @@ export class InputComponent implements OnInit, AfterViewInit {
 
   detectChanges() {
     setTimeout(() => {
-      if (this.cdRef !== null && this.cdRef !== undefined && !(this.cdRef as ViewRef_).destroyed) {
+      if (this.cdRef !== null && this.cdRef !== undefined && !(this.cdRef as ViewRef).destroyed) {
         this.cdRef.detectChanges();
       }
     }, 0);

libs/ui/src/lib/search-dropdown/search-dropdown.component.ts

@@ -33,16 +33,16 @@ export class SearchDropdownComponent implements OnInit {
   @Output() search: EventEmitter<string> = new EventEmitter();
   isOpen = false;
   absolute = false;
-  @ViewChild('slectedItem') element: ElementRef;
+  @ViewChild('slectedItem', { static: false }) element: ElementRef;
   inputValue: string;
   @Input() load = false;
   loading = false;
   _options: string[];
   @Input() left = '0';
 
-  constructor(private cdrf: ChangeDetectorRef) {}
+  constructor(private cdrf: ChangeDetectorRef) { }
 
-  ngOnInit() {}
+  ngOnInit() { }
 
   onChange(option: string) {
     this.valueChanges.emit(option);

libs/ui/src/lib/search-input/search-input.component.ts

@@ -7,10 +7,11 @@ import {
   ElementRef,
   EventEmitter,
   ChangeDetectionStrategy,
-  ChangeDetectorRef
+  ChangeDetectorRef,
+  ViewRef
 } from '@angular/core';
 import { AutocompleteResults } from './models/autocomplete-results.model';
-import { ViewRef_ } from '@angular/core/src/view';
+
 
 @Component({
   selector: 'app-search',
@@ -69,11 +70,11 @@ export class SearchInputComponent implements OnInit {
   @Output() search = new EventEmitter();
   @Output() keypress = new EventEmitter();
   @Output() empty = new EventEmitter();
-  @ViewChild('search') searchInput: ElementRef;
+  @ViewChild('search', { static: false }) searchInput: ElementRef;
   loading = false;
-  constructor(private cdrf: ChangeDetectorRef) {}
+  constructor(private cdrf: ChangeDetectorRef) { }
 
-  ngOnInit() {}
+  ngOnInit() { }
 
   focus() {
     this.searchInput.nativeElement.focus();
@@ -133,7 +134,7 @@ export class SearchInputComponent implements OnInit {
 
   detectChanges() {
     setTimeout(() => {
-      if (this.cdrf !== null && this.cdrf !== undefined && !(this.cdrf as ViewRef_).destroyed) {
+      if (this.cdrf !== null && this.cdrf !== undefined && !(this.cdrf as ViewRef).destroyed) {
         this.cdrf.detectChanges();
       }
     }, 0);

libs/ui/src/lib/select/select.component.ts

@@ -1,5 +1,5 @@
-import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, OnInit, ChangeDetectorRef } from '@angular/core';
-import { ViewRef_ } from '@angular/core/src/view';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, OnInit, ChangeDetectorRef, ViewRef } from '@angular/core';
+
 
 @Component({
   selector: 'app-select',
@@ -38,7 +38,7 @@ export class SelectComponent implements OnInit {
     return scroll ? 'scroll' : '';
   }
 
-  constructor(private cdRef: ChangeDetectorRef) {}
+  constructor(private cdRef: ChangeDetectorRef) { }
 
   ngOnInit() {
     this.dirty = this.value ? true : false;
@@ -71,7 +71,7 @@ export class SelectComponent implements OnInit {
 
   detectChanges() {
     setTimeout(() => {
-      if (this.cdRef !== null && this.cdRef !== undefined && !(this.cdRef as ViewRef_).destroyed) {
+      if (this.cdRef !== null && this.cdRef !== undefined && !(this.cdRef as ViewRef).destroyed) {
         this.cdRef.detectChanges();
       }
     }, 0);

package.json

@@ -37,18 +37,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.2.12",
+    "@angular/animations": "~8.2.14",
     "@angular/cdk": "^7.0.2",
     "@angular/cdk-experimental": "^7.3.7",
-    "@angular/common": "^7.2.12",
-    "@angular/compiler": "~7.2.12",
-    "@angular/core": "~7.2.12",
-    "@angular/forms": "~7.2.12",
-    "@angular/platform-browser": "~7.2.12",
-    "@angular/platform-browser-dynamic": "~7.2.12",
+    "@angular/common": "^8.2.14",
+    "@angular/compiler": "~8.2.14",
+    "@angular/core": "~8.2.14",
+    "@angular/forms": "~8.2.14",
+    "@angular/platform-browser": "~8.2.14",
+    "@angular/platform-browser-dynamic": "~8.2.14",
     "@angular/pwa": "^0.13.4",
-    "@angular/router": "~7.2.12",
-    "@angular/service-worker": "~7.2.12",
+    "@angular/router": "~8.2.14",
+    "@angular/service-worker": "~8.2.14",
     "@cmf/catalog-api": "^0.1.31",
     "@cmf/core": "^0.1.31",
     "@cmf/inventory-api": "^0.1.31",
@@ -74,22 +74,22 @@
     "ngx-perfect-scrollbar": "^7.2.1",
     "ngx-toggle-switch": "^2.0.5",
     "node-sass": "^4.12.0",
-    "rxjs": "~6.4.0",
+    "rxjs": "~6.5.5",
     "scandit-sdk": "^4.1.1",
     "scandit-sdk-angular": "^2.0.0",
     "smoothscroll-polyfill": "^0.4.4",
     "socket.io": "^2.2.0",
-    "tslib": "^1.9.0",
+    "tslib": "^1.13.0",
     "uglify-js": "^3.4.9",
     "web-animations-js": "^2.3.2",
-    "zone.js": "~0.8.29"
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.13.8",
-    "@angular-devkit/build-ng-packagr": "^0.12.4",
-    "@angular/cli": "^7.2.4",
-    "@angular/compiler-cli": "^7.2.12",
-    "@angular/language-service": "~7.2.12",
+    "@angular-devkit/build-angular": "^0.803.26",
+    "@angular-devkit/build-ng-packagr": "^0.803.26",
+    "@angular/cli": "^8.3.26",
+    "@angular/compiler-cli": "^8.2.14",
+    "@angular/language-service": "~8.2.14",
     "@ngxs/devtools-plugin": "^3.4.1",
     "@ngxs/logger-plugin": "^3.4.1",
     "@types/jasmine": "^2.8.16",
@@ -103,14 +103,13 @@
     "karma-coverage-istanbul-reporter": "^2.0.5",
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "ng-packagr": "^4.7.1",
+    "ng-packagr": "^5.7.1",
     "ng-swagger-gen": "^1.5.0",
     "npm-run-all": "^4.1.5",
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
     "tsickle": "^0.34.3",
-    "tslib": "^1.9.0",
     "tslint": "~5.11.0",
-    "typescript": "~3.2.4"
+    "typescript": "~3.5.3"
   }
 }