Angular 9 -- Multiple Children inside Parent

Question

Can someone explain to me, why the appropriate child switch won't update properly? Click on the second child and the first child updates, but the console shows the correct method being called. Is it not possible to call the same child component in the parent like I am?

https://stackblitz.com/edit/angular-ivy-ch65ks

Answer 1

It is because you have the same id in both the cases. Try appending the ID of the <input> in the child component with some unique key from the parent in both the cases and it should work fine.

Answer 2

https://stackblitz.com/edit/angular-ivy-ch65ks

Answer added here: child.compontent.html

<input type="checkbox" id="toggle-button-checkbox_{{inputId}}" [disabled]="isDisabled">
<label class="toggle-button-switch" for="toggle-button-checkbox_{{inputId}}" (click)="toggleCheck()"></label>
<div class="toggle-button-text">
    <div class="toggle-button-text-on">{{textOne}}</div>
    <div class="toggle-button-text-off">{{textTwo}}</div>
</div>

child.component.ts

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss'],
   inputs: ['textOne', 'textTwo', 'checkedValue', 'isDisabled','inputId'],
  outputs: ['checkToEmit']
})
export class ChildComponent implements OnInit {
checkToEmit = new EventEmitter<boolean>();
  textOne: string;
  textTwo: string;
  inputId;
  checkedValue: boolean;
  isDisabled: boolean = false;
  constructor() { }
  ngOnInit(): void {
    console.log(this.checkedValue);
   }
  toggleCheck() {
    this.checkedValue = !this.checkedValue;
    this.checkToEmit.emit(this.checkedValue);
  }
}

parent.component.html

<app-child name="one" textOne="Yes" textTwo="No" [checkedValue]="test1" (checkToEmit)="test1Checked($event)" inputId="1">
</app-child>

<app-child name="two" textOne="Yes" textTwo="No" [checkedValue]="test2" (checkToEmit)="test2Checked($event)" inputId="2">
</app-child>  

Answer 3

You have hardcoded id in the child component when you use it multiple times, the same id will be repeated and that's what causing the issue.

You need to pass the id as an input.

in child.component.ts

add Id to the inputs array:

inputs: ['textOne', 'textTwo', 'checkedValue', 'isDisabled', 'Id'],

and define the Id

Id: string;

In in child.component.html, bind the id to Id

<input type="checkbox" [id]="Id" [disabled]="isDisabled">
<label class="toggle-button-switch" [for]="Id" (click)="toggleCheck()"></label>
<div class="toggle-button-text">
    <div class="toggle-button-text-on">{{textOne}}</div>
    <div class="toggle-button-text-off">{{textTwo}}</div>
</div>

and pass the Id from parent.component.html

<app-child 
    name="one"
    id="one"
    textOne="Yes"
    [Id]="'first'"
    textTwo="No"
    [checkedValue]="test1"
    (checkToEmit)="test1Checked($event)"
>
</app-child>

<app-child
    name="two"
    id="two"
    textOne="Yes"
    [Id]="'second'"
    textTwo="No"
    [checkedValue]="test2"
    (checkToEmit)="test2Checked($event)"
>
</app-child>