CODEWITHSUNDEEP
angulartypescript
Abolfazl Ebadi
Abolfazl Ebadi

Reputation: 69

how to send data from a function from parent to child

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

Upvotes: 0

Views: 351

Answers (2)

Hemanth
Hemanth

Reputation: 1

I hope you are using ngx-smart-table and please refer the below link to understand how to pass source data into table,

https://akveo.github.io/ng2-smart-table/#/examples/using-filters

import { Ng2SmartTableModule, LocalDataSource } from 'ng2-smart-table'; //import local data source

source: LocalDataSource; // add a property to the component

constructor() { this.source = new LocalDataSource(this.data); }// create the source

//Assign to ngx-smart-table

<ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table>

Upvotes: 0

Rupesh
Rupesh

Reputation: 890

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() {}
}

Upvotes: 0

Related Questions