How to show value after submit button in angular?

Question

I made a form in Angular where, when user submit a form - new value show be shown under the form , I tried everything as per my knowledge but nothing works, currently labels of below form is showing without click, I need to show everything once where clicked submit button!

My interface:

HTML FILE

     <div class="form-field col-lg-12">
   <input class="submit-btn" type="submit" value="click" (click)="update">
              </div>

<div class="form-field col-lg-12">
   <input class="submit-btn" type="submit" value="click" (click)="update">
</div>
<div *ngIf="display">
   <section class="admin-form">
      <form class="contact-form row">
         <div class="form-field col-lg-6" >
            <label class="label" for="name">Article ID</label>
            <label class="label infolabel" for="name">Fc409702-683e-11eb-Bc5e-54ee750463ec</label>
         </div>
         <div class="form-field col-lg-6 ">
            <label class="label" for="company">Title</label>
            <label class="label infolabel" for="company">SKF India Logs Nearly 2-Fold Rise In Q3 Net Profit</label>
         </div>
         <div class="form-field col-lg-6">
            <label class="label" for="message">Publication, Edition</label>
            <label class="label infolabel" for="message">Times Of India, Mumbai</label>
         </div>
       
            <input class="submit-btn" type="button" value="Delete" data-toggle="modal" data-target="#popup1">
         </div>
      </form>
   </section>
</div>

 

TS FIle

    export class MainComponent implements OnInit {

  constructor() { }
  display = true;

  ngOnInit(): void {
    $("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
  });
  }
  update(){
    this.display = !this.display;
 }
}
 

Answer 1

I made a form in Angular where, when user submit a form - new value show be shown under the form , I tried everything as per my knowledge but nothing works, currently labels of below form is showing without click, I need to show everything once where clicked submit button!

My interface:

HTML FILE

     <div class="form-field col-lg-12">
   <input class="submit-btn" type="submit" value="click" (click)="update">
              </div>

<div class="form-field col-lg-12">
   <input class="submit-btn" type="submit" value="click" (click)="update">
</div>
<div *ngIf="display">
   <section class="admin-form">
      <form class="contact-form row">
         <div class="form-field col-lg-6" >
            <label class="label" for="name">Article ID</label>
            <label class="label infolabel" for="name">Fc409702-683e-11eb-Bc5e-54ee750463ec</label>
         </div>
         <div class="form-field col-lg-6 ">
            <label class="label" for="company">Title</label>
            <label class="label infolabel" for="company">SKF India Logs Nearly 2-Fold Rise In Q3 Net Profit</label>
         </div>
         <div class="form-field col-lg-6">
            <label class="label" for="message">Publication, Edition</label>
            <label class="label infolabel" for="message">Times Of India, Mumbai</label>
         </div>
       
            <input class="submit-btn" type="button" value="Delete" data-toggle="modal" data-target="#popup1">
         </div>
      </form>
   </section>
</div>

 

TS FIle

    export class MainComponent implements OnInit {

  constructor() { }
  display = true;

  ngOnInit(): void {
    $("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
  });
  }
  update(){
    this.display = !this.display;
 }
}
 

Answer 2

On (click) you call update which I'm guessing is a function in your.ts.

If so, your.ts file can have something like this:

display: boolean = false;

/*...*/

update() {
  ...
  this.display = true;
  ...
}

Then you *ngIf=display will trigger and show whatever is contained within

Answer 3

In the click handler, update should have () , like so:

<div class="form-field col-lg-12">
   <input class="submit-btn" type="submit" value="click" (click)="update()">
</div>

<div class="form-field col-lg-12">
   <input class="submit-btn" type="submit" value="click" (click)="update()">
</div>