CODEWITHSUNDEEP
angularinputoutputcomponents
Eduardo Rocha
Eduardo Rocha

Reputation: 87

Send data to child component e passing back data

I'm trying to pass data back from child component to parent element (angular 4). This data comingo from a 'form input' where the user can insert some information. Unfortuny the information do not coming back to parent element. I'm looking for solution, someone can help me ? My code ...

send information from parent element to child component:

<app-fix-period
    [fixPeriodChoices]="model.fix_period"
    [date_time_start]="model.date_time_start"
    [date_time_end]="model.date_time_end"
    [begin_hour]="begin_time.hour"
    [begin_minute]="begin_time.minute"
    [finish_hour]="end_time.hour"
    [finish_minute]="end_time.minute">
  </app-fix-period>

on component ... at the form, I fill the inputs with user data, but nothing come back to parent.

<div class="form-group">
    <label>Inicio</label>
    <wr-calendar [(ngModel)]="date_time_start" name="date_time_start" [style]="{ width: '100%' }">
    </wr-calendar>
</div>

the component ...

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-fix-period',
  templateUrl: './fix-period.component.html',
  styleUrls: ['./fix-period.component.scss'],
  inputs: [
    'fixPeriodChoices', 
    'date_time_start', 
    'date_time_end', 
    'begin_hour', 
    'begin_minute', 
    'finish_hour',
    'finish_minute'
  ],
  outputs: [
    'date_time_start', 
    'date_time_end', 
    'begin_hour', 
    'begin_minute', 
    'finish_hour',
    'finish_minute'
  ]
})

export class FixPeriodComponent implements OnInit {

  constructor() { }

  ngOnInit() { }

}

soo .. I'll appreciate any help

Upvotes: 0

Views: 448

Answers (2)

Ali Adravi
Ali Adravi

Reputation: 22743

We can pass data to child control by using input and to parent by using output.

There are many ways like sharing data by using the service, make sure you are not using providers on every component but only in the app.module.ts, otherwise every component will create it's own instance.

To use input & output decorator see Angular component communication by using Input Output decorator

Upvotes: 1

DeborahK
DeborahK

Reputation: 60528

There are several different ways you can pass information from a child to a parent.

1) You can use the @Output decorator as shown here: https://blogs.msmvps.com/deborahk/passing-data-to-and-raising-an-event-from-a-nested-component/

2) You can use a service to retain and pass the data as shown here: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

Upvotes: 1

Related Questions