Merge branch 'master' of github.com:thingsboard/thingsboard

ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts

@@ -14,14 +14,23 @@
 /// limitations under the License.
 ///
 
-import { Component, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import {
+  Component,
+  Injector,
+  Input,
+  OnDestroy,
+  OnInit,
+  StaticProvider,
+  ViewChild,
+  ViewContainerRef
+} from '@angular/core';
 import { TooltipPosition } from '@angular/material/tooltip';
 import { AliasInfo, IAliasController } from '@core/api/widget-api.models';
 import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { TranslateService } from '@ngx-translate/core';
 import { Subscription } from 'rxjs';
 import { BreakpointObserver } from '@angular/cdk/layout';
-import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import { ComponentPortal } from '@angular/cdk/portal';
 import {
   ALIASES_ENTITY_SELECT_PANEL_DATA,
   AliasesEntitySelectPanelComponent,
@@ -136,12 +145,12 @@ export class AliasesEntitySelectComponent implements OnInit, OnDestroy {
     overlayRef.attach(new ComponentPortal(AliasesEntitySelectPanelComponent, this.viewContainerRef, injector));
   }
 
-  private _createAliasesEntitySelectPanelInjector(overlayRef: OverlayRef, data: AliasesEntitySelectPanelData): PortalInjector {
+  private _createAliasesEntitySelectPanelInjector(overlayRef: OverlayRef, data: AliasesEntitySelectPanelData): Injector {
-    const injectionTokens = new WeakMap<any, any>([
+    const providers: StaticProvider[] = [
-      [ALIASES_ENTITY_SELECT_PANEL_DATA, data],
+      {provide: ALIASES_ENTITY_SELECT_PANEL_DATA, useValue: data},
-      [OverlayRef, overlayRef]
+      {provide: OverlayRef, useValue: overlayRef}
-    ]);
+    ];
-    return new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+    return Injector.create({parent: this.viewContainerRef.injector, providers});
   }
 
   private updateDisplayValue() {

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html

@@ -195,7 +195,8 @@
                    [length]="dataSource.total() | async"
                    [pageIndex]="pageLink.page"
                    [pageSize]="pageLink.pageSize"
-                   [pageSizeOptions]="[10, 20, 30]"></mat-paginator>
+                   [pageSizeOptions]="[10, 20, 30]"
+                   showFirstLastButtons></mat-paginator>
     <ngx-hm-carousel fxFlex *ngIf="mode === 'widget' && widgetsList.length > 0"
                      #carousel
                      [(ngModel)]="widgetsCarouselIndex"

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts

@@ -19,9 +19,11 @@ import {
   ChangeDetectionStrategy,
   Component,
   ElementRef,
+  Injector,
   Input,
   NgZone,
   OnInit,
+  StaticProvider,
   ViewChild,
   ViewContainerRef
 } from '@angular/core';
@@ -62,7 +64,7 @@ import {
   EditAttributeValuePanelComponent,
   EditAttributeValuePanelData
 } from './edit-attribute-value-panel.component';
-import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import { ComponentPortal } from '@angular/cdk/portal';
 import { TelemetryWebsocketService } from '@core/ws/telemetry-websocket.service';
 import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
 import { DataKey, Datasource, DatasourceType, Widget, widgetType } from '@shared/models/widget.models';
@@ -319,13 +321,19 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
     overlayRef.backdropClick().subscribe(() => {
       overlayRef.dispose();
     });
-    const injectionTokens = new WeakMap<any, any>([
+    const providers: StaticProvider[] = [
-      [EDIT_ATTRIBUTE_VALUE_PANEL_DATA, {
+      {
-        attributeValue: attribute.value
+        provide: EDIT_ATTRIBUTE_VALUE_PANEL_DATA,
-      } as EditAttributeValuePanelData],
+        useValue: {
-      [OverlayRef, overlayRef]
+          attributeValue: attribute.value
-    ]);
+        } as EditAttributeValuePanelData
-    const injector = new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+      },
+      {
+        provide: OverlayRef,
+        useValue: overlayRef
+      }
+    ];
+    const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
     const componentRef = overlayRef.attach(new ComponentPortal(EditAttributeValuePanelComponent,
       this.viewContainerRef, injector));
     componentRef.onDestroy(() => {

ui-ngx/src/app/modules/home/components/entity/entities-table.component.html

@@ -238,7 +238,8 @@
                        [length]="dataSource.total() | async"
                        [pageIndex]="pageLink.page"
                        [pageSize]="pageLink.pageSize"
-                       [pageSizeOptions]="pageSizeOptions"></mat-paginator>
+                       [pageSizeOptions]="pageSizeOptions"
+                       showFirstLastButtons></mat-paginator>
       </div>
     </div>
   </mat-drawer-content>

ui-ngx/src/app/modules/home/components/filter/filters-edit.component.ts

@@ -14,7 +14,16 @@
 /// limitations under the License.
 ///
 
-import { Component, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import {
+  Component,
+  Injector,
+  Input,
+  OnDestroy,
+  OnInit,
+  StaticProvider,
+  ViewChild,
+  ViewContainerRef
+} from '@angular/core';
 import { TooltipPosition } from '@angular/material/tooltip';
 import { IAliasController } from '@core/api/widget-api.models';
 import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
@@ -28,7 +37,7 @@ import {
   FiltersEditPanelComponent,
   FiltersEditPanelData
 } from '@home/components/filter/filters-edit-panel.component';
-import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import { ComponentPortal } from '@angular/cdk/portal';
 import { UserFilterDialogComponent, UserFilterDialogData } from '@home/components/filter/user-filter-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -153,12 +162,12 @@ export class FiltersEditComponent implements OnInit, OnDestroy {
     }
   }
 
-  private _createFiltersEditPanelInjector(overlayRef: OverlayRef, data: FiltersEditPanelData): PortalInjector {
+  private _createFiltersEditPanelInjector(overlayRef: OverlayRef, data: FiltersEditPanelData): Injector {
-    const injectionTokens = new WeakMap<any, any>([
+    const providers: StaticProvider[] = [
-      [FILTER_EDIT_PANEL_DATA, data],
+      {provide: FILTER_EDIT_PANEL_DATA, useValue: data},
-      [OverlayRef, overlayRef]
+      {provide: OverlayRef, useValue: overlayRef}
-    ]);
+    ];
-    return new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+    return Injector.create({parent: this.viewContainerRef.injector, providers});
   }
 
   private updateFiltersInfo() {

ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html

@@ -67,15 +67,13 @@
       </mat-form-field>
       <section fxLayout="column" [formGroup]="actionTypeFormGroup" [ngSwitch]="widgetActionFormGroup.get('type').value">
         <ng-template [ngSwitchCase]="widgetActionType.openDashboard">
-          <div fxLayout="column">
+          <div class="mat-caption tb-required"
-            <div class="mat-caption tb-required"
+               style="padding-left: 3px; padding-bottom: 10px; color: rgba(0,0,0,0.57);" translate>widget-action.target-dashboard</div>
-                 style="padding-left: 3px; padding-bottom: 10px; color: rgba(0,0,0,0.57);" translate>widget-action.target-dashboard</div>
+          <tb-dashboard-autocomplete
-            <tb-dashboard-autocomplete
+            formControlName="targetDashboardId"
-              formControlName="targetDashboardId"
+            required
-              required
+            [selectFirstDashboard]="true"
-              [selectFirstDashboard]="true"
+          ></tb-dashboard-autocomplete>
-            ></tb-dashboard-autocomplete>
-          </div>
         </ng-template>
         <ng-template [ngSwitchCase]="widgetActionFormGroup.get('type').value === widgetActionType.openDashboardState ||
                                      widgetActionFormGroup.get('type').value === widgetActionType.updateDashboardState ||
@@ -122,26 +120,24 @@
                                      widgetActionFormGroup.get('type').value === widgetActionType.updateDashboardState ||
                                      widgetActionFormGroup.get('type').value === widgetActionType.openDashboard ?
                                      widgetActionFormGroup.get('type').value : ''">
-          <div fxFlex fxLayout="column">
+          <mat-checkbox formControlName="setEntityId">
-            <mat-checkbox formControlName="setEntityId">
+            {{ 'widget-action.set-entity-from-widget' | translate }}
-              {{ 'widget-action.set-entity-from-widget' | translate }}
+          </mat-checkbox>
-            </mat-checkbox>
+          <mat-form-field *ngIf="actionTypeFormGroup.get('setEntityId').value"
-            <mat-form-field *ngIf="actionTypeFormGroup.get('setEntityId').value"
+                          floatLabel="always"
-                            floatLabel="always"
+                          class="mat-block">
-                            class="mat-block">
+            <mat-label translate>alias.state-entity-parameter-name</mat-label>
-              <mat-label translate>alias.state-entity-parameter-name</mat-label>
+            <input matInput
-              <input matInput
+                   placeholder="{{ 'alias.default-entity-parameter-name' | translate }}"
-                     placeholder="{{ 'alias.default-entity-parameter-name' | translate }}"
+                   formControlName="stateEntityParamName">
-                     formControlName="stateEntityParamName">
+          </mat-form-field>
-            </mat-form-field>
-          </div>
         </ng-template>
         <ng-template [ngSwitchCase]="widgetActionFormGroup.get('type').value === widgetActionType.openDashboardState ?
                                      widgetActionFormGroup.get('type').value : ''">
           <mat-checkbox formControlName="openInSeparateDialog">
             {{ 'widget-action.open-in-separate-dialog' | translate }}
           </mat-checkbox>
-          <section fxLayout="column" *ngIf="actionTypeFormGroup.get('openInSeparateDialog').value">
+          <section *ngIf="actionTypeFormGroup.get('openInSeparateDialog').value">
             <mat-form-field class="mat-block">
               <mat-label translate>widget-action.dialog-title</mat-label>
               <input matInput formControlName="dialogTitle">

ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts

@@ -14,11 +14,22 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Inject, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import {
+  Component,
+  forwardRef,
+  Inject,
+  Injector,
+  Input,
+  OnDestroy,
+  OnInit,
+  StaticProvider,
+  ViewChild,
+  ViewContainerRef
+} from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DOCUMENT } from '@angular/common';
 import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
-import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import { ComponentPortal } from '@angular/cdk/portal';
 import { MediaBreakpoints } from '@shared/models/constants';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { WINDOW } from '@core/services/window.service';
@@ -140,12 +151,12 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc
     overlayRef.attach(new ComponentPortal(LegendConfigPanelComponent, this.viewContainerRef, injector));
   }
 
-  private _createLegendConfigPanelInjector(overlayRef: OverlayRef, data: LegendConfigPanelData): PortalInjector {
+  private _createLegendConfigPanelInjector(overlayRef: OverlayRef, data: LegendConfigPanelData): Injector {
-    const injectionTokens = new WeakMap<any, any>([
+    const providers: StaticProvider[] = [
-      [LEGEND_CONFIG_PANEL_DATA, data],
+      {provide: LEGEND_CONFIG_PANEL_DATA, useValue: data},
-      [OverlayRef, overlayRef]
+      {provide: OverlayRef, useValue: overlayRef}
-    ]);
+    ];
-    return new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+    return Injector.create({parent: this.viewContainerRef.injector, providers});
   }
 
   registerOnChange(fn: any): void {

ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html

@@ -140,6 +140,7 @@
                    [length]="alarmsDatasource.total() | async"
                    [pageIndex]="pageLink.page"
                    [pageSize]="pageLink.pageSize"
-                   [pageSizeOptions]="pageSizeOptions"></mat-paginator>
+                   [pageSizeOptions]="pageSizeOptions"
+                   showFirstLastButtons></mat-paginator>
   </div>
 </div>

ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts

@@ -19,9 +19,11 @@ import {
   Component,
   ElementRef,
   EventEmitter,
+  Injector,
   Input,
   NgZone,
   OnInit,
+  StaticProvider,
   ViewChild,
   ViewContainerRef
 } from '@angular/core';
@@ -64,7 +66,7 @@ import {
   widthStyle
 } from '@home/components/widget/lib/table-widget.models';
 import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
-import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import { ComponentPortal } from '@angular/cdk/portal';
 import {
   DISPLAY_COLUMNS_PANEL_DATA,
   DisplayColumnsPanelComponent,
@@ -452,20 +454,26 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
       };
     });
 
-    const injectionTokens = new WeakMap<any, any>([
+    const providers: StaticProvider[] = [
-      [DISPLAY_COLUMNS_PANEL_DATA, {
+      {
-        columns,
+        provide: DISPLAY_COLUMNS_PANEL_DATA,
-        columnsUpdated: (newColumns) => {
+        useValue: {
-          this.displayedColumns = newColumns.filter(column => column.display).map(column => column.def);
+          columns,
-          if (this.enableSelection) {
+          columnsUpdated: (newColumns) => {
-            this.displayedColumns.unshift('select');
+            this.displayedColumns = newColumns.filter(column => column.display).map(column => column.def);
+            if (this.enableSelection) {
+              this.displayedColumns.unshift('select');
+            }
+            this.displayedColumns.push('actions');
           }
-          this.displayedColumns.push('actions');
+        } as DisplayColumnsPanelData
-        }
+      },
-      } as DisplayColumnsPanelData],
+      {
-      [OverlayRef, overlayRef]
+        provide: OverlayRef,
-    ]);
+        useValue: overlayRef
-    const injector = new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+      }
+    ];
+    const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
     overlayRef.attach(new ComponentPortal(DisplayColumnsPanelComponent,
       this.viewContainerRef, injector));
     this.ctx.detectChanges();
@@ -492,15 +500,21 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
     overlayRef.backdropClick().subscribe(() => {
       overlayRef.dispose();
     });
-    const injectionTokens = new WeakMap<any, any>([
+    const providers: StaticProvider[] = [
-      [ALARM_FILTER_PANEL_DATA, {
+      {
-        statusList: this.pageLink.statusList,
+        provide: ALARM_FILTER_PANEL_DATA,
-        severityList: this.pageLink.severityList,
+        useValue: {
-        typeList: this.pageLink.typeList
+          statusList: this.pageLink.statusList,
-      } as AlarmFilterPanelData],
+          severityList: this.pageLink.severityList,
-      [OverlayRef, overlayRef]
+          typeList: this.pageLink.typeList
-    ]);
+        } as AlarmFilterPanelData
-    const injector = new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+      },
+      {
+        provide: OverlayRef,
+        useValue: overlayRef
+      }
+    ];
+    const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
     const componentRef = overlayRef.attach(new ComponentPortal(AlarmFilterPanelComponent,
       this.viewContainerRef, injector));
     componentRef.onDestroy(() => {

ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.ts

@@ -18,9 +18,11 @@ import {
   Component,
   Inject,
   InjectionToken,
+  Injector,
   Input,
   OnDestroy,
   OnInit,
+  StaticProvider,
   ViewChild,
   ViewContainerRef,
   ViewEncapsulation
@@ -41,7 +43,7 @@ import {
 import { KeyValue } from '@angular/common';
 import * as _moment from 'moment';
 import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
-import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import { ComponentPortal } from '@angular/cdk/portal';
 import { MatSelect } from '@angular/material/select';
 import { Subscription } from 'rxjs';
 import { HistoryWindowType, TimewindowType } from '@shared/models/time/time.models';
@@ -142,18 +144,24 @@ export class DateRangeNavigatorWidgetComponent extends PageComponent implements
     overlayRef.backdropClick().subscribe(() => {
       overlayRef.dispose();
     });
-    const injectionTokens = new WeakMap<any, any>([
+    const providers: StaticProvider[] = [
-      [DATE_RANGE_NAVIGATOR_PANEL_DATA, {
+      {
-        model: cloneDateRangeNavigatorModel(this.advancedModel),
+        provide: DATE_RANGE_NAVIGATOR_PANEL_DATA,
-        settings: this.settings,
+        useValue: {
-        onChange: model => {
+          model: cloneDateRangeNavigatorModel(this.advancedModel),
-          this.advancedModel = model;
+          settings: this.settings,
-          this.triggerChange();
+          onChange: model => {
-        }
+            this.advancedModel = model;
-      } as DateRangeNavigatorPanelData],
+            this.triggerChange();
-      [OverlayRef, overlayRef]
+          }
-    ]);
+        } as DateRangeNavigatorPanelData
-    const injector = new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+      },
+      {
+        provide: OverlayRef,
+        useValue: overlayRef
+      }
+    ];
+    const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
     overlayRef.attach(new ComponentPortal(DateRangeNavigatorPanelComponent,
       this.viewContainerRef, injector));
     this.ctx.detectChanges();

ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html

@@ -99,6 +99,7 @@
                    [length]="entityDatasource.total() | async"
                    [pageIndex]="pageLink.page"
                    [pageSize]="pageLink.pageSize"
-                   [pageSizeOptions]="pageSizeOptions"></mat-paginator>
+                   [pageSizeOptions]="pageSizeOptions"
+                   showFirstLastButtons></mat-paginator>
   </div>
 </div>

ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts

@@ -18,9 +18,11 @@ import {
   AfterViewInit,
   Component,
   ElementRef,
+  Injector,
   Input,
   NgZone,
   OnInit,
+  StaticProvider,
   ViewChild,
   ViewContainerRef
 } from '@angular/core';
@@ -70,7 +72,7 @@ import {
   widthStyle
 } from '@home/components/widget/lib/table-widget.models';
 import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
-import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import { ComponentPortal } from '@angular/cdk/portal';
 import {
   DISPLAY_COLUMNS_PANEL_DATA,
   DisplayColumnsPanelComponent,
@@ -422,17 +424,23 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
       };
     });
 
-    const injectionTokens = new WeakMap<any, any>([
+    const providers: StaticProvider[] = [
-      [DISPLAY_COLUMNS_PANEL_DATA, {
+      {
-        columns,
+        provide: DISPLAY_COLUMNS_PANEL_DATA,
-        columnsUpdated: (newColumns) => {
+        useValue: {
-          this.displayedColumns = newColumns.filter(column => column.display).map(column => column.def);
+          columns,
-          this.displayedColumns.push('actions');
+          columnsUpdated: (newColumns) => {
-        }
+            this.displayedColumns = newColumns.filter(column => column.display).map(column => column.def);
-      } as DisplayColumnsPanelData],
+            this.displayedColumns.push('actions');
-      [OverlayRef, overlayRef]
+          }
-    ]);
+        } as DisplayColumnsPanelData
-    const injector = new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+      },
+      {
+        provide: OverlayRef,
+        useValue: overlayRef
+      }
+    ];
+    const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
     overlayRef.attach(new ComponentPortal(DisplayColumnsPanelComponent,
       this.viewContainerRef, injector));
     this.ctx.detectChanges();

ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html

@@ -104,7 +104,8 @@
                        [length]="source.timeseriesDatasource.total() | async"
                        [pageIndex]="source.pageLink.page"
                        [pageSize]="source.pageLink.pageSize"
-                       [pageSizeOptions]="pageSizeOptions"></mat-paginator>
+                       [pageSizeOptions]="pageSizeOptions"
+                       showFirstLastButtons></mat-paginator>
       </mat-tab>
     </mat-tab-group>
   </div>

ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts

@@ -210,7 +210,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
     this.displayPagination = isDefined(this.settings.displayPagination) ? this.settings.displayPagination : true;
     this.hideEmptyLines = isDefined(this.settings.hideEmptyLines) ? this.settings.hideEmptyLines : false;
     this.showTimestamp = this.settings.showTimestamp !== false;
-    this.dateFormatFilter = (this.settings.showMilliseconds !== true) ? 'yyyy-MM-dd HH:mm:ss' :  'yyyy-MM-dd HH:mm:ss.sss';
+    this.dateFormatFilter = (this.settings.showMilliseconds !== true) ? 'yyyy-MM-dd HH:mm:ss' :  'yyyy-MM-dd HH:mm:ss.SSS';
 
     const pageSize = this.settings.defaultPageSize;
     if (isDefined(pageSize) && isNumber(pageSize) && pageSize > 0) {

ui-ngx/src/app/shared/components/dashboard-select.component.ts

@@ -14,7 +14,17 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Inject, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import {
+  Component,
+  forwardRef,
+  Inject,
+  Injector,
+  Input,
+  OnInit,
+  StaticProvider,
+  ViewChild,
+  ViewContainerRef
+} from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable, of } from 'rxjs';
 import { PageLink } from '@shared/models/page/page-link';
@@ -32,7 +42,7 @@ import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { DOCUMENT } from '@angular/common';
 import { WINDOW } from '@core/services/window.service';
-import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import { ComponentPortal } from '@angular/cdk/portal';
 import {
   DASHBOARD_SELECT_PANEL_DATA,
   DashboardSelectPanelComponent,
@@ -186,12 +196,12 @@ export class DashboardSelectComponent implements ControlValueAccessor, OnInit {
     overlayRef.attach(new ComponentPortal(DashboardSelectPanelComponent, this.viewContainerRef, injector));
   }
 
-  private _createDashboardSelectPanelInjector(overlayRef: OverlayRef, data: DashboardSelectPanelData): PortalInjector {
+  private _createDashboardSelectPanelInjector(overlayRef: OverlayRef, data: DashboardSelectPanelData): Injector {
-    const injectionTokens = new WeakMap<any, any>([
+    const providers: StaticProvider[] = [
-      [DASHBOARD_SELECT_PANEL_DATA, data],
+      {provide: DASHBOARD_SELECT_PANEL_DATA, useValue: data},
-      [OverlayRef, overlayRef]
+      {provide: OverlayRef, useValue: overlayRef}
-    ]);
+    ];
-    return new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+    return Injector.create({parent: this.viewContainerRef.injector, providers});
   }
 
   private updateView() {

ui-ngx/src/app/shared/components/time/timewindow.component.ts

@@ -14,7 +14,18 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Inject, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import {
+  Component,
+  forwardRef,
+  Inject,
+  Injector,
+  Input,
+  OnDestroy,
+  OnInit,
+  StaticProvider,
+  ViewChild,
+  ViewContainerRef
+} from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { MillisecondsToTimeStringPipe } from '@shared/pipe/milliseconds-to-time-string.pipe';
@@ -32,7 +43,7 @@ import {
   TimewindowPanelComponent,
   TimewindowPanelData
 } from '@shared/components/time/timewindow-panel.component';
-import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import { ComponentPortal } from '@angular/cdk/portal';
 import { MediaBreakpoints } from '@shared/models/constants';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { WINDOW } from '@core/services/window.service';
@@ -229,12 +240,12 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
     });
   }
 
-  private _createTimewindowPanelInjector(overlayRef: OverlayRef, data: TimewindowPanelData): PortalInjector {
+  private _createTimewindowPanelInjector(overlayRef: OverlayRef, data: TimewindowPanelData): Injector {
-    const injectionTokens = new WeakMap<any, any>([
+    const providers: StaticProvider[] = [
-      [TIMEWINDOW_PANEL_DATA, data],
+      {provide: TIMEWINDOW_PANEL_DATA, useValue: data},
-      [OverlayRef, overlayRef]
+      {provide: OverlayRef, useValue: overlayRef}
-    ]);
+    ];
-    return new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+    return Injector.create({parent: this.viewContainerRef.injector, providers});
   }
 
   registerOnChange(fn: any): void {

ui-ngx/src/app/shared/components/toast.directive.ts

@@ -20,9 +20,11 @@ import {
   Directive,
   ElementRef, HostBinding,
   Inject,
+  Injector,
   Input,
   NgZone,
   OnDestroy, Optional,
+  StaticProvider,
   ViewChild,
   ViewContainerRef
 } from '@angular/core';
@@ -34,7 +36,6 @@ import { BreakpointObserver } from '@angular/cdk/layout';
 import { MediaBreakpoints } from '@shared/models/constants';
 import { MatButton } from '@angular/material/button';
 import Timeout = NodeJS.Timeout;
-import { PortalInjector } from '@angular/cdk/portal';
 
 @Directive({
   selector: '[tb-toast]'
@@ -138,10 +139,10 @@ export class ToastDirective implements AfterViewInit, OnDestroy {
           this.toastComponentRef.destroy();
         }
       };
-      const injectionTokens = new WeakMap<any, any>([
+      const providers: StaticProvider[] = [
-        [MAT_SNACK_BAR_DATA, data]
+        {provide: MAT_SNACK_BAR_DATA, useValue: data}
-      ]);
+      ];
-      const injector = new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+      const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
       this.toastComponentRef = this.viewContainerRef.createComponent(componentFactory, 0, injector);
       this.cd.detectChanges();