Create a reusable "Loading Button" directive in Angular2

Question

Basically I want the same behavior described here but working in a directive, since I am going to use throughout my app.

So far I got this in my directive:

@Directive({
  selector: '[asyncLoader]'
})
export class ActionAsyncLoader {

  @Input('asyncLoader') asyncLoader: string;
  ...

  //1 - save the text for further use.
  ngOnInit(){
    this.text = this.elementRef.nativeElement.innerHTML;

  } 
  //2 - change the text when "click" is triggered
  @HostListener('click', ['$event.target']) onClick(btn) {
    btn.innerHTML = 'Loading';
  }
  //3 - change text back to the normal value
  onCallbackAsync(obj){
      this.elementRef.nativeElement.innerHTML = this.text;
  }
}

Steps 1 and 2 are currently working fine, my problem is in the step 3. Where Can I bind my function to the end of event executed on click function(Usually http requests)?

FullStackFool · Accepted Answer · 2017-05-25 13:27:26Z

1

You've got two good options: 1) use an input EventEmitter 2) access case #3 via a shared singleton service.

1) would probably be best if the component using the directive has direct knowledge on when to change the text back, you'd do something like...

// in your directive
@Input() changeText: EventEmitter<any>;
ngOnInit() {
    this.changeText.subscribe(event => {
        // do stuff
    });
}

// in your html
<div [asyncloader] changeText="myEventEmitter">

// and in your component
public myEventEmitter = new EventEmitter();
myEventEmitter.emit("change some text please");

The second option would work well if other components might want to interact with the loader in question in a more global nature. You'd basically do the same thing as in the first in the directive, except expose your EventEmitter from an injectable service. Then other services, components, whatever, could request for that service to broadcast, and your directive would know what's going on when to change.

edited May 25, 2017 at 13:27

FullStackFool

1,1809 silver badges16 bronze badges

answered Feb 5, 2017 at 3:59

Joshua Ohana

6,16915 gold badges65 silver badges122 bronze badges

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

4 Comments

AngularChef Over a year ago

I agree with Joshua. You need to pass additional info to your directive, something it can watch to find out when the loading is complete. Two things, though. 1) I'd pass an Observable (not an EventEmitter). You can subscribe to it and wait for the complete event. 2) No need to pass the observable separately from your directive. Your directive should ALSO be the input, so you can write something like <div [asyncloader]="ObsToWatch">.

Jorge Iten Jr Over a year ago

@AngularFrance, I have been able to do as Joshua said. Could you please clarify how could I do this with Observables? Thank you.

AngularChef Over a year ago

@JorgeItenJr. Sure, I have posted a full-blown example here: stackoverflow.com/a/42041945/1153681

Pardeep Jain Over a year ago

Always better to add working example along with answer if possible

Menzo · Accepted Answer · 2021-04-26 23:48:29Z

Just want to share with you and others my way to solve current "challenge"

@Directive({
  selector: '[appSpinner]'
})
export class SpinnerDirective implements OnInit, OnChanges {
  @Input() loadingState: boolean;
  contentText;

  constructor(private elem: ElementRef) {
    if (this.elem.nativeElement.innerText !== 'undefined') {
      this.contentText = this.elem.nativeElement.innerText;
    }
  }

  ngOnInit(): void {
    if (this.loadingState) {
      this.elem.nativeElement.innerHTML = '<div class="spinner-border custom-spinner-btn"></div>';
    }
  }

  ngOnChanges(changes): `void` {
    this.loadingState = changes.loadingState?.currentValue;
    if (this.loadingState) {
      this.elem.nativeElement.innerHTML = '<div class="spinner-border custom-spinner-btn"></div>';
    } else {
      if (this.contentText) {
        this.elem.nativeElement.innerText = this.contentText;
      }
    }
  }
}

HTML:

<button
      appSpinner
      [loadingState]="true"
      type="submit"
      class="btn btn-primary">
      LOGIN
    </button>

Here is example where I get idea of it.

Collectives™ on Stack Overflow

Create a reusable "Loading Button" directive in Angular2

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related