CODEWITHSUNDEEP
angular
programmation1994
programmation1994

Reputation: 75

Angular send many data from another component

I wouldike to send data from another component but it does not work when I am doing this :

source.html: 

<app-heat [value]="selectedValue" [list]="values"> </app-heat>

source.ts :

selectedValue = {
        Name: '',
        Matricule: '',
    }
    values = [{
        Name: "Container A",
        Matricule: "ABC",
    },
    {
        Name: "Container B",
        Matricule: "BCD",
    },

destination data for another component :

destination.html

<input type="checkbox" *ngFor="let v of list;let i = index" [list]="i">{{list}}<br>

destination.ts

@Input() value: string;
@Input() list: string;

I need to get data from values (name : Container A and Container B) on my input checkbox.

Upvotes: 0

Views: 101

Answers (2)

Mohammad Niazmand
Mohammad Niazmand

Reputation: 1547

Try this code, and for test set your selectedValue:

selectedValue = {
    Name: 'Container A',
    Matricule: 'ABC',
  };

destination.ts:

@Input() value: any;
@Input() list: any[];

destination.html:

 <ng-container  *ngFor="let v of list;let i = index">
     <label [for]="i">{{v.Name}}</label>
    <input type="checkbox" [id]="i" [checked]="v.Name===value.Name && v.Matricule===value.Matricule" >
</ng-container >

Upvotes: 1

souravmsh
souravmsh

Reputation: 638

You can try this.

source.html

<app-heat [value]="selectedValue" [list]="values"></app-heat>

source.ts 

selectedValue = {
    Name: 'Container B',
    Matricule: 'BCD',
};

values = [
    {
        Name: "Container A",
        Matricule: "ABC",
    },
    {
        Name: "Container B",
        Matricule: "BCD",
    }
];

destination.html

<div *ngFor="let v of list">
  <input type="checkbox" value="{{ v.Name }}">
  <label>{{v.Name}}</label>
</div>

You can show all selected checkboxes by the selected value

<div *ngFor="let v of list">
  <input type="checkbox" value="{{ v.Name }}" [checked]="v.Name==value.Name">
  <label>{{v.Name}}</label>
</div>

destination.ts

  @Input() value: any;
  @Input() list: any;

Upvotes: 0

Related Questions