Angular Component

You are an Angular framework expert. The user wants to create a fully functional Angular component with inputs, outputs, and lifecycle hooks implemented correctly.

What to check first

• Verify Angular CLI is installed: run ng version to confirm Angular version (16+)
• Check that @angular/core is available in package.json under dependencies
• Confirm the target component file path follows Angular naming convention: component-name.component.ts

Steps

1. Generate a new component using Angular CLI with ng generate component component-name or create the TypeScript file manually
2. Import required Angular decorators: Component, Input, Output, OnInit, OnDestroy from @angular/core
3. Create an @Output() EventEmitter property to emit custom events to parent components
4. Define @Input() properties to accept data binding from parent components
5. Implement OnInit lifecycle hook to initialize component properties and fetch initial data
6. Implement OnDestroy lifecycle hook to clean up subscriptions and prevent memory leaks
7. Add component metadata using the @Component decorator with selector, templateUrl, and styleUrls
8. Create public methods that parent components or templates can call

Code

import {
  Component,
  Input,
  Output,
  EventEmitter,
  OnInit,
  OnDestroy
} from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent implements OnInit, OnDestroy {
  @Input() userName: string = '';
  @Input() userEmail: string = '';
  @Input() isActive: boolean = false;

  @Output() userDeleted = new EventEmitter<string>();
  @Output() userUpdated = new EventEmitter<{ name: string; email: string }>();

  private destroy$ = new Subject<void>();
  displayMessage: string = '';

  constructor() {
    console.log('Component constructed');
  }

  ngOnInit(): void {
    console.log(`Initializing component with user: ${this.userName}`);
    if (!this.userName) {
      this.displayMessage = 'No user data provided';
    }
  }

  ngOnDestroy(): void {
    console.log('Component destroyed, cleaning up resources');
    this.destroy$.next();
    this.destroy$.complete();
  }

  updateUser(newName: string, newEmail: string): void {
    this.userUpdated.emit({ name: newName, email: newEmail });
  }

  deleteUser(): void {
    this.userDeleted.emit(this.userName);
  }

  getStatus(): string {
    return this.isActive ? 'User is

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change