How to uncheck the checkbox if it is in other component by using angular15

Issue

I am working with Angular15. I need help I struck with checkbox selection change.

Scenario: Based on the requirement I have a menu bar and Checkbox. Checkbox is coming from reusable component. This checkbox reusable component used in Menu bar page. By default, the check box is checked. But when I changed the menu bar options the checkbox should be unchecked.

Problem: In Above “Display” page the checkbox was checked. I want to Uncheck that checkbox by changing the menu options. If I click on “User” the checkbox should be uncheck. Every time while changing the menu options the checkbox should be unchecked if it is checked.

selectionpage.component.html

<p>Check Box Selection!</p>

<input type="checkbox" [(ngModel)]="isChecked">Select All

Added a checkbox with Input parameter "isChecked".

selectionpage.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-selectionpage',
  templateUrl: './selectionpage.component.html',
  styleUrls: ['./selectionpage.component.scss']
})
export class SelectionpageComponent {
@Input() isChecked:boolean=true;
}

Now i am going to use this "Selectionpage" in "displaypage" to add checkbox.

display-page.component.html

<div class="tab-menu-container">
  <div class="tab-menu-wrapper">
    <ng-container *ngFor="let selectvalue of selectionContent">
      <div class="tab">
        <span (click)="changerArchiveType()" style="cursor: pointer;">{{ selectvalue }}</span>|
      </div>
    </ng-container>
  </div>
</div>
<app-selectionpage [isChecked]="SelectionChange"></app-selectionpage>

display-page.component.scss

.tab-menu-container{
    height: 56px;
    display:flex;
    justify-content: center;
    background: #f2f2f2;
    .tab-menu-wrapper{
        width: 85%;
        display: flex;
        flex-wrap: wrap;
        column-gap: 2rem;
        padding-top: 20px;

        .tab{
            width: fit-content;
            font-weight: 700;
            font-size: 15px;
            line-height: 20px;
        }
    }
}

display-page.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-display-page',
  templateUrl: './display-page.component.html',
  styleUrls: ['./display-page.component.scss'],
})
export class DisplayPageComponent {
  public selectionContent: Array<string> = [
    'User',
    'Admin',
    'SuperAdmin',
    'Seller',
  ];
  public SelectionChange:boolean=false;
  changerArchiveType() {
    this.SelectionChange=false;
    console.log("Checked:",this.SelectionChange)
  }
}

Now the page cointains "Menu bar " with options and checkbox.

If i changed the menu bar option the chekbox should be uncheck.It is happening first time after page load. But after that uncheck is not working by changing the menu.

Thank you

Solution

I'm surprised this ever works. The reason is because the SelectionChange member variable in DisplayPageComponent never changes from its initial value of false.

You need to emit the change whenever the checkbox is checked by using an EventEmitter and Output decorator. By convention, if you name the output variable the same name as the input variable with a Change suffix, then you can use the "banana in a box binding" like you did with the ngModel directive.

selectionpage.component.ts

Add the isCheckedChange event emitter.

export class SelectionpageComponent {
  @Input() isChecked: boolean = true;

  @Output() readonly isCheckedChange = new EventEmitter<boolean>();
}

selectionpage.component.html

Emit the isCheckedChange event when the ngModel changes.

<input type="checkbox" [(ngModel)]="isChecked" 
       (ngModelChange)="isCheckedChange.emit($event)">Select All

display-page.component.html

Use two-way binding for isChecked in outer component.

<app-selectionpage [(isChecked)]="SelectionChange"></app-selectionpage>

Answered By - Daniel Gimenez