mcpField
A
angular-components

angular-components

github.com/oguzhan18Development7182 installsUpdated 31w ago
Repository

About angular-components

A skill reference for Angular component design, aimed at developers building Angular applications. It covers standalone components, signal-based inputs, outputs, templates, change detection, encapsulation, and host bindings.

Key features

  1. 01Create standalone components
  2. 02Use signal-based inputs and outputs
  3. 03Configure templates and content projection
  4. 04Set change detection and encapsulation
  5. 05Bind host properties and events

Use cases

  1. 01Build reusable standalone components
  2. 02Define component inputs and event outputs
  3. 03Configure rendering and component styling

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-components

After installing, type/angular-componentsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

Details

From the project README

Angular Components

Version: Angular 21 (2025) Tags: Components, @Component, Architecture

References: Components Guide • @Component API

Best Practices

  • Create standalone component
@Component({
  standalone: true,
  selector: 'app-my',
  imports: [CommonModule],
  template: `<p>Content</p>`
})
export class MyComponent {}
  • Use inputs with signals
@Component({})
export class MyComponent {
  data = input<string>('');
  required = input.required<User>();
  
  computed = computed(() => this.data()?.name);
}
  • Use outputs for events
@Component({})
export class MyComponent {
  data = output<string>();
  
  onClick() {
    this.data.emit('event');
  }
}
  • Use template reference variables
@Component({
  template: `
    <input #nameInput>
    <button (click)="onSubmit(nameInput.value)">Submit</button>
  `
})
export class MyComponent {}
  • Use content projection
@Component({
  selector: 'app-card',
  template: `
    <div class="header">
      <ng-content select="[header]"></ng-content>
    </div>
    <div class="body">
      <ng-content></ng-content>
    </div>
  `
})
export class CardComponent {}
  • Use change detection strategy
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OptimizedComponent {}
  • Use encapsulation
@Component({
  encapsulation: ViewEncapsulation.None // or Emulated, ShadowDom
})
export class StyledComponent {}
  • Use host binding
@Component({
  host: {
    '[class.active]': 'isActive',
    '(click)': 'onClick()'
  }
})
export class HostComponent {
  isActive = false;
}

Comments

Markdown supported