CODEWITHSUNDEEP
htmlangulartypescript
Luis Bermúdez
Luis Bermúdez

Reputation: 654

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

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!

Upvotes: 2

Views: 357

Answers (2)

Daniel Michalski
Daniel Michalski

Reputation: 563

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;

}

Upvotes: 3

Z1CAT
Z1CAT

Reputation: 11

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

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

Upvotes: 1

Related Questions