angular-core-implementation

# Angular Core Implementation Skill

## Quick Start

### Component Basics
```typescript
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-user-card',
  template: `
    <div class="card">
      <h2>{{ user.name }}</h2>
      <p>{{ user.email }}</p>
      <button (click)="onDelete()">Delete</button>
    </div>
  `,
  styles: [`
    .card { border: 1px solid #ddd; padding: 16px; }
  `]
})
export class UserCardComponent {
  @Input() user!: User;
  @Output() deleted = new EventEmitter<void>();

  onDelete() {
    this.deleted.emit();
  }
}
```

### Service Creation
```typescript
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root' // Singleton service
})
export class UserService {
  private apiUrl = '/api/users';

  constructor(private http: HttpClient) {}

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.apiUrl);
  }

  getUser(id: number): Observable<User> {
    return this.http.get<User>(`${this.apiUrl}/${id}`);
  }

  createUser(user: User): Observable<User> {
    return this.http.post<User>(this.apiUrl, user);
  }
}
```

### Dependency Injection
```typescript
@Injectable()
export class NotificationService {
  constructor(
    private logger: LoggerService,
    private config: ConfigService
  ) {}

  notify(message: string) {
    this.logger.log(message);
  }
}
```

## Core Concepts

### Lifecycle Hooks
```typescript
export class UserListComponent implements
  OnInit,
  OnChanges,
  OnDestroy
{
  @Input() users: User[] = [];

  ngOnInit() {
    // Initialize component, fetch data
    this.loadUsers();
  }

  ngOnChanges(changes: SimpleChanges) {
    // Respond to input changes
    if (changes['users']) {
      this.onUsersChanged();
    }
  }

  ngOnDestroy() {
    // Cleanup subscriptions, remove listeners
    this.subscription?.unsubscribe();
  }

  private loadUsers() { /* ...