Angular 2 - Select 1 object from a JSON array of objects and display it to another Component

Question

I need to select a single object from a array of objects in a component and have that value appear in a different component. Currently, I am able to select the object and have it appear in the same component via {{}}, but I am not able to have that selected object appear in a different component.

estimate-detail.component.ts

@Component({
    selector: 'my-estimate-detail',
    templateUrl: './app/components/estimateDetail/estimate-detail.component.html'
})

export class EstimateDetailComponent implements OnInit {
    @Input() estimate: Estimate;
    @Input() item: Item;  
    @Input() contact: Contact[];
    title="Estimate Details";
    counterValue = 1;
    selectedContact:string;
    Items:Item[];
    newEstimate = false;
    startDate:any;
    error: any;
    navigated = false; // true if navigated here


    constructor(
        private estimateService: EstimateService,
        private itemService:ItemService,
        private route: ActivatedRoute) {
            this.startDate = new Date();
    }

    ngOnInit() {
        this.getItems();
        this.route.params.forEach((params: Params) => {
            let id = params['id'];
            if (id === 'new') {
                this.newEstimate = true;
                this.estimate = new Estimate();
            } else {
                this.newEstimate = false;
                this.estimateService.getEstimate(id)
                    .then(estimate => this.estimate = estimate);
            }
        });
    }

estimate-detail.component.html

div *ngIf="estimate" class="form-horizontal">
    <h2>{{title}}</h2>

    <h3> Basic Info</h3>

    <my-Contacts [(selectedContact)] = 'SelectedContact'></my-Contacts>

  {{SelectedContact}}
<div>

contacts.component.ts

@Component({

    selector: 'my-Contacts',
    templateUrl: './app/components/Contacts/Contacts.component.html'
})

export class ContactsComponent implements OnInit {
//@Output:Contact;
title = "My Contacts";
   @Input() Contacts: Contact[];
   @Input() selectedContact: Contact;
   @Output() onSelect: EventEmitter<Contact> = new EventEmitter();
    error: any;

    constructor(
        private router: Router,
        private contactService: ContactService) { }
    getContacts() {
        this.contactService.getContacts()
        .then(Contacts => this.Contacts = Contacts);
    }
    ngOnInit() {
        this.getContacts();
    }
   // onSelect(contact: Contact) { 
    //    this.selectedContact = contact; }

contacts.component.html

 <div class="col-md-12">
        <table class="table table-bordered">
            <thead>
                <tr>

                    <th>Name</th>
                     <th>Address</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let contact of Contacts" [class.active]="contact === selectedContact" (click)="onSelect(contact)">

                    <td>{{contact.name}}</td>
                     <td>{{contact.address1}}</td>
                    <td><button class="btn btn-danger" (click)="deleteContact(contact, $event)">Delete</button></td>
                </tr>
            </tbody>
        </table>
    </div>

how this another Component is related to your contacts.component? who is parent component who is child ? — Amit kumar
– Amit kumar, Commented Feb 13, 2017 at 5:57
angular.io/docs/ts/latest/cookbook/component-communication.html — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 13, 2017 at 6:18
the parent component is Estimate Detail Component and should display a selected contact from the contact component. — Mason belyeu
– Mason belyeu, Commented Feb 13, 2017 at 14:26

AVJT82 · Accepted Answer · 2017-02-13 18:59:38Z

1

In communication from child to parent, you need to use Output()

in your child, declare Output that emits event to parent:

@Output() selected = new EventEmitter<string>();

In your template have the onSelect function fired with click event. It should look like this:

onSelect(contact) {
  this.selected.emit(contact)
}

And in your parent watch the event:

<my-Contacts (selected)=($event)></my-Contacts>

selected(contact) {
  this.selectedContact = contact;
}

That's it, now you have the selected contact in your selectedContact variable. :) Here's a sample plunker and more detailed description of child-to-parent communication, i.e the use of Output explained in more detail here.

answered Feb 13, 2017 at 18:59

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

Collectives™ on Stack Overflow

Angular 2 - Select 1 object from a JSON array of objects and display it to another Component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related