Issue
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!
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;