Angular2. How to transfer data from the child component to the parent?

Question

I have a component with a range of values. I need to transfer a range of values ​​in the parent component when changing the range. Here are my components:

TS:

import { Component, EventEmitter, 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;

    @Output() rangeChange: EventEmitter<string>;

    constructor() {
        this.range = "25 - 55";
        this.rangeChange = new EventEmitter<string>();
    }

    onRangeChange(model: string): void {
        this.rangeChange.emit(model);
        console.log(model);
    }

    createSliderRange(minValue: number, maxValue: number) {
        var scope = this;

        $("#slider-range").slider({
            animate: "fast",
            range: true,
            min: minValue,
            max: maxValue,
            values: [ minValue, maxValue ],
            slide: function (event, ui) {
                let newVal: string = `${ui.values[0]} - ${ui.values[1]}`;
                $("#range").val(newVal);
                scope.onRangeChange(newVal);
            }
        });  

    }
}

HTML:

<p>
    <label for="range">Years range: </label>
    <input type="text" id="range" value="{{ range }}" [(ngModel)]="range" />
</p>

<div id="slider-range"></div>

The component to which you want 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'
    providers: [ SliderRangeComponent ]
})

export class CalculationsComponent implements OnInit { 
    range2: string;    

    onRangeChange(event) {
        console.log("Calculations " + event);
        //this.range2 = model;
    }

    constructor(private sliderRange: SliderRangeComponent) { }

        ngOnInit() {
            this.sliderRange.createSliderRange(25, 55);
        }
}

HTML:

<sliderrange-app (rangeChange)="onRangeChange($event)"></sliderrange-app>
<div>val: {{range2}}</div>

This don`t work. Why?

Answer 1

The problem is that I have created a new instance

constructor(private sliderRange: SliderRangeComponent) { }

ngOnInit() {
    this.sliderRange.createSliderRange(25, 55);
}

I changed the component. Here is a working version:

TS:

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);
            }
        });
    }
}

Parent component:

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;
    }
}

Answer 2

Your code looks OK.

Maybe try inlining all your code for the slide property and use an arrow function vs a function expression (so that the function doesn't bind to this);

$("#slider-range").slider({
    animate: "fast",
    range: true,
    min: minValue,
    max: maxValue,
    values: [ minValue, maxValue ],
    slide: (event, ui) => {
        let newVal: string = `${ui.values[0]} - ${ui.values[1]}`;
        $("#range").val(newVal);
        this.rangeChange.emit(newVal);
    }
}); 

In the child, if you're not calling onRangeChange() from anywhere else, you don't really need a dedicated method.

Answer 3

Use only range in your data bind:

<sliderrange-app (range)="onRangeChange($event)"></sliderrange-app>