rxjs 6.0.0 compatibility

src/@fuse/components/countdown/countdown.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+
-import 'rxjs/add/observable/interval';
+import { interval } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 import * as moment from 'moment';
 
@@ -31,22 +32,21 @@ export class FuseCountdownComponent implements OnInit
 
         let diff = eventDate.diff(currDate, 'seconds');
 
-        const countDown =
+        const countDown = interval(1000).pipe(
-                  Observable
+            map(value => {
-                      .interval(1000)
+                return diff = diff - 1;
-                      .map(value => {
+            }),
-                          return diff = diff - 1;
+            map(value => {
-                      })
+                const timeLeft = moment.duration(value, 'seconds');
-                      .map(value => {
-                          const timeLeft = moment.duration(value, 'seconds');
 
-                          return {
+                return {
-                              days   : timeLeft.asDays().toFixed(0),
+                    days   : timeLeft.asDays().toFixed(0),
-                              hours  : timeLeft.hours(),
+                    hours  : timeLeft.hours(),
-                              minutes: timeLeft.minutes(),
+                    minutes: timeLeft.minutes(),
-                              seconds: timeLeft.seconds()
+                    seconds: timeLeft.seconds()
-                          };
+                };
-                      });
+            })
+        );
 
         countDown.subscribe(value => {
             this.countdown = value;

src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts

@@ -1,7 +1,8 @@
 import { Component, HostBinding, HostListener, Input, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+
 import { fuseAnimations } from '../../../../animations/index';
 import { FuseConfigService } from '../../../../services/config.service';
-import { Subscription } from 'rxjs/Subscription';
 
 @Component({
     selector   : 'fuse-nav-horizontal-collapse',

src/@fuse/components/navigation/navigation.service.ts

@@ -1,5 +1,5 @@
-import { EventEmitter, Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
-import { Subject } from 'rxjs/Subject';
+import { Subject } from 'rxjs';
 
 @Injectable()
 export class FuseNavigationService

src/@fuse/components/search-bar/search-bar.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Output } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { FuseConfigService } from '@fuse/services/config.service';
 

src/@fuse/components/shortcuts/shortcuts.component.ts

@@ -1,6 +1,7 @@
 import { Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
 import { ObservableMedia } from '@angular/flex-layout';
+
+import { Subscription } from 'rxjs';
 import { CookieService } from 'ngx-cookie-service';
 
 import { FuseMatchMediaService } from '@fuse/services/match-media.service';

src/@fuse/components/sidebar/sidebar.component.ts

@@ -1,7 +1,7 @@
 import { Component, ElementRef, HostBinding, HostListener, Input, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
 import { ObservableMedia } from '@angular/flex-layout';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { FuseSidebarService } from './sidebar.service';
 import { FuseMatchMediaService } from '@fuse/services/match-media.service';

src/@fuse/components/theme-options/theme-options.component.ts

@@ -1,6 +1,6 @@
 import { Component, ElementRef, HostBinding, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { fuseAnimations } from '@fuse/animations';
 import { FuseConfigService } from '@fuse/services/config.service';

src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts

@@ -1,7 +1,7 @@
 import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
 import { MatSidenav } from '@angular/material';
 import { ObservableMedia } from '@angular/flex-layout';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { FuseMatchMediaService } from '@fuse/services/match-media.service';
 import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service';

src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, Directive, ElementRef, HostListener, OnDestroy, OnInit } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import PerfectScrollbar from 'perfect-scrollbar';
 

src/@fuse/services/config.service.ts

@@ -1,7 +1,8 @@
 import { Inject, Injectable, InjectionToken } from '@angular/core';
 import { NavigationEnd, NavigationStart, Router } from '@angular/router';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { Platform } from '@angular/cdk/platform';
+import { BehaviorSubject } from 'rxjs';
+
 import * as _ from 'lodash';
 
 // Create the injection token for the custom config

src/@fuse/services/match-media.service.ts

@@ -1,6 +1,6 @@
 import { MediaChange, ObservableMedia } from '@angular/flex-layout';
 import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { BehaviorSubject } from 'rxjs';
 
 @Injectable()
 export class FuseMatchMediaService

src/app/main/content/apps/academy/course.service.ts

@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-
+import { BehaviorSubject, Observable } from 'rxjs';
-import { Observable } from 'rxjs/Observable';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
 export class AcademyCourseService implements Resolve<any>

src/app/main/content/apps/academy/course/course.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 import { fuseAnimations } from '@fuse/animations';

src/app/main/content/apps/academy/courses.service.ts

@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-
+import { BehaviorSubject, Observable } from 'rxjs';
-import { Observable } from 'rxjs/Observable';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
 export class AcademyCoursesService implements Resolve<any>

src/app/main/content/apps/academy/courses/courses.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { fuseAnimations } from '@fuse/animations';
 

src/app/main/content/apps/calendar/calendar.component.ts

@@ -1,9 +1,8 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { Subject } from 'rxjs/Subject';
 import { MatDialog, MatDialogRef } from '@angular/material';
+import { Subject } from 'rxjs';
 import { startOfDay, isSameDay, isSameMonth } from 'date-fns';
-
 import { CalendarEvent, CalendarEventAction, CalendarEventTimesChangedEvent, CalendarMonthViewDay } from 'angular-calendar';
 
 import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';

src/app/main/content/apps/calendar/calendar.service.ts

@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-
+import { Observable, Subject } from 'rxjs';
-import { Observable } from 'rxjs/Observable';
-import { Subject } from 'rxjs/Subject';
 
 @Injectable()
 export class CalendarService implements Resolve<any>

src/app/main/content/apps/chat/chat.service.ts

@@ -1,10 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
-import { Observable } from 'rxjs/Observable';
-import { Subject } from 'rxjs/Subject';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 import { FuseUtils } from '@fuse/utils';
 

src/app/main/content/apps/chat/sidenavs/left/user/user.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import 'rxjs/add/operator/debounceTime';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import 'rxjs/add/operator/distinctUntilChanged';
 
 import { ChatService } from '../../../chat.service';
 
@@ -27,14 +26,14 @@ export class FuseChatUserSidenavComponent implements OnInit, OnDestroy
 
     ngOnInit()
     {
-        this.onFormChange = this.userForm.valueChanges
+        this.onFormChange = this.userForm.valueChanges.pipe(
-                                .debounceTime(500)
+            debounceTime(500),
-                                .distinctUntilChanged()
+            distinctUntilChanged()
-                                .subscribe(data => {
+        ).subscribe(data => {
-                                    this.user.mood = data.mood;
+            this.user.mood = data.mood;
-                                    this.user.status = data.status;
+            this.user.status = data.status;
-                                    this.chatService.updateUserData(this.user);
+            this.chatService.updateUserData(this.user);
-                                });
+        });
     }
 
     changeLeftSidenavView(view)

src/app/main/content/apps/contacts/contact-list/contact-list.component.ts

@@ -2,8 +2,7 @@ import { Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation
 import { FormGroup } from '@angular/forms';
 import { MatDialog, MatDialogRef } from '@angular/material';
 import { DataSource } from '@angular/cdk/collections';
-import { Subscription } from 'rxjs/Subscription';
+import { Observable, Subscription } from 'rxjs';
-import { Observable } from 'rxjs/Observable';
 
 import { fuseAnimations } from '@fuse/animations';
 import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';

src/app/main/content/apps/contacts/contacts.component.ts

@@ -1,10 +1,10 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
-import { Subscription } from 'rxjs/Subscription';
 import { MatDialog } from '@angular/material';
 
+import { Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
 import { fuseAnimations } from '@fuse/animations';
 
 import { FuseContactsContactFormDialogComponent } from './contact-form/contact-form.component';
@@ -63,8 +63,10 @@ export class FuseContactsComponent implements OnInit, OnDestroy
                 });
 
         this.searchInput.valueChanges
-            .debounceTime(300)
+            .pipe(
-            .distinctUntilChanged()
+                debounceTime(300),
+                distinctUntilChanged()
+            )
             .subscribe(searchText => {
                 this.contactsService.onSearchTextChanged.next(searchText);
             });

src/app/main/content/apps/contacts/contacts.service.ts

@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import { Subject } from 'rxjs/Subject';
 
 import { FuseUtils } from '@fuse/utils';
 

src/app/main/content/apps/contacts/sidenavs/main/main.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { ContactsService } from '../../contacts.service';
 

src/app/main/content/apps/dashboards/analytics/analytics.service.ts

@@ -1,8 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-
+import { Observable } from 'rxjs';
-import { Observable } from 'rxjs/Observable';
 
 @Injectable()
 export class AnalyticsDashboardService implements Resolve<any>

src/app/main/content/apps/dashboards/project/project.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { DataSource } from '@angular/cdk/collections';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { BehaviorSubject, Observable } from 'rxjs';
-import { Observable } from 'rxjs/Observable';
+
 import * as shape from 'd3-shape';
 
 import { fuseAnimations } from '@fuse/animations';

src/app/main/content/apps/dashboards/project/project.service.ts

@@ -1,8 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-
+import { Observable } from 'rxjs';
-import { Observable } from 'rxjs/Observable';
 
 @Injectable()
 export class ProjectDashboardService implements Resolve<any>

src/app/main/content/apps/e-commerce/dashboard/dashboard.service.ts

@@ -1,8 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-
+import { Observable } from 'rxjs';
-import { Observable } from 'rxjs/Observable';
 
 @Injectable()
 export class EcommerceDashboardService implements Resolve<any>

src/app/main/content/apps/e-commerce/order/order.component.ts

@@ -1,12 +1,6 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import 'rxjs/add/operator/startWith';
+import { Subscription } from 'rxjs';
-import 'rxjs/add/observable/merge';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/observable/fromEvent';
-import { Subscription } from 'rxjs/Subscription';
 
 import { fuseAnimations } from '@fuse/animations';
 

src/app/main/content/apps/e-commerce/order/order.service.ts

@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-
+import { BehaviorSubject, Observable } from 'rxjs';
-import { Observable } from 'rxjs/Observable';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
 export class EcommerceOrderService implements Resolve<any>

src/app/main/content/apps/e-commerce/orders/orders.component.ts

@@ -1,14 +1,9 @@
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { MatPaginator, MatSort } from '@angular/material';
 import { DataSource } from '@angular/cdk/collections';
-import { Observable } from 'rxjs/Observable';
+
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { merge, Observable, BehaviorSubject, fromEvent } from 'rxjs';
-import 'rxjs/add/operator/startWith';
+import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
-import 'rxjs/add/observable/merge';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/observable/fromEvent';
 
 import { fuseAnimations } from '@fuse/animations';
 import { FuseUtils } from '@fuse/utils';
@@ -40,16 +35,16 @@ export class FuseEcommerceOrdersComponent implements OnInit
     {
         this.dataSource = new FilesDataSource(this.ordersService, this.paginator, this.sort);
 
-        Observable.fromEvent(this.filter.nativeElement, 'keyup')
+        fromEvent(this.filter.nativeElement, 'keyup').pipe(
-                  .debounceTime(150)
+            debounceTime(150),
-                  .distinctUntilChanged()
+            distinctUntilChanged()
-                  .subscribe(() => {
+        ).subscribe(() => {
-                      if ( !this.dataSource )
+            if ( !this.dataSource )
-                      {
+            {
-                          return;
+                return;
-                      }
+            }
-                      this.dataSource.filter = this.filter.nativeElement.value;
+            this.dataSource.filter = this.filter.nativeElement.value;
-                  });
+        });
     }
 }
 
@@ -97,19 +92,22 @@ export class FilesDataSource extends DataSource<any>
             this._filterChange,
             this._sort.sortChange
         ];
-        return Observable.merge(...displayDataChanges).map(() => {
-            let data = this.ordersService.orders.slice();
 
-            data = this.filterData(data);
+        return merge(...displayDataChanges).pipe(map(() => {
 
-            this.filteredData = [...data];
+                let data = this.ordersService.orders.slice();
 
-            data = this.sortData(data);
+                data = this.filterData(data);
 
-            // Grab the page's slice of data.
+                this.filteredData = [...data];
-            const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
+
-            return data.splice(startIndex, this._paginator.pageSize);
+                data = this.sortData(data);
-        });
+
+                // Grab the page's slice of data.
+                const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
+                return data.splice(startIndex, this._paginator.pageSize);
+            })
+        );
 
     }
 

src/app/main/content/apps/e-commerce/orders/orders.service.ts

@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-
+import { BehaviorSubject, Observable } from 'rxjs';
-import { Observable } from 'rxjs/Observable';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
 export class EcommerceOrdersService implements Resolve<any>

src/app/main/content/apps/e-commerce/product/product.component.ts

@@ -1,14 +1,7 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { MatSnackBar } from '@angular/material';
-
+import { Subscription } from 'rxjs';
-import 'rxjs/add/operator/startWith';
-import 'rxjs/add/observable/merge';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/observable/fromEvent';
-import { Subscription } from 'rxjs/Subscription';
 
 import { fuseAnimations } from '@fuse/animations';
 import { FuseUtils } from '@fuse/utils';

src/app/main/content/apps/e-commerce/product/product.service.ts

@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-
+import { BehaviorSubject, Observable } from 'rxjs';
-import { Observable } from 'rxjs/Observable';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
 export class EcommerceProductService implements Resolve<any>

src/app/main/content/apps/e-commerce/products/products.component.ts

@@ -2,14 +2,8 @@ import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { MatPaginator, MatSort } from '@angular/material';
 import { DataSource } from '@angular/cdk/collections';
 
-import 'rxjs/add/operator/startWith';
+import { merge, Observable, BehaviorSubject, fromEvent } from 'rxjs';
-import 'rxjs/add/observable/merge';
+import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/observable/fromEvent';
-import { Observable } from 'rxjs/Observable';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 import { fuseAnimations } from '@fuse/animations';
 import { FuseUtils } from '@fuse/utils';
@@ -40,16 +34,18 @@ export class FuseEcommerceProductsComponent implements OnInit
     ngOnInit()
     {
         this.dataSource = new FilesDataSource(this.productsService, this.paginator, this.sort);
-        Observable.fromEvent(this.filter.nativeElement, 'keyup')
+
-                  .debounceTime(150)
+        fromEvent(this.filter.nativeElement, 'keyup').pipe(
-                  .distinctUntilChanged()
+            debounceTime(150),
-                  .subscribe(() => {
+            distinctUntilChanged()
-                      if ( !this.dataSource )
+        ).subscribe(() => {
-                      {
+            if ( !this.dataSource )
-                          return;
+            {
-                      }
+                return;
-                      this.dataSource.filter = this.filter.nativeElement.value;
+            }
-                  });
+
+            this.dataSource.filter = this.filter.nativeElement.value;
+        });
     }
 }
 
@@ -98,19 +94,21 @@ export class FilesDataSource extends DataSource<any>
             this._sort.sortChange
         ];
 
-        return Observable.merge(...displayDataChanges).map(() => {
+        return merge(...displayDataChanges).pipe(map(() => {
-            let data = this.productsService.products.slice();
 
-            data = this.filterData(data);
+                let data = this.productsService.products.slice();
 
-            this.filteredData = [...data];
+                data = this.filterData(data);
 
-            data = this.sortData(data);
+                this.filteredData = [...data];
 
-            // Grab the page's slice of data.
+                data = this.sortData(data);
-            const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
+
-            return data.splice(startIndex, this._paginator.pageSize);
+                // Grab the page's slice of data.
-        });
+                const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
+                return data.splice(startIndex, this._paginator.pageSize);
+            }
+        ));
     }
 
     filterData(data)
@@ -122,7 +120,9 @@ export class FilesDataSource extends DataSource<any>
         return FuseUtils.filterArrayByString(data, this.filter);
     }
 
