Back button directive Angular
/** Navigation service ***/
import { Injectable } from '@angular/core'
import { Location } from '@angular/common'
import { Router, NavigationEnd } from '@angular/router'
@Injectable({ providedIn: 'root' })
export class NavigationService {
private history: string[] = []
constructor(private router: Router, private location: Location) {
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.history.push(event.urlAfterRedirects)
}
})
}
back(): void {
this.history.pop()
if (this.history.length > 0) {
this.location.back()
} else {
this.router.navigateByUrl('/')
}
}
}
/** create directive ****/
import { Directive, HostListener } from '@angular/core'
import { NavigationService } from './navigation.service'
@Directive({
selector: '[backButton]',
})
export class BackButtonDirective {
constructor(private navigation: NavigationService) {}
@HostListener('click')
onClick(): void {
this.navigation.back()
}
}
/*** use below code to use directive **/
<button backButton>Back with NavigationService</button>