library/apps/frontend/src/app/example-usage.md

Frontend Service Usage Examples

Auth Service

import { Component, inject } from '@angular/core';
import { AuthService } from './services/auth.service';

@Component({
  selector: 'app-header',
  template: `
    <div>
      @if (authService.user(); as user) {
        <p>Welcome, {{ user.username }}!</p>
        @if (user.isAdmin) {
          <button (click)="logout()">Logout</button>
        }
      } @else {
        <button (click)="login()">Login with Discord</button>
      }
    </div>
  `
})
export class HeaderComponent {
  authService = inject(AuthService);

  login() {
    this.authService.login();
  }

  logout() {
    this.authService.logout().subscribe();
  }
}

Games Service

import { Component, OnInit, inject, signal } from '@angular/core';
import { GamesService } from './services/games.service';
import { AuthService } from './services/auth.service';
import { Game } from '@library/shared-types';

@Component({
  selector: 'app-games',
  template: `
    <div>
      <h2>My Games</h2>

      @if (authService.isAdmin()) {
        <button (click)="showAddForm = true">Add Game</button>
      }

      <div class="games-grid">
        @for (game of games(); track game.id) {
          <div class="game-card">
            <h3>{{ game.title }}</h3>
            <p>{{ game.platform }}</p>
            <p>Status: {{ game.status }}</p>

            @if (authService.isAdmin()) {
              <button (click)="editGame(game)">Edit</button>
              <button (click)="deleteGame(game.id)">Delete</button>
            }
          </div>
        }
      </div>
    </div>
  `
})
export class GamesComponent implements OnInit {
  gamesService = inject(GamesService);
  authService = inject(AuthService);

  games = signal<Game[]>([]);
  showAddForm = false;

  ngOnInit() {
    this.loadGames();
  }

  loadGames() {
    this.gamesService.getAllGames().subscribe(games => {
      this.games.set(games);
    });
  }

  deleteGame(id: string) {
    if (confirm('Are you sure?')) {
      this.gamesService.deleteGame(id).subscribe(() => {
        this.loadGames();
      });
    }
  }

  editGame(game: Game) {
    // Navigate to edit form or open modal
  }
}

Books Service

// Similar pattern to games
import { BooksService } from './services/books.service';

// In component
booksService = inject(BooksService);
books = signal<Book[]>([]);

ngOnInit() {
  this.booksService.getAllBooks().subscribe(books => {
    this.books.set(books);
  });
}

addBook(book: CreateBookDto) {
  this.booksService.createBook(book).subscribe(() => {
    this.loadBooks();
  });
}

Music Service

// Similar pattern
import { MusicService } from './services/music.service';

musicService = inject(MusicService);

// Filter by type example
getAlbums() {
  this.musicService.getAllMusic().subscribe(music => {
    const albums = music.filter(m => m.type === 'album');
    this.albums.set(albums);
  });
}