-    sortData(data): any[]
+    sortData(data)
+        :
+        any[]
     {
         if ( !this._sort.active || this._sort.direction === '' )
         {

src/app/main/content/apps/e-commerce/products/products.service.ts

@@ -1,8 +1,7 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
 import { HttpClient } from '@angular/common/http';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 @Injectable()
 export class EcommerceProductsService implements Resolve<any>

src/app/main/content/apps/file-manager/file-list/file-list.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { DataSource } from '@angular/cdk/collections';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import { FileManagerService } from '../file-manager.service';
 import { fuseAnimations } from '@fuse/animations/index';

src/app/main/content/apps/file-manager/file-manager.service.ts

@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-
+import { Observable, BehaviorSubject } from 'rxjs';
-import { Observable } from 'rxjs/Observable';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
 export class FileManagerService implements Resolve<any>

src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import { Mail } from '../mail.model';
 import * as fromStore from '../store';

src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import { MailNgrxService } from '../../mail.service';
 import { Mail } from '../../mail.model';

src/app/main/content/apps/mail-ngrx/mail.component.ts

@@ -1,9 +1,10 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
+
 import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
+
-import 'rxjs/add/operator/debounceTime';
+import { Observable } from 'rxjs';
-import 'rxjs/add/operator/distinctUntilChanged';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
 import { FuseConfigService } from '@fuse/services/config.service';
@@ -76,12 +77,12 @@ export class FuseMailNgrxComponent implements OnInit, OnDestroy
             this.searchInput.setValue(searchText);
         });
 
