Communication between children in angular

I am making a list of students. The input field, add button, and update button are inside one child and in other child there is the list with the delete and edit buttons. Both are handled in the parent component.

When I click edit button, I would like the input filed to have a value from that list and to be able to update the list.

parent html

  <ul>
    <app-list-item
      *ngFor="let studentName of students; let i = index"
      [name]="studentName"
      [index]="i"
      (deleteNameByIndex)="onemitDeleteNameByIndex($event)"
      (editNameById)="onemitEditNameById($event)"
    >
  </ul>

parent .ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  students = ['huzaifa', 'hunzila', 'waqar', 'sibte', 'shahzeen'];
  student = '';

  onemitAddNewName(newName: string) {
    this.students.push(newName);
  }
  onemitDeleteNameByIndex(index: number) {
    this.students.splice(index, 1);
  }
  onemitEditNameById(student: any) {
    this.student = student;
    console.log('app student :>> ', this.student);
  }
}

child 1 html

<input
  type="text"
  placeholder="enter name"
  [value]="name"
  (input)="oninputSetName($event)"
/>
{{ student }}
{{ name }}

<button (click)="onclickEmitNewName()">Add</button>
<button>Update</button>

child 1 .ts

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

@Component({
  selector: 'app-list-form',
  templateUrl: './list-form.component.html',
  styleUrls: ['./list-form.component.css'],
})
export class ListFormComponent {
  name = '';
  @Output() newName = new EventEmitter<string>();
  @Input() student = '';

  oninputSetName(event: any) {
    this.name = event.target.value;
  }

  onclickEmitNewName() {
    this.newName.emit(this.name);
  }
  updateInput() {
    let obj = { name: this.student };
    console.log('list-form student :>> ', this.student);
  }
}

child 2 html

{{ name }} -- {{ index }}
<button (click)="onclickDeleteName()">delete</button>
<button (click)="onclickEditName()">edit</button>

child 2 .ts

@Component({
  selector: 'app-list-item',
  templateUrl: './list-item.component.html',
  styleUrls: ['./list-item.component.css'],
})
export class ListItemComponent {
  @Input() name = '';
  @Input() index = 0;

  @Output() deleteNameByIndex = new EventEmitter<number>();
  @Output() editNameById = new EventEmitter<any>();

  onclickDeleteName() {
    this.deleteNameByIndex.emit(this.index);
  }
  onclickEditName() {
    let obj = { index: this.index, name: this.name };
    this.editNameById.emit(obj);
  }
}

Or even in a more elegant way, you could use a helper service to solve your communication issue.

Below you could find a sample service:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MessageService {
  private messageSource = new Subject<string>();
  currentMessage = this.messageSource.asObservable();

  constructor() {}

  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import { Component } from '@angular/core';
import { MessageService } from './message.service';

@Component({
  selector: 'app-sender',
  template: `
    <button (click)="sendMessage()">Send Message</button>
  `
})
export class SenderComponent {
  constructor(private messageService: MessageService) {}

  sendMessage() {
    this.messageService.changeMessage('Hello from Sender Component');
  }
}

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import { Component } from '@angular/core';
import { MessageService } from './message.service';

@Component({
  selector: 'app-receiver',
  template: `
    <p>{{ message }}</p>
  `
})
export class ReceiverComponent {
  message: string;

  constructor(private messageService: MessageService) {
    this.messageService.currentMessage.subscribe(message => {
      this.message = message;
    });
  }
}

<!-- end snippet -->

Since angular is Pass By reference. You can take advantage of that. when you do that you don't even have to emit the changed value.

For Example, In your code at Child 1:
Rather than emitting a local variable. All you can do is assign the value to @Input.

Here is a example:

@Input existingStudentName: string;
localName: string = existingStudentName;

onUserUpdate(){
   existingStudentName = localName;
   //No need to emmit since existingStudentName is updated here
   //It will update in parent or anyone who refer it
}

<input type="text" [(ng-Model)]="localName">
<input type="button" (click)="onUserUpdate()">

Parent Html

<section>
<!-- input field where i enter my data -->
<app-list-form
(newName)="onemitAddNewName($event)"
[student]="student"
(updatedName)="updateThisNameInList($event)"
></app-list-form>
<!-- rendering my list -->
<ul>
<app-list-item
*ngFor="let studentName of students; let i = index"
[name]="studentName"
[index]="i"
(deleteNameByIndex)="onemitDeleteNameByIndex($event)"
(editNameById)="onemitEditNameById($event)"
[
></app-list-item>
</ul>
</section>

Parent ts

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
students = ['huzaifa', 'hunzila', 'waqar', 'sibte', 'shahzeen'];
student = null;
onemitAddNewName(newName: string) {
this.students.push(newName);
}
onemitDeleteNameByIndex(index: number) {
this.students.splice(index, 1);
}
onemitEditNameById(student: any) {
this.student = student;
}
updateThisNameInList(student: any) {
let newName = student.name;
let index = student.index;
this.students.splice(index, 1, newName);
}
}

child 1 html

<input
type="text"
placeholder="enter name"
[(ngModel)]="name"
(input)="oninputSetName($event)"
/>
<!-- {{ student?.name ?? "" }}
{{ name }} -->
<button (click)="onclickEmitNewName()">Add</button>
<button (click)="onclickEmitUpdateName()">Update</button>

child 1 ts

import {
Component,
EventEmitter,
Input,
OnChanges,
OnInit,
Output,
SimpleChanges,
} from '@angular/core';
@Component({
selector: 'app-list-form',
templateUrl: './list-form.component.html',
styleUrls: ['./list-form.component.css'],
})
export class ListFormComponent implements OnChanges {
name = '';
@Output() newName = new EventEmitter<string>();
@Input() student: any = null;
@Output() updatedName = new EventEmitter<any>();
oninputSetName(event: any) {
this.name = event.target.value;
}
ngOnChanges(changes: SimpleChanges): void {
console.log('list-form: changes happen ', changes);
this.name = changes['student']?.currentValue?.name ?? '';
}
change(event: any) {
this.name = event.target.value;
}
onclickEmitNewName() {
this.newName.emit(this.name);
this.name = '';
}
onclickEmitUpdateName() {
// if (this.name == '') return;
if (!this.name) return;
this.updatedName.emit({
name: this.name,
index: this.student.index,
});
}
}

child 2 html

<li>
{{ name }} -- {{ index }}
<button (click)="onclickDeleteName()">delete</button>
<button (click)="onclickEditName()">edit</button>
</li>

child 2 ts

import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-list-item',
templateUrl: './list-item.component.html',
styleUrls: ['./list-item.component.css'],
})
export class ListItemComponent {
@Input() name = '';
@Input() index = 0;
@Output() deleteNameByIndex = new EventEmitter<number>();
@Output() editNameById = new EventEmitter<any>();
onclickDeleteName() {
this.deleteNameByIndex.emit(this.index);
}
onclickEditName() {
let obj = {
index: this.index,
name: this.name,
};
this.editNameById.emit(obj);
}
}