ANGULAR GUARDS IN DISNEYLAND PARK

@Injectable({ providedIn: 'root', }) 
export class TicketGuard implements CanActivate {

constructor( private disneyService: DisneyService, private snackBar: MatSnackBar ) {
}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
const ticket = this.disneyService.getTicket();
const isValid = ticket && ticket.startsWith('D');
if (!isValid) {
this.snackBar.open('Your ticket is not valid!', 'OK'); } return isValid;
}
}
const routes: Routes = [ 
{ path: 'home', component: GuardsHomeComponent},
{ path: 'disneyland', component: DisneyComponent,
canActivate: [TicketGuard],
},
{path: '', redirectTo: 'home', pathMatch: 'full'},
];
const routes: Routes = [ 
{path: 'home', component: GuardsHomeComponent},
{
path: 'disneyland',
component: DisneyComponent,
canActivate: [TicketGuard],
canActivateChild: [TicketGuard],

children: [
{ path: 'park', component: ParkDisneyComponent, },
{ path: 'walt', component: WaltDisneyComponent, } ] },
{ path: '', redirectTo: 'home', pathMatch: 'full'},
];
@Injectable({ providedIn: 'root', }) 
export class RidesResolverService implements Resolve<Ride[]> {
constructor(
private disneyService: DisneyService,
private router: Router,
private snackBar: MatSnackBar ) {}
resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot):
Observable<Ride[]> | Observable<never> {

const url = state.url;
const park = url.indexOf('park') > -1 ? DISNEY.PARK : DISNEY.WALT;
return this.disneyService.getRides(park).pipe(
take(1),
mergeMap(rides => {
if (rides?.length > 0) {
return of(rides);

} else
{
this.snackBar.open('Currently all the rides are in maintenance, enjoy the DISNEY shops!', 'OK');
this.router.navigate(['guards', 'disneyland']); return EMPTY;
} }) ); } }
this.route.data .subscribe((data: { rides: Ride[] }) => 
{
this.rides = data.rides;
});
children: [ 
{
path: 'park',
component: ParkDisneyComponent,
resolve: {
rides: RidesResolverService
}
},
{
path: 'walt',
component: WaltDisneyComponent,
resolve: {
rides: RidesResolverService
}

}
@Injectable({ providedIn: 'root', }) 
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
canDeactivate(component: CanComponentDeactivate) {
const canDeactivate = component.canDeactivate ? component.canDeactivate() : true; return canDeactivate;
} }
canDeactivate(): Observable<boolean> | boolean { 
if (this.experiencedDisney) {
return true;
}
const confirmation = window.confirm('You sure you want to leave Walt Disney without experiencing it?');
return of(confirmation);
}
{ 
path: 'park',
component: ParkDisneyComponent,
canDeactivate: [CanDeactivateGuard],

resolve: {
rides: RidesResolverService
} },

--

--

--

Senior Front End Software Engineer focused on Angular. Passionate about learning new skills and sharing my knowledge. Blog agdev.tech in progress.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
AG Dev

AG Dev

Senior Front End Software Engineer focused on Angular. Passionate about learning new skills and sharing my knowledge. Blog agdev.tech in progress.

More from Medium

HOW TO BUILD A LOGIN AND SIGN UP PAGE WITH API AUTHENTICATION IN ANGULAR

1. Angular Reactive Forms & Validations in Reactive Forms

Angular and the Store

Dynamically translating json responses from an api