-        this.searchInput.valueChanges
+        this.searchInput.valueChanges.pipe(
-            .debounceTime(300)
+            debounceTime(300),
-            .distinctUntilChanged()
+            distinctUntilChanged()
-            .subscribe(searchText => {
+        ).subscribe(searchText => {
-                this.store.dispatch(new fromStore.SetSearchText(searchText));
+            this.store.dispatch(new fromStore.SetSearchText(searchText));
-            });
+        });
     }
 
     ngOnDestroy()

src/app/main/content/apps/mail-ngrx/mail.service.ts

@@ -1,9 +1,9 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
 import { HttpClient } from '@angular/common/http';
-import { Mail } from './mail.model';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+
+import { Mail } from './mail.model';
 import { MailAppState } from './store/reducers';
 import { getFiltersArr, getFoldersArr, getLabelsArr, getMailsArr } from './store/selectors';
 

src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.ts

@@ -1,9 +1,8 @@
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material';
 import { FormGroup } from '@angular/forms';
-
-import { Observable } from 'rxjs/Observable';
 import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
 
 import { MailNgrxService } from '../../mail.service';
 import * as fromStore from './../../store';

src/app/main/content/apps/mail-ngrx/store/effects/filters.effects.ts

@@ -1,10 +1,9 @@
 import { Injectable } from '@angular/core';
 import { Actions, Effect } from '@ngrx/effects';
