Hey there, everyone!
I'm facing an issue with integrating a template into my Angular project. It seems that the filter function is no longer available in the Observable library (Update from 10 to 11?).
I attempted to use pipe as a solution, but as a newcomer to Typescript and Angular, I'm finding it challenging to adjust.
Below is the snippet of 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');
}
})
})
}
}
The goal of this code is to manage my navbar, but upon running the project, I encounter the following 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) => {
Can someone provide guidance on how to resolve this issue? Any corrections to the code are also welcome.
Thank you in advance for your assistance!