Having previously developed a regular Counter App in Angular, I decided to challenge myself further by creating individual components for each increment/decrement button. My goal is to update the Count in the Parent component by passing the updated increment back up. While I have successfully implemented the increment functionality in my child component, I am facing some uncertainty on how to pass this updated data back to the parent. Any guidance would be highly appreciated. Thank you.
This is the TypeScript file in the Parent component:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'complicatedAngularCounter';
currentCount:any = 0;
}
This is the HTML code in the Parent component:
<h1>{{title}}</h1>
<p>Count: {{currentCount}}</p>
<app-plus [count]="currentCount" ></app-plus>
This is the TypeScript file in the Child Increment component:
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-plus',
templateUrl: './plus.component.html',
styleUrls: ['./plus.component.css']
})
export class PlusComponent implements OnInit {
@Input() count:any;
@Output() countUpdatePlus = new EventEmitter<string>();
constructor() { }
ngOnInit(): void {
}
onPlus() {
this.count ++
}
}
This is the HTML code in the Child Increment component:
<button (click)="onPlus()">++</button>
<h1>Here is {{count}}</h1>