Angular send data from another component

Question

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",

hard to answer, you should indicate the relation from this two component. If the are children of the same parent component, you can use output() to inform the parent who will pass data to the other child. If component are child of different parent, you should use a service or a state management. Anyway, i think they are part of the same parent, so you can use Output() — Mariano Calcagno
– Mariano Calcagno, Commented Feb 7, 2020 at 10:35
sorry I am totally new and not familiar with Angular syntax. How can I implement that ? — programmation1994
– programmation1994, Commented Feb 7, 2020 at 10:42
What is the structure of the app? Do you have parent component that is shared by the components that should communicate, or is one component the parent of the other? There are multiple ways of doing this and depending on your structure of the app some are more suited than others. — Daniel B
– Daniel B, Commented Feb 7, 2020 at 14:44

joka00 · Accepted Answer · 2020-02-08 10:49:30Z

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

I just edited with my file .ts and i want to get value from this file in another component
This is the correct way to do it. The reason you get the index is because you've specified [value]="i". Just change it to [value]="v" instead and you'll get the object instead.
@DanielB if I change [value]='v', my table doesn't work and I get nothing in my another component
@Software149798 I have updated the answer to clarify how to display name.

Collectives™ on Stack Overflow

Angular send data from another component

1 Answer 1

Update

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

4 Comments

Related