angular 2 - on div click, pass object to another component and another component uses that object to call rest service

Question

In parent (ParentComponent) loads all parent data onInit method. Now if I click on individual parent it triggers child view by passing parentId from ParentComponent to ParentDetailComponent and ParentDetailComponent calls ParentDetailService and gets IParent object. Now I tried with *ngIf to show ParentDetailComponent template but it doesnt trigger. how should I trigger child view?

Child Template:

<div *ngIf="DetailIsVisible" id="detailModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;  </button>
            <h4 class="modal-title" id="myModalLabel">Parent Detail</h4>
        </div>
        <div class="modal-body">
            <div *ngIf="parent">
                <h2>{{parent.name}} details!</h2>
                <div><label>id: </label>{{parent.Id}}</div>
                <div>
                    <label>name: </label>
                    <label>{{parent.name}}</label>
                </div>
                <div>
                    <label>Education: </label>
                    <label>{{parent.education}}</label>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" (click)="hideDetail()">Close</button>
        </div>
    </div>
</div>

Child Component:

@Component({
selector: 'app-parent-detail',
templateUrl: './child.component.html',
providers: [ParentDetailService]
})
export class ParentDetailComponent{
parentId: string;
parent: IParent;
public DetailIsVisible: boolean;

constructor(private _parentDetailService: ParentDetailService) {
}

show(parentId: string) {
    this.serviceDetail = serviceId;
 this._parentDetailService.getParentServiceDetail(this.parentId).subscribe(parent => {
        this.parent = parent[0];
        console.log(this.parent);
    });

}

hideDetail() {
    this.DetailIsVisible = false;
}

}

Parent Template:

div class="container">
<div class="row">
    <div class="col-sm-4" *ngFor="let parent of parents" (click)="selectedServiceDetail(parent.Id)" data-target="#detailModal">
        <div class="panel panel-primary" >
            <div class="panel-heading">{{parent.Id}}</div>
            <div class="panel-body"><img [src]="parent.thumbnailpath"
                                         class="img-responsive" style="width:100%; height: 200px" [title] = 'parent.name' alt="Image"></div>
            <div class="panel-footer">{{parent.name}}</div>
        </div>
    </div>
</div>

Parent Component:

 @Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
providers: [ParentDetailService]
 })
 export class ParentComponent implements OnInit {
/**all rest api and assign to array of catalog*/

     public parents: IParent[];
     public DetailIsVisible: boolean;
     @ViewChild(ParentDetailComponent) detailModal: ParentDetailComponent;

constructor(private _parentService: ParentService) {
}

ngOnInit(): void {
    this._parentService.getParents()
        .subscribe(
            parents => this.parents = parents
        );
    this.detailModal.DetailIsVisible = false;
}

    public selectedServiceDetail(parentId): void {

    this.detailModal.DetailIsVisible = true;
    this.detailModal.show(parentId); ---> this triggers ChildComponent method to fetch parent detail service
}

you can use @Output eventemitter in andgular2 you can find help from answer of this question https://stackoverflow.com/questions/36076700/what-is-the-proper-use-of-an-eventemitter — Ketan Akbari, May 30 '17 at 05:38

Shailesh Ladumor · Answer 1 · 2017-05-30T05:46:37.970

you can use mdDialog.

 openNewDetailModal(productObj: any): void {
            const dialogRef = this.dialog.open(DetailsComponent);
            dialogRef.componentInstance.album = this.selectedAlbumObj;
            dialogRef.afterClosed().subscribe(
                (result: boolean) => {
                   // do anything after close modal
                });
}

also see more details here click does this help!

score 0 · Answer 2 · answered May 30 '17 at 05:54

You have to make use of event emitters for this @Input [in your detail component ] the value will be passed from the product page . That will link the product to their detail page and then the detail page will take the input and on its ngOnInit it will call the Service method which will load the details.

All this has to be accomplished in a Modal i:e using angular material if you want , this will solve your issue .

https://material.angular.io/components/component/dialog

If you have a plunker or tried some thing for this issue please update .

I have updated my question, could you please look into it now? It might be more clear where I am stuck right now. — DaenKhaleesi, May 30 '17 at 19:29

score 0 · Accepted Answer · answered May 30 '17 at 21:32

0

above solution worked for me. The issue was CSS. I created my own css class to get the popup feel

answered May 30 '17 at 21:32

DaenKhaleesi

179
2
5
17

angular 2 - on div click, pass object to another component and another component uses that object to call rest service

3 Answers3