title: 'filter' does not exist on type 'Observable<Event>'. How can i fix this problem?
body: <p>Good morning everyone.</p>
  <p>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 <code>filter</code> function seems to not exist anymore in the Observable library (Update from 10 to 11 ?).</p>
  <p>I tried to use pipe but since I'm new to Typescript and Angular, I find it difficult to adapt it.</p>
  <p>Here's my code :</p>
  <pre class="lang-js prettyprint-override"><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) =&gt; event instanceof NavigationEnd).subscribe((event: NavigationEnd) =&gt; {
        if (window.outerWidth &gt; 991) {
          window.document.children[0].scrollTop = 0;
        } else {
          window.document.activeElement!.scrollTop = 0;
        }
        this.navbar.sidebarClose();
  
        this.renderer.listen('window', 'scroll', (event) =&gt; {
          const number = window.scrollY;
          var _location = this.location.path();
          _location = _location.split('/')[2];
  
          if ( number &gt; 150 || window.pageYOffset &gt; 150 ) {
            navbar.classList.remove('navbar-transparent');
          } else if ( _location !== 'login' &amp;&amp; this.location.path() !== 'nucleoicons') {
            navbar.classList.add('navbar-transparent');
          }
        })
      })
    }
  }
  </code></pre>
  <p>It's supposed to help me managed my navbar but when I run the project I get this error:</p>
  <pre><code>Error: src/app/app.component.ts:19:37 - error TS2339: Property 'filter' does not exist on type 'Observable&lt;Event&gt;'.
      
  19     var navbar = this.router.events.filter((event:any) =&gt; event instanceof NavigationEnd).subscribe((event: NavigationEnd) =&gt; {
  </code></pre>
  <p>Could someone please help me understand how to make it work ? Also if there is anything wrong with my code please correct me.</p>
  <p>Thank you for your help !</p>