how to send data from a function from parent to child

Question

hi I want to send data from parent to child in angular 6 my child.ts

this.rest.sendRequest('GET', 'station', null).subscribe(
        value => {
            this.data = value['Station'];
            this.source.load(this.data);
            console.log(this.data);
        },
    );

my parent.ts

addStation() {
  this.rest.sendRequest( 'POST', 'station', this.station).subscribe();
}

my child.html

<nb-card>
  <nb-card-header>
    لیست ایستگاه ها
  </nb-card-header>

  <nb-card-body>
    <ng2-smart-table [getValueFromParent]="value" [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)" (editConfirm)="onEditConfirm($event)">
    </ng2-smart-table>
  </nb-card-body>
</nb-card>

my parent.html is :

    <nb-card>
      <nb-card-header>
        ایستگاه
      </nb-card-header>
      <nb-card-body>
        <div class="row">
          <div class="col-md-4">
            <nb-card>
              <nb-card-header>
                <p>افزودن ایستگاه جدید</p>
              </nb-card-header>
              <br>
              <nb-card-body>
                <h3>افزودن ایستگاه</h3>
                <form (ngSubmit)="addStation()" #form="ngForm" autocomplete="on" >
                <div class="form-control">
                    <div>
                    <label for="title">
                      عنوان
                    </label>
                    <input class="form-control" id="title" name="title" nbInput [(ngModel)]="station.title" placeholder="عنوان">
                  </div>
                  <div>
                    <button nbButton type="submit" >افزودن ایستگاه</button>
                  </div>

                </div>
                </div>
                </form>

              </nb-card-body>
            </nb-card>
          </div>

          <div class="col-md-8">
            <ngx-smart-table></ngx-smart-table>
          </div>
        </div>

i want when form sent my table update automaticly how can i do that?

edit: i added the whole html

my this.station is object and my this.data is array

and i have used ng2-smart-table

You asked to send data from parent to child But it seems like you want to send data from child to parent. — Rupesh
the data is this.station in parent and i want to send it to the child and push that to the this.data array — Abolfazl Ebadi
But in your parent.html, you never use your child component tag. so how can you say that which one is the child or which one is the parent. — Rupesh

Rupesh Rupesh · Accepted Answer · 2018-10-06T20:26:26

In parent.ts

const value: string;

addStation() {
  this.value = this.station;      // initialize this.station to value.
  this.rest.sendRequest( 'POST', 'station', this.station).subscribe();
}

Then in parent.html where you call your child.

  <ngx-smart-table [getValueFromParent]="value"></ngx-smart-table>

In child .ts

export class ChildComponent implements OnInit {
  @Input() getValueFromParent: string;   // now getValueFromParent get the result of this.station.
  constructor() {}

  ngOnInit() {}
}

how to send data from a function from parent to child

2 Answers