### Angular App Usage Example (TypeScript)

Source: https://github.com/pinkcolorrr/angular-components-mcp/blob/main/button.md

Demonstrates how to import and use the custom Angular button component within an application's root component.

```typescript
import { Component } from '@angular/core';
import { ButtonComponent } from './button.component';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ButtonComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  handleClick() {
    console.log('clicked')
  }
}
```

--------------------------------

### Angular Button Component HTML Usage (HTML)

Source: https://github.com/pinkcolorrr/angular-components-mcp/blob/main/button.md

Shows examples of using the Angular button component in HTML templates, including different types and states.

```html
<button ui-button type="primary" (click)="handleClick()">Primary button</button>
<button ui-button type="secondary" (click)="handleClick()">Secondary button</button>
<button ui-button type="danger" (click)="handleClick()">Danger button</button>
<button ui-button type="primary" disabled (click)="handleClick()">Disabled button</button>
```

--------------------------------

### Angular Button Component Definition (TypeScript)

Source: https://github.com/pinkcolorrr/angular-components-mcp/blob/main/button.md

Defines a reusable Angular button component using standalone architecture, signals, and OnPush change detection. It supports different button types and disabled/loading states via host bindings.

```typescript
type ButtonType = 'primary' | 'secondary' | 'danger';

@Component({
  selector: 'button[ui-button]',
  standalone: true,
  imports: [],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '<ng-content/>',
  host: {
    '[class.disabled]': 'disabled()',
    '[class]': 'type()',
    'role': 'button',
    'tabindex': '0',
  }
})
export class ButtonComponent {
  readonly type = input<ButtonType>('primary');
  readonly disabled = input(false, { transform: booleanAttribute });
  readonly loading = input(false, { transform: booleanAttribute });
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.