I am currently dealing with Angular15 and I find myself stuck on an issue related to checkbox selection change.
Situation: As per the requirements, I have a menu bar and a Checkbox. The Checkbox is generated from a reusable component which is used in the Menu bar page. Initially, the checkbox is checked. However, when I alter the menu bar options, the checkbox should be unchecked.
Challenge: In the "Display" page mentioned above, the checkbox is initially checked. I wish to uncheck the checkbox by modifying the menu options. If I select "User", the checkbox should become unchecked. Every time the menu options are changed, the checkbox should reset to an unchecked state if it was previously checked.
selectionpage.component.html
<p>Checkbox Selection!</p>
<input type="checkbox" [(ngModel)]="isChecked">Select All
A checkbox has been added with the 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 will utilize this "Selectionpage" within the "displaypage" to include the 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)
}
}
The page now features a "Menu bar" with options and a checkbox.
If I modify the menu bar option, the checkbox should be cleared. It works correctly the first time after the page loads, but subsequent attempts to uncheck upon changing the menu do not function as intended.
Thank you