I just started to learn angular, do not judge strictly. I have a component with a range of values. I need to transfer the range values ​​to the parent component when changing the range. Here is my component:

TS:

import { Component, Output, OnChanges, SimpleChanges } from '@angular/core'; @Component({ selector: 'sliderrange-app', templateUrl: './app/components/slider.range/slider.range.component.html', styleUrls: ['./app/components/slider.range/slider.range.component.css'] }) export class SliderRangeComponent { range: string; createSliderRange(minValue: number, maxValue: number) { $("#slider-range").slider({ animate: "fast", range: true, min: minValue, max: maxValue, values: [minValue, maxValue], slide: function (event, ui) { $("#range").val(ui.values[0] + " - " + ui.values[1]); return $("#range").val(ui.values[0] + " - " + ui.values[1]); } }); $("#range").val($("#slider-range").slider("values", 0) + " - " + $("#slider-range").slider("values", 1)); return $("#slider-range").slider("values", 0) + ";" + $("#slider-range").slider("values", 1); } }

HTML:

 <p> <label for="range">Years range: </label> <input type="text" id="range" readonly /> </p> <div id="slider-range"></div>

Component to which to transfer values:

TS:

 import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core'; import { SliderRangeComponent } from '../slider.range/slider.range.component'; @Component({ selector: 'calculations-app', templateUrl: './app/components/calculations/calculations.component.html', styleUrls: ['./app/components/calculations/calculations.component.css'], providers: [ SliderRangeComponent ] }) export class CalculationsComponent implements OnInit { range: string; constructor(private sliderRange: SliderRangeComponent) { } ngOnInit() { this.range = this.sliderRange.createSliderRange(25, 35); console.log(this.range); } }

    1 answer 1

    Here is a working version with some code changes:

    Child component:

     import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ selector: 'sliderrange-app', template: ` <p> <label for="range">Years range: </label> <input type="text" id="range" readonly value="{{ range }}" /> </p> <div id="slider-range"></div> ` }) export class SliderRangeComponent { range: string; @Input() minValue: number; @Input() maxValue: number; @Output() rangeChange: EventEmitter<string>; constructor() { this.range = "25 - 55"; this.rangeChange = new EventEmitter<string>(); } ngOnInit() { $("#slider-range").slider({ animate: "fast", range: true, min: this.minValue, max: this.maxValue, values: [this.minValue, this.maxValue], slide: (event, ui) => { let newVal: string = `${ui.values[0]} - ${ui.values[1]}`; this.rangeChange.emit(newVal); $("#range").val(newVal); } }); } }

    Parental:

     import { Component } from '@angular/core'; @Component({ selector: 'calculations-app', template: ` <sliderrange-app (rangeChange)="onRangeChange($event)" [minValue]="12" [maxValue]="34" ></sliderrange-app> <div>val: {{range2}}</div> ` }) export class CalculationsComponent { range2: string; onRangeChange(model) { console.log(model); this.range2 = model; } }