show checked id from child to parent component in angular 2

Question

I am facing some trouble in relflecting in my parent component if an item has been enabled or not based on the selection made in the child component.

I am displaying my child content through a router-outlet.

Overall view: I have a side menu with several headers. Upon click on a header a view page will appear and within it a checkbox to allow the user to either enable or disable the menu header item.

What i want is when a user checks the box in the child component - that a check mark will appear next to the enabled header (without having to refresh the page - which is currently what is happening)

Parent component:

 public ngOnInit() {
        this.getMenuHeadersList();
            }

 private getMenuHeadersList() {
        this.service.getMenuItemList(this.id).subscribe(
            (data: MenuItems[]) => {
                if (data !== undefined) {
                    this.menuList= data;
                }
            },
            (error: any) => {
                .....
            });
       }

//for loop menuItem of menuList
    <a id="menuId" class="refine-menu-collapse" [routerLink]="[...]">
         <span *ngIf="menuItem.isEnabled" class="win-icon win-icon-CheckMark"></span>
         <span class="refine-menu-subtitle">{{menuItem.name}}</span>
    </a>

the span where i check if menuItem.isEnabled is the checkmark that i would like to have appear once the user enables it from the child view componenet.

Child component:

 public ngOnInit() {
        this.getMenuHeadersList();
            }

private onMenuItemValueChange(menuItem: MenuItemType, checked: boolean) {
    menuItem.isEnabled = checked;
    this.saveMenuItemTypes(menuItem);// makes a service call and calls getMenuHeadersList.
}

 private getMenuHeadersList() {
        this.service.getMenuItemList(this.id).subscribe(
            (data: MenuItems[]) => {
                if (data !== undefined) {
                    this.menuList= data;
                    this.singleMenuItem = this.menuItems.find((value) => value.menuItem.id === this.menuId);
                }
            },
            (error: any) => {
                .....
            });
       }

Child Html:

<input type="checkbox"
       [checked]="menuItem?.isEnabled"(change)="onMenuItemValueChange(menuItem, $event.target.checked)">
                            <span class="text-body">title</span>

I have this feeling that i don't need to make the call to get the menuItems in the child component and i could get it from the parent but i am not sure how i am messing up myself.

Possible duplicate of [Pass data from child to parent component Angular2](https://stackoverflow.com/questions/42107167/pass-data-from-child-to-parent-component-angular2) — Amit Chigadani, Jun 29 '18 at 09:21
@mintquan i forgot to mention which i will update... but i am displaying the child component through a so i don't believe the output will really reach up to the parent — bluePearl, Jun 29 '18 at 09:22

score 1 · Answer 1 · answered Jun 29 '18 at 09:35

You have not child/parent. The most easy way to do it, is use a variable in a service If your service you has some like

checkedItems:any[]=[]

If your header

get checkedItems()
{
    return yourservice.checkedItems;
}
<span *ngIf="checkedItems[i]" class="win-icon win-icon-CheckMark"></span>

In your component, somewhere

yourservice.checkedItems[index]=true

show checked id from child to parent component in angular 2

1 Answers1