I have a question as a beginner. I'm trying to send a message from the child component to the parent component but for some reason, it's not working.
app.component.html
<app-cart-component> [items]="rootItems" (outputItems)="handleChange($event)" </app-cart-component>app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
rootItems = ['Apples', 'Bananas', 'Cherries']
title = 'inputOutputEventemitter';
handleChange($event){
console.log("pushing item to rootItems" + $event)
this.rootItems.push($event)
}
}
cart-component.component.html
<input type="text" [(ngModel)]="newItem">
<button (click)='addToList()'> Add to List</button>
cart-component.component.ts
@Component({
selector: 'app-cart-component',
templateUrl: './cart-component.component.html',
styleUrls: ['./cart-component.component.css']
})
export class CartComponentComponent implements OnInit {
newItem = ''
@Input() items = []
@Output() outputItems = new EventEmitter<string>()
constructor() { }
ngOnInit(): void {
}
addToList(): void {
this.items.push(this.newItem)
this.outputItems.emit(this.newItem)
console.log("from CartComponentComponent emitting" + this.newItem)
}
}