const route = {
  path: ‘edit’,
  component: EditCmp,
  canDeactivate: [
    (component: EditCmp) => !component.hasUnsavedChanges
  ]
};

const route = {
  path: ‘admin’,
  canActivate: [() => inject(LoginService).isLoggedIn()]
};

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { RouterModule, Routes } from '@angular/router';
import { DogsListComponent } from './dogs-list.component';

export const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'list' },
  { path: 'list', component: DogsListComponent },
  // { path: 'details/:index', component: DogViewComponent },
  {
    path: 'details/:index',
    // lazy load the DogViewComponent
    loadComponent: () =>
      import('./dog-view.component').then((m) => m.DogViewComponent),
  },
];

import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Dog } from './dogs.service';

// routerLink 등의 라우팅 관련 디렉티브를 사용하기 위해
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-dogs-list-card',
  standalone: true,
  imports: [CommonModule, RouterModule],
  template: `...
    <a routerLink="/details/{ { index } }">Learn More</a>
  ...`,
  styles: [`...`]
})
export class DogsListCardComponent {
  @Input() dog!: Dog;       // Dog 인터페이스
  @Input() index!: Number;  // 숫자 Interface
}

import { Component, OnInit } from '@angular/core';
import { CommonModule, Location } from '@angular/common';
import { RouterModule, Router } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterModule],
  template: `...
    <a *ngIf="route == 'Home'" routerLink="/foo">Foo</a>
    <a *ngIf="route != 'Home'" href="javascript:void(0)" 
    (click)="goBack()">🔙 Back</a>

    <router-outlet></router-outlet>
  `,
  styles: [],
})
export class AppComponent implements OnInit {
  title = 'bootstrap-lonely';
  route: string = '';

  constructor(private location: Location, private router: Router) {
    router.events.subscribe((val) => {
      if (location.path() != '') {
        this.route = location.path();
      } else {
        this.route = 'Home';
      }
    });
  }

  ngOnInit() {}

  goBack() {
    // window.history.back();
    this.router.navigate(['/']);
  }
}

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-foo',
  standalone: true,
  imports: [CommonModule],
  template: ` <h3>foo works!</h3> `,
  styles: [],
})
export class FooComponent {}

import { importProvidersFrom } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app/app.component';

const routes = [
  { path: '', children: [] }, // empty path
  { path: 'foo',
    loadComponent: () =>
      import('./app/foo.component').then((m) => m.FooComponent),
  },
];

bootstrapApplication(AppComponent, {
  providers: [importProvidersFrom(RouterModule.forRoot(routes))],
}).catch((err) => console.error(err));

// ts(7015) 오류!
if (window['ngRef']) {
  window['ngRef'].destroy();
}
window['ngRef'] = ref;

/////////////////////////////

interface IMyObj { title: string; content: string; }
const myObj: IMyObj = { title: 'Hi', content: 'Hope all is well' };
const myKey: string = 'content';

// ts(7015) 오류!
myObj[myKey] = 'All is great now!';  // title, content 만 가능

// `as keyof` 캐스팅 처리로 오류 수정
// myObj[myKey as keyof IMyObj] = 'All is great now!';