-import { Observable } from 'rxjs/Observable';
+
-import 'rxjs/add/operator/delay';
+import { Observable, of } from 'rxjs';
-import 'rxjs/add/operator/map';
-import { of } from 'rxjs/observable/of';
 import { catchError, map, switchMap } from 'rxjs/operators';
+
 import * as FiltersActions from '../actions/filters.actions';
 import { MailNgrxService } from '../../mail.service';
 

src/app/main/content/apps/mail-ngrx/store/effects/folders.effects.ts

@@ -1,10 +1,9 @@
 import { Injectable } from '@angular/core';
 import { Actions, Effect } from '@ngrx/effects';
-import { Observable } from 'rxjs/Observable';
+
-import 'rxjs/add/operator/delay';
+import { Observable, of } from 'rxjs';
-import 'rxjs/add/operator/map';
-import { of } from 'rxjs/observable/of';
 import { catchError, map, switchMap } from 'rxjs/operators';
+
 import * as FoldersActions from '../actions/folders.actions';
 import { MailNgrxService } from '../../mail.service';
 

src/app/main/content/apps/mail-ngrx/store/effects/labels.effects.ts

@@ -1,10 +1,9 @@
 import { Injectable } from '@angular/core';
 import { Actions, Effect } from '@ngrx/effects';
