Is there a way to transfer data from one component to another in Angular? I have two components set up and I am currently using a selector to display the HTML content in the first component. Now, I need to figure out how to send the data entered in a form to the first component.
Product Component HTML File
<form id="form" #form="ngForm" (ngSubmit)="onSubmit(form)">
<label>
<div class="field-heading">Name</div>
<input type="text" [(ngModel)]="product.name" name="productName" class="theme-input" id="text" placeholder="Enter product name">
</label>
<product-variant></product-variant>
</form>
Product Component TypeScript File
export class ProductComponent implements OnInit {
variant = new Variant();
product= new Product();
constructor() { }
ngOnInit() {
}
onSubmit(){
console.log(this.product);
console.log(this.variant);
}
ProductVariant Component HTML File
<label>
<div class="field-heading">Starting Inventory</div>
<input type="text" [(ngModel)]="variant.reorderLevel" name="reorder" class="theme-input" id="text" placeholder="Starting Inventory">
</label>
ProductVariant Component TypeScript File
import { Component, OnInit } from '@angular/core';
@Component({
templateUrl: 'product-variant.component.html',
selector: 'product-variant'
})
export class ProductVariant implements OnInit {
variant = new Variant();
// Need to find a way to pass data from this component to the product component
}