Creating Custom Angular Button Component with Disabled Attribute

Question

I was wondering how it would be possible for me to create a custom Angular component that was based off of the native HTML button element and contained its own disabled property.

We currently have our own implementation of the button element that does not contain a disabled property and I wanted to know how I can add this functionality and make sure that it remains unusable and un-clickable.

Thanks

Michael · Accepted Answer · 2017-11-14 15:40:32Z

1

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

@Component({
  selector: 'my-button',
  template: `<button [disabled]="disabledValue">button</button>`
})
export class MyButtonComponent  {
@Input()
public disabledValue: boolean;
}
//usage: <my-button [disabledValue]="true"><my-button/>

edited Nov 14, 2017 at 15:40

answered Nov 14, 2017 at 13:51

Michael

947 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

User 5842 Over a year ago

Thanks, that makes sense. Out of curiosity, if you are planning on extending some native HTML elements functionality, would you normally just wrap your component around it and add to it?

Michael Over a year ago

actually, not :) you can use [disabled]="true" (or false) directly on button.

Collectives™ on Stack Overflow

Creating Custom Angular Button Component with Disabled Attribute

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related