DEV Community

xRdev_38
xRdev_38

Posted on

Angular: Create Your First Reusable Component

#angular #components #frontend

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
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

Usage 

<app-my-button [disabled]="true">Click me</app-my-button>
Enter fullscreen mode Exit fullscreen mode

Conclusion

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

Top comments (0)