display the value entered in table - angular5

Question

creating table and displaying value on clicking submit button. The value to be displayed on submitting data
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app1';
private fieldArray: Array<any> = [];
private newAttribute: any = {};
addFieldValue() {
this.fieldArray.push(this.newAttribute)
this.newAttribute = {};
}
/* ngOnInit(){
console.log(this.fieldArray);
} */
}

Answer 1

You can maintain a recentlyAddedProducts list in the component class and push the newly added data in this list. Then render that list in the template like this:
Component class:
recenltyAddedProducts: Array<any> = [];
private fieldArray: Array<any> = [];
private newAttribute: any = {};
addFieldValue() {
this.fieldArray.push(this.newAttribute)
this.recenltyAddedProducts.push(this.newAttribute);
this.newAttribute = {};
}
Have your template setup like this:
<h3 style="color:darkmagenta" >Recently added products:</h3>
<div *ngFor="let p of recenltyAddedProducts">
<span>
{{p.productName}}
</span>
<span>
{{p.quantity}}
</span>
See the stackblitz showing the demo:
https://stackblitz.com/edit/angular-jvfmfe?file=app/button-overview-example.ts
You can update your code to show only last 3 recently added products.
EDIT
To show only one recent product do the following change:
Component class:
recenltyAddedProduct;
private fieldArray: Array<any> = [];
private newAttribute: any = {};
addFieldValue() {
this.fieldArray.push(this.newAttribute)
this.recenltyAddedProduct = this.newAttribute;
this.newAttribute = {};
}
Have a template like this:
<h3 style="color:darkmagenta" >Recently added products:</h3>
<span>
{{recenltyAddedProduct?.productName}}
</span>
<span>
{{recenltyAddedProduct?.quantity}}
</span>
To show in h3 tag have a template like this:
<h3 style="color:darkmagenta" >Recently added products: <span>
{{recenltyAddedProduct?.productName}}
</span>
<span>
{{recenltyAddedProduct?.quantity}}
</span></h3>

Answer 2

Use an ngIf that tests for the existence of the a selected product and databind the product name to the heading. Create a recentlySelected property on the component and onclick set the recentlySelected property to that value of the clicked product or product name.
<h3 style="color:darkmagenta" *ngIf="recentlySelected" >Recently added products:{{recentlySelected}}</h3>
Here is an example:
https://stackblitz.com/edit/angular-ngif-click-zdb9ng?file=app/app.component.html