How add the new I item every time when we click on button-CodePudding

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

.component.html

<div >
          <div >
            <select  id="power" required>
              <option value="" disabled selected>Select one</option>
              <option *ngFor="let value of values" >{{value}}</option>
            </select>
          </div>
          <div >
<select  id="power" required>
              <option value="" disabled selected>Select one</option>
              <option *ngFor="let value of values" >{{value}}</option>
            </select>
          </div>
        </div>

<span ><i ></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.

CodePudding user response：

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 >
    <div >
      <select  id="power" required>
        <option value="" disabled selected>Select one</option>
        <option *ngFor="let value of values">{{ value }}</option>
      </select>
    </div>
    <div >
      <select  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 ></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/app/app.component.html