-import { Observable } from 'rxjs/Observable';
+
-import 'rxjs/add/operator/delay';
+import { Observable, of } from 'rxjs';
-import 'rxjs/add/operator/map';
-import { of } from 'rxjs/observable/of';
 import { catchError, map, switchMap } from 'rxjs/operators';
+
 import * as LabelsActions from '../actions/labels.actions';
 import { MailNgrxService } from '../../mail.service';
 

src/app/main/content/apps/mail-ngrx/store/effects/mails.effects.ts

@@ -1,9 +1,9 @@
 import { Injectable } from '@angular/core';
 import { Action, Store } from '@ngrx/store';
 import { Actions, Effect } from '@ngrx/effects';
-import { Observable, of } from 'rxjs';
+
-import { catchError, map, mergeMap, exhaustMap, withLatestFrom } from 'rxjs/operators';
+import { Observable, of, forkJoin } from 'rxjs';
-import 'rxjs/add/operator/debounceTime';
+import { catchError, debounceTime, map, mergeMap, exhaustMap, withLatestFrom } from 'rxjs/operators';
 
 import { getRouterState, State } from 'app/store/reducers';
 import { getMailsState } from '../selectors';
@@ -83,10 +83,11 @@ export class MailsEffect
             .ofType<MailsActions.UpdateMail>(MailsActions.UPDATE_MAIL)
             .pipe(
                 exhaustMap((action) => {
-                    return this.mailService.updateMail(action.payload)
+                    return this.mailService.updateMail(action.payload).pipe(
-                               .map(() => {
+                        map(() => {
-                                   return new MailsActions.UpdateMailSuccess(action.payload);
+                            return new MailsActions.UpdateMailSuccess(action.payload);
-                               });
+                        })
+                    );
                 })
             );
 
