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