Julio Paniagua

import { Component, signal, computed } from '@angular/core';

@Component({
  selector: 'app-user-profile',
  standalone: true,
  template: `
    <h1>{{ fullName() }}</h1>
    <span class="badge">{{ status() }}</span>
  `
})
export class UserProfileComponent {
  // Modern Signal State
  readonly firstName = signal<string>('Julio');
  readonly lastName = signal<string>('Paniagua');
  readonly isAvailable = signal<boolean>(true);

  // Computed value (Derived state)
  readonly fullName = computed(() => 
    `${this.firstName()} ${this.lastName()}`
  );

  readonly status = computed(() => 
    this.isAvailable() ? 'Available for hire' : 'Busy'
  );
}