CODEWITHSUNDEEP
angularangular-materialslider
George Valentin
George Valentin

Reputation: 666

Angular 4 Material catch change event

Hello I use Angular 4 with Material. I want to know how I can catch "update" event in my parent component from the a Slider.

https://material.angular.io/components/component/slider

@Output()
change

Event emitted when the slider value has changed.

this more exactly

Upvotes: 1

Views: 2574

Answers (2)

Alessandro R
Alessandro R

Reputation: 635

As George Valentin stated on the comment, with Angular Material 4+ the easy way to catch changes from mat slider is the (change) event.

HTML

<mat-slider class="example-margin" [disabled]="disabled" [invert]="invert"
        [max]="max"  [min]="min" [step]="step" [thumbLabel]="thumbLabel"
        [tickInterval]="tickInterval" [(ngModel)]="value" [vertical]="vertical" (change)="onInputChange($event)">
    </mat-slider>

TS

onInputChange(event:any){
        console.log("This is emitted as the thumb slides");   
}

Upvotes: 1

Aakash Thakur
Aakash Thakur

Reputation: 3895

I don't know whether I got you question exactly or not but I assume that you have a slider in the child component and you wan tan update in the parent component.

So this is what you can do in your parent component:

@Component({
   selector:"my-app",
   template:`<slider-configurable-example (slider)="parentmethod($event)"></slider-configurable-example>
          <div>{{data}}</div>
        `
 })

 export class ParentComponent{
          parentmethod(message){
              this.data="Message" + message;
          }
 }

Have an output binding and wait for an event to be emitted from a child.

This is what you do in the child component:

export class SliderConfigurableExample {
 @Output() slider:EventEmitter<string> =
    new EventEmitter<string>();
    autoTicks = false;
  disabled = false;
  invert = false;
  max = 100;
  min = 0;
  showTicks = false;
  step = 1;
  thumbLabel = false;
  value = 0;
  vertical = false;



  get tickInterval(): number | 'auto' {
    return this.showTicks ? (this.autoTicks ? 'auto' : this._tickInterval) : null;
  }
  set tickInterval(v) {
    this._tickInterval = Number(v);
  }
  private _tickInterval = 1;


  change(){
    console.log("value");
    this.slider.emit("Message from slider");
  }
}

Notice the slider Output variable and the change method. When you slide you can see an event emitting which displays a message below the slider. This is just a generic example and you can make use of the same in your requirement as well.

Here's a plunker:https://plnkr.co/edit/LKEeL7yPjLHGWWRUjoeZ?p=preview

Upvotes: 1

Related Questions