How to make custom loading button component in angular 2+?

Question

Almost all of the buttons in my angular 4 app have asynchronous operations associated with them. I'm currently adding a loading spinner to each button manually whenever the button is clicked, and removing it when the operation concludes.

I've realized too late that I could have saved myself a lot of time refactoring etc, if I simply had a custom button component that took an asynchronous event handler and added/removed the spinner on its own.

I'm relatively new to angular 2+ and I'm wondering what a good approach to solving this would be. Should I do a custom component? Or just a custom directive? How do I require the clients of such a component/directive to provide me an asynchronous event handler? Do I use custom attributes or some kind of wrapping around the normal event handling?

I'm not asking for code, just the right features to use, I can take it from there.

Edit:

The loading spinner functionality is currently implemented for each button by showing/hiding an icon element via a boolean property in the corresponding component.

Lukas Sorensen · Accepted Answer · 2018-03-15 20:36:42Z

1

edited answer

<custom-button [clickFn]="onButtonClickHandler"></custom-button>

edited Mar 15, 2018 at 20:36

answered Mar 15, 2018 at 20:13

Lukas Sorensen

4073 silver badges12 bronze badges

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

3 Comments

dwoodwardgb Over a year ago

See, the issue is I'd rather the button itself own the loading state, not the parent. Otherwise my parent components with many buttons in them end up with many boilerplate boolean fields.

Lukas Sorensen Over a year ago

you could pass in the click function into the custom button's input and handle the Observable/promise from inside the button

dwoodwardgb Over a year ago

I was just considering that

DeborahK · Accepted Answer · 2018-03-15 20:09:26Z

1

If you build a custom component, you can use input property to get any configuration information from the parent/client component and output properties to pass back any events.

Here is an example of the client code using one of my custom components:

        <mh-criteria class='col-md-10'
            [displayDetail]='includeDetail'
            [hitCount]='filteredMovies?.length'
            (valueChange)='onValueChange($event)'>
        </mh-criteria>

And here are the declarations in the associated component:

export class CriteriaComponent implements OnInit {

  @Input() displayDetail: boolean;
  @Input() hitCount: number;

  @Output() valueChange: EventEmitter<string> =
              new EventEmitter<string>();

  // more code here
}

edited Mar 15, 2018 at 20:09

answered Mar 15, 2018 at 20:06

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

3 Comments

DeborahK Over a year ago

Yes. I added the component code in my answer above.

dwoodwardgb Over a year ago

Is it possible to do an output property that overwrites a built in event (like 'click')?

DeborahK Over a year ago

I'm not sure I understand? Your custom component can catch the click and emit the valueChange event. Is that what you mean?

Collectives™ on Stack Overflow

How to make custom loading button component in angular 2+?

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related