import { bootstrapApplication } from '@angular/platform-browser';
import { Component, signal, inject } from '@angular/core';
import { Routes, provideRouter, Router, RouterOutlet, RouterLink } from '@angular/router';

const isLoggedIn = signal(false);

function canActivate() {
  const router = inject(Router);
  return isLoggedIn() || router.createUrlTree(['/']);
}

@Component({ selector: 'home-page', standalone: true, template: `<p>Home</p> <button (click)="login()">Login</button>` })
class Home { login() { isLoggedIn.set(true); } }

@Component({ selector: 'secret-page', standalone: true, template: `<p>Top Secret</p>` })
class Secret {}

const routes = [
  { path: '', component: Home },
  { path: 'secret', component: Secret, canActivate: [canActivate] }
];

@Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet, RouterLink], template: `<a [routerLink]="['/']">Home</a> | <a [routerLink]="['/secret']">Secret</a> <router-outlet></router-outlet>` })
class App {}

bootstrapApplication(App, { providers: [provideRouter(routes)] });

                    

<app-root></app-root>