[FIXED] How add the new I item every time when we click on button

Issue

In my application I have two select dropdowns and below the dropdowns I have one button .

.component.html

<div class="row">
          <div class="col-sm-5">
            <select class="form-control whenI" id="power" required>
              <option value="" disabled selected>Select one</option>
              <option *ngFor="let value of values" >{{value}}</option>
            </select>
          </div>
          <div class="col-sm-5">
<select class="form-control whenI" id="power" required>
              <option value="" disabled selected>Select one</option>
              <option *ngFor="let value of values" >{{value}}</option>
            </select>
          </div>
        </div>

<span ><i class="icon icon-add"></i>Add new Habit
      </span>

My requirement is when I click on the add icon It should append or add the above two dropdowns every time when we click on the item.

Can anyone helpme on the same.

Solution

We can use *ngIf to read a boolean shouldShow that we turn true/false with click listener on the Add new Habit icon. ng-container is used to hold the template variable, but unlike div, span etc. it won't get rendered on the DOM.

<ng-container *ngIf="shouldShow">
  <div class="row">
    <div class="col-sm-5">
      <select class="form-control whenI" id="power" required>
        <option value="" disabled selected>Select one</option>
        <option *ngFor="let value of values">{{ value }}</option>
      </select>
    </div>
    <div class="col-sm-5">
      <select class="form-control whenI" id="power" required>
        <option value="" disabled selected>Select one</option>
        <option *ngFor="let value of values">{{ value }}</option>
      </select>
    </div>
  </div>
</ng-container>
<br /><br />
<span (click)="onAdd()"><i class="icon icon-add"></i>Add new Habit </span>

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  values = [1, 2, 3, 4, 5];
  shouldShow: boolean = false;

  onAdd() {
    console.log('doing it');
    this.shouldShow = !this.shouldShow;
  }
}

Here is a working example: https://stackblitz.com/edit/angular-ivy-cuj5z7?file=src%2Fapp%2Fapp.component.html

Answered By - Joosep.P

Answer Checked By - Marie Seifert (PHPFixing Admin)