Steps to reveal a concealed div when a button is pressed and hide the button in Angular 2

Question

Steps to reveal a concealed div when a button is pressed and hide the button in Angular 2

Having trouble with Angular UI development, particularly with the following requirement:

When the Add Button is clicked, a hidden form should be displayed.
Clicking the Add Button should also hide it.
The hidden form includes a Cancel button.
If Cancel is clicked, the form should hide and the Add Button should reappear.

I attempted to achieve this using Angular 2 template syntax and nested boolean values, but haven't found the ideal solution yet.

How can I accomplish this in Angular 2 or 4? Do I need to utilize a host listener or event emitter for this task? Below is a snippet of my code along with a link to a Plunker demo:

template.html

<button(click)="addParameter=addParameter==true?false:true">
              Add</button>

            <div class="Parameters" *ngIf="addParameter==true">

            <input name="hello">

            <button (click)="hideForm();">Cancel</button>
            </div>

test.ts

export class App {

  private addParameter:boolean=false;

}

https://plnkr.co/edit/fa3Pdea1mB4RztAgOAW2?p=preview

javascript jquery html css angular

Answer 1

Answer №1

There are a few ways to achieve this. Depending on whether you want to handle it in the component or the template. Personally, I like to keep the template clean and do the "work" in the component. In that case, your code would look something like this:

<button *ngIf="!addParameter" (click)="toggleForm()">Add</button>
<div class="Parameters" *ngIf="addParameter">
  <input name="hello">
  <button (click)="toggleForm()">Cancel</button>
</div>

and in the TypeScript file:

toggleForm() {
  this.addParameter = !this.addParameter
}

DEMO: http://plnkr.co/edit/y3bDxsXMTYLtf8HI2PlA?p=preview

If you prefer to do this in the template, it would look like this:

<button *ngIf="!addParameter" (click)="addParameter = !addParameter">Add</button>
<div class="Parameters" *ngIf="addParameter">
  <input name="hello">
  <button (click)="addParameter = !addParameter">Cancel</button>
</div>

DEMO: https://plnkr.co/edit/xcSzXGWOMNIhuZ83OXbs?p=preview

Answer 2

There are a few ways to achieve this. Depending on whether you want to handle it in the component or the template. Personally, I like to keep the template clean and do the "work" in the component. In that case, your code would look something like this:

<button *ngIf="!addParameter" (click)="toggleForm()">Add</button>
<div class="Parameters" *ngIf="addParameter">
  <input name="hello">
  <button (click)="toggleForm()">Cancel</button>
</div>

and in the TypeScript file:

toggleForm() {
  this.addParameter = !this.addParameter
}

DEMO: http://plnkr.co/edit/y3bDxsXMTYLtf8HI2PlA?p=preview

If you prefer to do this in the template, it would look like this:

<button *ngIf="!addParameter" (click)="addParameter = !addParameter">Add</button>
<div class="Parameters" *ngIf="addParameter">
  <input name="hello">
  <button (click)="addParameter = !addParameter">Cancel</button>
</div>

DEMO: https://plnkr.co/edit/xcSzXGWOMNIhuZ83OXbs?p=preview

Answer 3

Answer №2

Perhaps the solution you're seeking is along the lines of this:

<div>
      <form>
        <input name="hello">
        <button *ngIf="addingForm===false" (click)="addingForm = true">Add</button>
        <button *ngIf="addingForm===true" (click)="addingForm = false">Cancel</button>
      </form>
      <form *ngIf="addingForm===true">
        <input name="hidden">
      </form>
    </div>

In TypeScript:

addingForm = false;

You can also refer to this example: https://plnkr.co/edit/uXztfHwdWxuTVNIg6sxA?p=preview

Answer 4

Perhaps the solution you're seeking is along the lines of this:

<div>
      <form>
        <input name="hello">
        <button *ngIf="addingForm===false" (click)="addingForm = true">Add</button>
        <button *ngIf="addingForm===true" (click)="addingForm = false">Cancel</button>
      </form>
      <form *ngIf="addingForm===true">
        <input name="hidden">
      </form>
    </div>

In TypeScript:

addingForm = false;

You can also refer to this example: https://plnkr.co/edit/uXztfHwdWxuTVNIg6sxA?p=preview

Steps to reveal a concealed div when a button is pressed and hide the button in Angular 2

Answer №1

Answer №2

Similar questions

Please add content prior to the <input type="image"> tag

Tips for generating a single CSS file that adapts to various screen sizes without the ability to modify the class names within the library

The Cascading of Bootstrap Card Designs

What is the best way to integrate jQuery Masonry with ES6 modules?

"Simply click and drag the preselected item into the viewer to add it

Utilizing Promise.all() for handling multiple promises with multiple arguments

Generating SVG images that show up as black in light mode and switch to light colors in dark mode

Confirming changes to checkbox values in Angular 2 prior to updating

Error in Node.js Express: Attempted to access property 'image' of null resulting in an unhandled error event

Adjust the size of a DIV once all AJAX requests have been completed within a .getScript function in JavaScript

ChakraUI ForwardRef in React not applying variant to child component

How to find the length of an array in Node.js without utilizing JQuery

Enhance the appearance of your Vuejs application with conditional style formatting

Positioning the Submenu in Elementor Site

Looking for specific styles within CSS classes

Unable to retrieve DateTime.Now as a string within a Razor view

Optimizing Bootstrap 4 Carousel for various screen sizes

Sharing AppSettings between an Angular project and ASP.NET Core in a seamless manner

What is the process of displaying JSON headers using JavaScript?

The background appears after the drop down menu text