Get data from a template back into the component

Martijn de Munnik

I'm a angular2 newbie and I have a question about getting data back from a template. I have the following template:

<h2>Set parameters</h2>
<button (click)="onClick()">Calculate</button>
<h3>Sailing profiles</h3>
<label *ngFor="let sailingProfile of sailingProfiles">
    <input type="checkbox" name="{{sailingProfile.title}}" value="{{sailingProfile.title}}">
    {{sailingProfile.title}}<br>
</label>
<h3>Counters</h3>
<label *ngFor="let counter of counters">
    <input type="checkbox" name="{{counter.type}}" value="{{counter.type}}">
    <input type="text"> {{counter.type}}<br>
</label>

The purpose is to select one ore more sailing profiles and select one ore more counters and add a value for each selected counter. The component which uses this template is:

import {Component, EventEmitter, Output} from "@angular/core";
import {CounterService} from "../service/counter.service";
import {SailingProfileService} from "../service/sailing-profile.service";
import {CounterModel} from "../model/counter";
import {SailingProfileModel} from "../model/sailing-profile";

@Component({
    selector: 'params',
    templateUrl: '../../template/params.html',
    providers: [CounterService, SailingProfileService],
})
export class ParamsComponent {
    @Output() paramsUpdated: EventEmitter<string> = new EventEmitter<string>();

    counters: CounterModel[] = [];
    sailingProfiles: SailingProfileModel[] = [];

    constructor(private counterService: CounterService, private sailingProfileService: SailingProfileService) {
    }

    ngOnInit() {
        this.counterService.getCounters().subscribe(c => this.counters = c);
        this.sailingProfileService.getSailingProfiles().subscribe(s => this.sailingProfiles = s);
    }

    onClick() {
        this.paramsUpdated.emit('test');
    }
}

How do I get the selected sailing profiles and counters with their values back in the onClick() method? The desired result is a string which looks like this:

{"counters":[{"type":"Running hours","value":6000},{"type":"Seconds","value":31536000}],"sailing_profiles":[{"title": "Continuous sailing"}]}
ritz078

Use [(ngModel)] instead of value

It will look something like this

<label *ngFor="let sailingProfile of sailingProfiles">
    <input type="checkbox" name="{{sailingProfile.title}}" [(ngModel)]='sailingProfile.checkBoxState'>
    {{sailingProfile.title}}<br>
</label>
<h3>Counters</h3>
<label *ngFor="let counter of counters">
    <input type="checkbox" name="{{counter.type}}" [(ngModel)]='counter.checkBoxState'>
    <input type="text"> {{counter.type}}<br>
</label>

Now when you access this.counter or this.sailingProfiles inside onClick, you will see that checkBoxState : true is present for every selected checkbox. It should look like

this.counters = [
  {"type":"Running hours","value":6000},
  {"type":"Seconds","value":31536000, checkBoxState: true}
];

this.sailingProfiles = [
  {"title": "Continuous sailing", checkBoxState: true}
]

Now you can get the values of the selected objects.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to get data from Form from child component and pass it back to Parent Componet?

From Dev

Angular 2 sharing data from component to service and back to another component

From Dev

Get data to template from Service

From Dev

How to get data back from QVariant for a usertype?

From Dev

How To Get Data Back From Angular Directive

From Dev

How to get data back from a $.post call?

From Dev

How to get data back from a command bus?

From Dev

Get data back from "select for xml raw"

From Dev

How to get data back from emberjs controller

From Dev

Get data from some years back in mysql

From Dev

Get data back from "select for xml raw"

From Dev

How do I get a plain array back from vuejs with a component?

From Dev

angular2 feeding data back to `<template>` from `[ngTemplateOutlet]`

From Dev

Print Data from JSON Array in Template from Component

From Java

How to get data from function component?

From Dev

get data from Rails into react component

From Dev

How get data from JFrame Component Java?

From Dev

django template: get data from dictionary

From Dev

Get the combobox from data template in WPF DataGrid

From Dev

Get data from request in template django

From Dev

Ember could not get select value from template to component

From Dev

How to get data from a query back from the controller

From Dev

How to get data from a query back from the controller

From Java

How to get data (2 Lists) back from a class to the StatefulWidget that called it

From Dev

AngularJS : get back data from a json array with an id

From Dev

UIImagePickerController from camera: Get back image with location data

From Dev

Get data back from ajax call within ajax call

From Dev

How to get back my data from a button to an other php page

From Dev

Spark Scala Get Data Back from rdd.foreachPartition

Related Related

  1. 1

    How to get data from Form from child component and pass it back to Parent Componet?

  2. 2

    Angular 2 sharing data from component to service and back to another component

  3. 3

    Get data to template from Service

  4. 4

    How to get data back from QVariant for a usertype?

  5. 5

    How To Get Data Back From Angular Directive

  6. 6

    How to get data back from a $.post call?

  7. 7

    How to get data back from a command bus?

  8. 8

    Get data back from "select for xml raw"

  9. 9

    How to get data back from emberjs controller

  10. 10

    Get data from some years back in mysql

  11. 11

    Get data back from "select for xml raw"

  12. 12

    How do I get a plain array back from vuejs with a component?

  13. 13

    angular2 feeding data back to `<template>` from `[ngTemplateOutlet]`

  14. 14

    Print Data from JSON Array in Template from Component

  15. 15

    How to get data from function component?

  16. 16

    get data from Rails into react component

  17. 17

    How get data from JFrame Component Java?

  18. 18

    django template: get data from dictionary

  19. 19

    Get the combobox from data template in WPF DataGrid

  20. 20

    Get data from request in template django

  21. 21

    Ember could not get select value from template to component

  22. 22

    How to get data from a query back from the controller

  23. 23

    How to get data from a query back from the controller

  24. 24

    How to get data (2 Lists) back from a class to the StatefulWidget that called it

  25. 25

    AngularJS : get back data from a json array with an id

  26. 26

    UIImagePickerController from camera: Get back image with location data

  27. 27

    Get data back from ajax call within ajax call

  28. 28

    How to get back my data from a button to an other php page

  29. 29

    Spark Scala Get Data Back from rdd.foreachPartition

HotTag

Archive