Angular2 custom button

Question

I have created a custom button component and I am using it in one of templates. I want to disable this button component using disabled property when the form is invalid. How do I achieve this? which Angular API I can use? For instance: In html i am using "app-okbutton" component "I want to use disable property like this [disabled]="??" in app-okbutton Image for reference https://i.sstatic.net/C3xdR.png

Link to my repo for reference https://github.com/hemantmali21/Angular2-Demo/blob/master/src/app/okbutton/okbutton.component.ts

Thanks in Advance.

Possible duplicate of Angular2 Forms - Submit Button Disabled? — Jota.Toledo
– Jota.Toledo, Commented Jul 23, 2017 at 12:13
@Jota.Toledo In my case I am creating submit button as custom component and when I use that component in other html I want to pass input property disabled.Please help me figure out where I am getting wrong Here is my repo github.com/hemantmali21/Angular2-Demo/tree/master/src/app — hemantmali
– hemantmali, Commented Jul 23, 2017 at 12:20

Jota.Toledo · Accepted Answer · 2017-07-23 12:28:44Z

1

@Component({
  selector: 'app-okbutton',
  template: `
  <button [disabled]="disabled"
    [type]= "type" class="btn btn-primary {{className}}" (click)="onClickEvent.emit($event)">
          Save
  </button>
  `,
  styleUrls: []
})
export class OkbuttonComponent {
  @Input() className = ''; // default value if none is passed
  @Input() type = 'button'; // default value if none is passed
  @Input() disabled = false; // default value if none is passed
  @Output() onClickEvent: EventEmitter<any> = new EventEmitter<any>();
}

And then you can use it as follows (with a form for example):

<form #form="ngForm" novalidate>
// form fields go here
</form>
<app-okbutton [disabled]="!form.valid"></app-okbutton>

answered Jul 23, 2017 at 12:28

Jota.Toledo

28.6k11 gold badges66 silver badges76 bronze badges

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

1 Comment

Ryan Silva Over a year ago

It would be nice to be able to use the native (click) event on the component. But if you do <app-okbutton (click)="foo()"> it seems the component can't stop the click event from firing if it's disabled. Is there a way?

Collectives™ on Stack Overflow

Angular2 custom button

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related