@@ -100,7 +101,7 @@ export class MailsEffect
             .ofType<MailsActions.UpdateMails>(MailsActions.UPDATE_MAILS)
             .pipe(
                 exhaustMap((action) => {
-                    return Observable.forkJoin(
+                    return forkJoin(
                         action.payload.map(mail => this.mailService.updateMail(mail)),
                         () => {
                             return new MailsActions.UpdateMailsSuccess();
@@ -182,8 +183,8 @@ export class MailsEffect
     updateMailSuccess: Observable<MailsActions.MailsActionsAll> =
         this.actions
             .ofType<MailsActions.UpdateMailSuccess>(MailsActions.UPDATE_MAIL_SUCCESS)
-            .debounceTime(500)
             .pipe(
+                debounceTime(500),
                 map(() => {
                     return new MailsActions.GetMails();
                 })

src/app/main/content/apps/mail-ngrx/store/guards/resolve.guard.ts

@@ -1,10 +1,10 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, CanActivate } from '@angular/router';
 import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
+
-import { of } from 'rxjs/observable/of';
+import { Observable, forkJoin, of } from 'rxjs';
 import { map, switchMap, catchError, tap, take, filter } from 'rxjs/operators';
-import 'rxjs/add/observable/forkJoin';
+
 import { MailAppState } from '../reducers';
 import * as fromStore from '../index';
 import { getFiltersLoaded, getFoldersLoaded, getLabelsLoaded, getMailsLoaded } from '../selectors';
@@ -38,8 +38,7 @@ export class ResolveGuard implements CanActivate
 
     checkStore(): Observable<any>
     {
-        return Observable
+        return forkJoin(
-            .forkJoin(
                 this.getFolders(),
                 this.getFilters(),
                 this.getLabels()

src/app/main/content/apps/mail/mail-details/mail-details.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { fuseAnimations } from '@fuse/animations';
 

src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.ts

@@ -1,5 +1,5 @@
 import { Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { Mail } from '../../mail.model';
 import { MailService } from '../../mail.service';

src/app/main/content/apps/mail/mail-list/mail-list.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
 import { ActivatedRoute } from '@angular/router';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { fuseAnimations } from '@fuse/animations';
 

src/app/main/content/apps/mail/mail.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { Subscription } from 'rxjs/Subscription';
+
-import 'rxjs/add/operator/debounceTime';
+import { Subscription } from 'rxjs';
-import 'rxjs/add/operator/distinctUntilChanged';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
 
@@ -84,9 +84,10 @@ export class FuseMailComponent implements OnInit, OnDestroy
                     }
                 });
 
-        this.searchInput.valueChanges
+        this.searchInput.valueChanges.pipe(
-            .debounceTime(300)
+            debounceTime(300),
-            .distinctUntilChanged()
+            distinctUntilChanged()
+        )
             .subscribe(searchText => {
                 this.mailService.onSearchTextChanged.next(searchText);
             });

src/app/main/content/apps/mail/mail.service.ts

@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-
+import { BehaviorSubject, Observable } from 'rxjs';
-import { Observable } from 'rxjs/Observable';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 import { FuseUtils } from '@fuse/utils';
 

src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { fuseAnimations } from '@fuse/animations';
 

src/app/main/content/apps/scrumboard/board/board.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
 import { ActivatedRoute } from '@angular/router';
-import { Subscription } from 'rxjs/Subscription';
+
+import { Subscription } from 'rxjs';
 
 import { fuseAnimations } from '@fuse/animations';
 

src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.ts

@@ -1,7 +1,8 @@
 import { Component, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { NgForm } from '@angular/forms/src/forms';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef, MatMenuTrigger } from '@angular/material';
-import { Subscription } from 'rxjs/Subscription';
+
+import { Subscription } from 'rxjs';
 
 import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
 import { FuseUtils } from '@fuse/utils';

src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsulation } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
+
+import { Subscription } from 'rxjs';
 
 import { fuseAnimations } from '@fuse/animations';
 import { FuseUtils } from '@fuse/utils';

src/app/main/content/apps/scrumboard/board/list/list.component.ts

@@ -1,7 +1,8 @@
 import { Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatDialog, MatDialogRef } from '@angular/material';
-import { Subscription } from 'rxjs/Subscription';
+
+import { Subscription } from 'rxjs';
 
 import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
 import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';

src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
+
+import { Subscription } from 'rxjs';
 
 import { MatColors } from '@fuse/mat-colors';
 

src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
+
+import { Subscription } from 'rxjs';
 
 import { fuseAnimations } from '@fuse/animations';
 

src/app/main/content/apps/scrumboard/scrumboard.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { Subscription } from 'rxjs/Subscription';
+
+import { Subscription } from 'rxjs';
 
 import { fuseAnimations } from '@fuse/animations';
 

src/app/main/content/apps/scrumboard/scrumboard.service.ts

@@ -2,8 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable, BehaviorSubject } from 'rxjs';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
 export class ScrumboardService implements Resolve<any>

src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { fuseAnimations } from '@fuse/animations';
 

src/app/main/content/apps/todo/todo-details/todo-details.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { Subscription } from 'rxjs/Subscription';
+
-import 'rxjs/add/operator/debounceTime';
+import { Subscription } from 'rxjs';
-import 'rxjs/add/operator/distinctUntilChanged';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 import { FuseUtils } from '@fuse/utils';
 import { fuseAnimations } from '@fuse/animations';
@@ -53,12 +53,12 @@ export class FuseTodoDetailsComponent implements OnInit, OnDestroy
                         this.todoForm = this.createTodoForm();
 
                         this.onFormChange =
-                            this.todoForm.valueChanges
+                            this.todoForm.valueChanges.pipe(
-                                .debounceTime(500)
+                                debounceTime(500),
-                                .distinctUntilChanged()
+                                distinctUntilChanged()
-                                .subscribe(data => {
+                            ).subscribe(data => {
-                                    this.todoService.updateTodo(data);
+                                this.todoService.updateTodo(data);
-                                });
+                            });
                     }
                 });
 

src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.ts

@@ -1,6 +1,6 @@
 import { Component, HostBinding, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { Todo } from '../../todo.model';
 import { TodoService } from '../../todo.service';

src/app/main/content/apps/todo/todo-list/todo-list.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
 import { ActivatedRoute } from '@angular/router';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { fuseAnimations } from '@fuse/animations';
 

src/app/main/content/apps/todo/todo.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { Subscription } from 'rxjs/Subscription';
+
-import 'rxjs/add/operator/debounceTime';
+import { Subscription } from 'rxjs';
-import 'rxjs/add/operator/distinctUntilChanged';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 import { fuseAnimations } from '@fuse/animations';
 
@@ -58,12 +58,12 @@ export class FuseTodoComponent implements OnInit, OnDestroy
                     this.tags = this.todoService.tags;
                 });
 
-        this.searchInput.valueChanges
+        this.searchInput.valueChanges.pipe(
-            .debounceTime(300)
+            debounceTime(300),
-            .distinctUntilChanged()
+            distinctUntilChanged()
-            .subscribe(searchText => {
+        ).subscribe(searchText => {
-                this.todoService.onSearchTextChanged.next(searchText);
+            this.todoService.onSearchTextChanged.next(searchText);
-            });
+        });
 
         this.onCurrentTodoChanged =
             this.todoService.onCurrentTodoChanged

src/app/main/content/apps/todo/todo.service.ts

@@ -2,9 +2,7 @@ import { Injectable } from '@angular/core';
 import { Location } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import { Subject } from 'rxjs/Subject';
 
 import { FuseUtils } from '@fuse/utils';
 

src/app/main/content/components/angular-material/example-viewer/example-viewer.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, Component, ComponentFactoryResolver, ComponentRef, Input, OnDestroy, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
 import { MatSnackBar } from '@angular/material';
-import 'rxjs/add/operator/first';
+
 import 'prismjs/components/prism-scss';
 import 'prismjs/components/prism-typescript';
 

src/app/main/content/content.component.ts

@@ -1,9 +1,8 @@
 import { Component, HostBinding, OnDestroy } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
-import 'rxjs/add/operator/filter';
+import { filter, map } from 'rxjs/operators';
-import 'rxjs/add/operator/map';
 
 import { fuseAnimations } from '@fuse/animations/index';
 import { FuseConfigService } from '@fuse/services/config.service';
@@ -31,29 +30,29 @@ export class FuseContentComponent implements OnDestroy
         private fuseConfig: FuseConfigService
     )
     {
-        this.router.events
+        this.router.events.pipe(
-            .filter((event) => event instanceof NavigationEnd)
+            filter((event) => event instanceof NavigationEnd),
-            .map(() => this.activatedRoute)
+            map(() => this.activatedRoute)
-            .subscribe((event) => {
+        ).subscribe((event) => {
-                switch ( this.fuseSettings.routerAnimation )
+            switch ( this.fuseSettings.routerAnimation )
-                {
+            {
-                    case 'fadeIn':
+                case 'fadeIn':
-                        this.routeAnimationFade = !this.routeAnimationFade;
+                    this.routeAnimationFade = !this.routeAnimationFade;
-                        break;
+                    break;
-                    case 'slideUp':
+                case 'slideUp':
-                        this.routeAnimationUp = !this.routeAnimationUp;
+                    this.routeAnimationUp = !this.routeAnimationUp;
-                        break;
+                    break;
-                    case 'slideDown':
+                case 'slideDown':
-                        this.routeAnimationDown = !this.routeAnimationDown;
+                    this.routeAnimationDown = !this.routeAnimationDown;
-                        break;
+                    break;
-                    case 'slideRight':
+                case 'slideRight':
-                        this.routeAnimationRight = !this.routeAnimationRight;
+                    this.routeAnimationRight = !this.routeAnimationRight;
-                        break;
+                    break;
-                    case 'slideLeft':
+                case 'slideLeft':
-                        this.routeAnimationLeft = !this.routeAnimationLeft;
+                    this.routeAnimationLeft = !this.routeAnimationLeft;
-                        break;
+                    break;
-                }
+            }
-            });
+        });
 
         this.onConfigChanged =
             this.fuseConfig.onConfigChanged

src/app/main/content/pages/faq/faq.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { Subscription } from 'rxjs/Subscription';
+
-import 'rxjs/add/operator/debounceTime';
+import { Subscription } from 'rxjs';
-import 'rxjs/add/operator/distinctUntilChanged';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 import { FuseUtils } from '@fuse/utils';
 
@@ -35,12 +35,12 @@ export class FuseFaqComponent implements OnInit, OnDestroy
                     this.faqsFiltered = response;
                 });
 
