CODEWITHSUNDEEP
angulartypescript
Chuck Pliskin
Chuck Pliskin

Reputation: 1

'filter' does not exist on type 'Observable<Event>'. How can i fix this problem?

Good morning everyone.

Here's my problem, I'm trying to integrate a template to my Angular project but a part of the code is not working. The filter function seems to not exist anymore in the Observable library (Update from 10 to 11 ?).

I tried to use pipe but since I'm new to Typescript and Angular, I find it difficult to adapt it.

Here's my code :

import { DOCUMENT, Location } from '@angular/common';
import { Component, ElementRef, Inject, OnInit, Renderer2, ViewChild } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { NavbarComponent } from './commun/navbar/navbar.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  private _router!: Subscription;
  @ViewChild(NavbarComponent) navbar!: NavbarComponent;

  constructor( private renderer: Renderer2, private router: Router, @Inject(DOCUMENT,) private document: any, private element: ElementRef, public location: Location ) {}

  ngOnInit() {
    var navbar = this.router.events.filter((event:any) => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => {
      if (window.outerWidth > 991) {
        window.document.children[0].scrollTop = 0;
      } else {
        window.document.activeElement!.scrollTop = 0;
      }
      this.navbar.sidebarClose();

      this.renderer.listen('window', 'scroll', (event) => {
        const number = window.scrollY;
        var _location = this.location.path();
        _location = _location.split('/')[2];

        if ( number > 150 || window.pageYOffset > 150 ) {
          navbar.classList.remove('navbar-transparent');
        } else if ( _location !== 'login' && this.location.path() !== 'nucleoicons') {
          navbar.classList.add('navbar-transparent');
        }
      })
    })
  }
}

It's supposed to help me managed my navbar but when I run the project I get this error:

Error: src/app/app.component.ts:19:37 - error TS2339: Property 'filter' does not exist on type 'Observable<Event>'.
    
19     var navbar = this.router.events.filter((event:any) => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => {

Could someone please help me understand how to make it work ? Also if there is anything wrong with my code please correct me.

Thank you for your help !

Upvotes: 0

Views: 2912

Answers (1)

Barremian
Barremian

Reputation: 31125

Most probably you've upgraded from RxJS v5 to RxJS v6+. The method to apply operators changed during this migration.

RxJS v5

import 'rxjs/add/operator/filter';

this.router.events.filter((event:any) => event instanceof NavigationEnd)

RxJS v6+

import { filter } from 'rxjs/operators';

this.router.events.pipe(
  filter((event:any) => event instanceof NavigationEnd)
)

Refer here for an exhaustive migration guide.

Upvotes: 3

Related Questions