import { Component } from '@angular/core';
import { Injectable, inject, signal } from '@angular/core';
import { CanActivateFn, Router, RouterLink, RouterOutlet, Routes } from '@angular/router';
@Injectable({ providedIn: 'root' })
class DemoAccess {
  allowed = signal(false);
}
const guard: CanActivateFn = () =>
  inject(DemoAccess).allowed() || inject(Router).createUrlTree(['/denied']);
@Component({
  selector: 'bh-route-guards-part-0',
  standalone: true,
  template: '<p data-result>Catalog</p>',
})
class CatalogPage {}
@Component({
  selector: 'bh-route-guards-part-1',
  standalone: true,
  template: '<p data-result>Local access refused</p>',
})
class DeniedPage {}
@Component({
  selector: 'bh-route-guards-part-2',
  standalone: true,
  template: '<p data-result>Demo loans allowed</p>',
})
class LoansPage {}
export const routes: Routes = [
  { path: '', component: CatalogPage },
  { path: 'loans', canActivate: [guard], component: LoansPage },
  { path: 'denied', component: DeniedPage },
];
@Component({
  selector: 'bh-route-guards',
  standalone: true,
  imports: [RouterLink, RouterOutlet],
  template: `<button type="button" (click)="access.allowed.set(true)">
      Unlock local demo</button
    ><a routerLink="/loans">Loans</a><router-outlet></router-outlet>`,
})
export class App {
  access = inject(DemoAccess);
}