How to send data from a component which is calling another component angular

Question

i have a problem, i have a component called customers.component

Here is the customers.component.ts :

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

export class CustomerComponent implements OnInit {

  customers: any;

  constructor(private titleService: Title) {
      this.titleService.setTitle(this.title);
      this.getCostumers();
   }

In the html of customers.component view i am calling another component called details-customers.component through a for looping inside of the array customers

<div id="listas" class="listas">
    <div class="col-lg-12 col-md-12 col-sm-12 col-12 fila_lista" *ngFor="let customer of customers">
        <app-details-customer></app-details-customer>
    </div>
</div>

The think that i want to do is send the variable customer which is the current variable of the actual position of the loop, To do something like this in my another component view details-customers.component.html :

<div class="row">
    <div class="col-lg-3 col-md-6 col-sm-6 col-12 auto_mrg">
        <span>{{customer.name_owner}}</span>
    </div>
    <div class="col-lg-2 col-md-6 col-sm-6 col-12 auto_mrg ">
        <span>Tel: +{{customer.country_p.phone_code}} {{customer.phone}}</span>
    </div>
    <div class="col-lg-4 col-md-12 col-sm-12 col-12 auto_mrg ">
        <span>{{customer.country_p.country_name}}, {{customer.city_p.city_name}} - {{customer.state_p.state_name}}</span>
    </div>
</div>

In other words, is to send the actual variable of the loop to the component that i am calling...

There is a way to do this?, thank you!

Answer 1

Yes, using property binding: https://angular.io/guide/property-binding

customers.component.html:

<div class="col-lg-12 col-md-12 col-sm-12 col-12 fila_lista" *ngFor="let customer of customers">
    <app-details-customer [customer]="customer"></app-details-customer>
</div>

details-customer.component.ts:

@Component({
  selector: 'app-details-customer',
  templateUrl: './details-customer.component.html',
  styleUrls: ['./details-customer.component.css']
})

export class DetailsCustomerComponent implements OnInit {

  @Input() customer: any;

}

Answer 2

You needed use @Input() customer: ClassName in component details-customer

And And call this object like this <app-details-customer [customer]="customer">