CODEWITHSUNDEEP
javascriptangular
programmation1994
programmation1994

Reputation: 75

Angular send data from another component

I woudlike to send data selected from my another component (variable in file .ts)

.html : 

<div class="liste">
                <select class="form-control" name="Container" (change)="selectChangeHandler($event)">
                    <option disabled selected value> -- select an Container -- </option>
                    <option *ngFor="let v of values;let i = index" [value]="i">
                        {{v.Name}}
                    </option>
                </select>
            </div>

            <div class="tableau" *ngIf="show" >
                <table align="center">
                    <tr align="center"><b>{{selectedValue.Name}}</b></tr>
                    <tr align="center"><td>Matricule: {{selectedValue.Matricule}}</td></tr>
                    <tr align="center"><td>Material: {{selectedValue.Material}}</td></tr>

        <div class="modal-body">
            <app-heat-local> </app-heat-local>
        </div>

How can I get value for this component with using to send my data in this component ?

another component .html (heat-local):

<h6 class="container-name">{{selectedValue.Name}}</h6>

my file .ts :

import {Component, OnDestroy, OnInit} from '@angular/core';
import {Cell} from 'app/data/cell';

@Component({
    selector: 'app-heat-global',
    templateUrl: './heat-global.component.html',
    styleUrls: ['./heat-global.component.css'],
    providers: [HeatService]
})

export class HeatGlobalComponent implements OnInit{

selectedValue = {
        Name: '',
        Matricule: '',
        Material:'',
        Quantity:'',
        Coordonates:'',
    }
    values = [{
        Name: "Container A",
        Matricule: "ABC",

Upvotes: 1

Views: 265

Answers (1)

joka00
joka00

Reputation: 2537

From the question it seems that it could be possible to solve it this way.

You can set value of a selected option to property inside of selectChangeHandler()

selectChangeHandler(event) {
  this.currentValue = event.target.value;
}

To get it inside of app-heat-local

<div class="modal-body">
  <app-heat-local [value]="currentValue"> </app-heat-local>
</div>

To be able to set [value] attribute you need to define @Input() property inside of HeatLocalComponent

You could use @Input() to achieve this.

import {Component, Input} from '@angular/core';

@Component({
  selector: 'app-heat-local',
  templateUrl: './heat-local.component.html',
  styleUrls: ['./heat-local.component.scss']
})
export class HeatLocalComponent {
  @Input() value: number;
}

To display the value in heat-local.component.html you can you use interpolation

<h6 class="container-name">{{value}}</h6>

You can read more about component interaction

Update

To receive name instead of index just change value from i which is index to v.Name. {{v.Name}}

Or you can provide the whole object

<option *ngFor="let v of values;let i = index" [value]="v">
   {{v.Name}}
</option>

Becareful with type you specify in here. In previous part there is number type specified so it won't take anything else than number 

import {Component, Input} from '@angular/core';

@Component({
  selector: 'app-heat-local',
  templateUrl: './heat-local.component.html',
  styleUrls: ['./heat-local.component.scss']
})
export class HeatLocalComponent {
  @Input() value: string // <== Here you can specify the type by TS type
}

string will be used just when value of an option is string, if you want to send whole object then change it to this @Input() value: any or define your own interface

Upvotes: 1

Related Questions