Angular: Create Your First Reusable Component

Components are the core of Angular. Here’s how to create a simple, reusable one.

CLI Command

ng generate component my-button

Component Example

my-button.component.ts

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

@Component({
  selector: 'app-my-button',
  template: `<button [disabled]="disabled"><ng-content></ng-content></button>`
})
export class MyButtonComponent {
  @Input() disabled = false;
}

Usage

<app-my-button [disabled]="true">Click me</app-my-button>

Conclusion

With this approach, you can build your own component library!