-        this.searchInput.valueChanges
+        this.searchInput.valueChanges.pipe(
-            .debounceTime(300)
+            debounceTime(300),
-            .distinctUntilChanged()
+            distinctUntilChanged()
-            .subscribe(searchText => {
+        ).subscribe(searchText => {
-                this.faqsFiltered = FuseUtils.filterArrayByString(this.faqs, searchText);
+            this.faqsFiltered = FuseUtils.filterArrayByString(this.faqs, searchText);
-            });
+        });
     }
 
     ngOnDestroy()

src/app/main/content/pages/faq/faq.service.ts

@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-
+import { BehaviorSubject, Observable } from 'rxjs';
-import { Observable } from 'rxjs/Observable';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
 export class FaqService implements Resolve<any>

src/app/main/content/pages/invoices/invoice.service.ts

@@ -1,9 +1,8 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { BehaviorSubject, Observable } from 'rxjs';
 
-import { Observable } from 'rxjs/Observable';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
 export class InvoiceService implements Resolve<any>

src/app/main/content/pages/knowledge-base/knowledge-base.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy, ViewEncapsulation} from '@angular/core';
 import { MatDialog } from '@angular/material';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { KnowledgeBaseService } from './knowledge-base.service';
 import { FuseKnowledgeBaseArticleComponent } from './dialogs/article/article.component';

src/app/main/content/pages/knowledge-base/knowledge-base.service.ts

@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-
+import { BehaviorSubject, Observable } from 'rxjs';
-import { Observable } from 'rxjs/Observable';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
 export class KnowledgeBaseService implements Resolve<any>

src/app/main/content/pages/profile/profile.service.ts

@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-
+import { BehaviorSubject, Observable } from 'rxjs';
-import { Observable } from 'rxjs/Observable';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
 export class ProfileService implements Resolve<any>

src/app/main/content/pages/search/search.service.ts

@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-
+import { BehaviorSubject, Observable } from 'rxjs';
-import { Observable } from 'rxjs/Observable';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
 export class SearchService implements Resolve<any>

src/app/main/main.component.ts

@@ -1,7 +1,7 @@
 import { Component, ElementRef, HostBinding, Inject, OnDestroy, Renderer2, ViewEncapsulation } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { Platform } from '@angular/cdk/platform';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { FuseConfigService } from '@fuse/services/config.service';
 

src/app/main/navbar/navbar.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
-import { Subscription } from 'rxjs/Subscription';
+
+import { Subscription } from 'rxjs';
 
 import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';