Feat (Mat-Slider) : Focus method and blur Output

[seedy]

Bug, feature request, or proposal:

Feature request :
Implement Focus and Blur on mat-slider

What is the expected behavior?

• Allow mat-slider with thumbLabel to activate thumbLabel programatically on focus via MatSlider class
• Allow mat-slider to notify of blur via MatSlider class

What is the current behavior?

Need to use an ElementRef instead of a reference to MatSlider

What is the use-case or motivation for changing an existing behavior?

Uniformisation of component's api

Is there anything else we should know?

I love ViewChildren with specific class component matching!

[julianobrasil]

@seedy, what do you mean exactly? Isn't it possible to set the focus programmatically to the slider to make it show the thumblabel autommatically?

Something like matSlider._elementRef.nativeElement.focus()?

I have the same question concerning blur... <mat-slider (blur)='someMethod()'></mat-slider> doesn't work?

I mean... I din't get whether you are thinking of forcing the thumbLabel to be visible even without getting focus or just the regular behavior programmatically (show the thumb label when it gets focused).

Also the blur.... you are thinking of a simple@Output or an observable?

[julianobrasil]

Just to better understand it.

Case 1: you just want to set focus programmatically and get notified of blur event

You can do it with the actual MatSlider:

<mat-slider thumbLabel max="30" value="10" (blur)="someMethod()"></mat-slider>

@ViewChild(MatSlider) _slider: MatSlider;

  ngAfterViewInit() {
    this._slider._elementRef.nativeElement.focus()
  }

  someMethod() {
    alert('you just lost focus');
  }

Case 2: you want to show the thumb label even without setting the focus to the slider. And you want to get notified of blur event by an observable.

<mat-slider thumbLabel max="30" value="10"></mat-slider>

You want a way to do something like:

@ViewChild(MatSlider) slider: MatSlider;

...
    // to show the slider thumb label
    this.slider.showThumbLabel(true);

    // to hide the slider thumb label
    this.slider.showThumbLabel(false);

    // to get notified of blur
    this.slider.blur.subscribe(() => alert('I lost focus'));

If you are thinking of case 2... well, I could give it a shot, but dispite the fact that this issue was labeled as "good for community contribution", I'm affraid that this kind of feature should be added by someone in the core team... I mean, it doesn't seem too much effort, but it implies in eventually creating some more css classes and I'm not sure I'm aware of all the project rules. The PR would likely be refused.

Anyway, I can try if you confirm that case 2 is what you're thinking of. For me it would be a good way to learn a little bit more about MatSlider.

[julianobrasil]

Oh, I got it. I missed the part you wrote "Need to use an ElementRef instead of a reference to MatSlider"

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}