Angular send many data from another component

Question

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.

Isn't Java-related, as far as I can tell, would you mind removing the java-tag? — Curiosa Globunznik
– Curiosa Globunznik, Commented Feb 9, 2020 at 19:46
Can you tel, what is listName? Please create a stackblitz to reproduce your error. — Amit Chigadani
– Amit Chigadani, Commented Feb 9, 2020 at 19:50

Mohammad Niazmand · Accepted Answer · 2020-02-10 07:46:12Z

1

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 >

edited Feb 10, 2020 at 7:46

answered Feb 10, 2020 at 7:39

Mohammad Niazmand

1,55711 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

souravmsh · Accepted Answer · 2020-02-10 06:53:45Z

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;

Collectives™ on Stack Overflow

Angular send many data from another component

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related