import { Component, Injectable } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Injectable({
  providedIn: 'root'
})
export class LoggerService {
  private logs: string[] = [];

  log(message: string): void {
    const entry = `[${new Date().toISOString()}] ${message}`;
    this.logs.push(entry);
    console.log(entry);
  }

  getHistory(): string[] {
    return [...this.logs];
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <button (click)="logMessage()">Log a message</button>
    <p>History entries: {{ logger.getHistory().length }}</p>
  `
})
export class AppComponent {
  constructor(private logger: LoggerService) {
    this.logger.log('AppComponent created');
  }

  logMessage(): void {
    this.logger.log('Button clicked');
  }
}

bootstrapApplication(AppComponent).catch((err) => console.error(err));