[Fixed] How to show value after submit button in angular?

Issue

I made a form in Angular where, when user submit a formnew 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: enter image description here

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;
 }
}
 

Solution

The very basic and easiest way to do this –

HTML FILE

<button class="submit-btn" (click)="showMyContainer=!showMyContainer" type="submit">Submit</button>

Make Changes in TS File –

showMyContainer: boolean = false;

Leave a Reply

(*) Required, Your email will not be published