This HTML snippet is taken from our Angular page, where users can enter a question and its corresponding answer (similar to a Q&A feature).
<mat-card>
<button mat-stroked-button color="primary" style="margin-right: 20px;">
Add a new Q & A pair
</button>
</mat-card>
<div *ngFor="let qna of interview.qnas">
<mat-card id="{{qna.id}}" style="margin-bottom: 25px;">
<mat-form-field>
<input matInput type="text" class="form-control" placeholder="Interview question" required [(ngModel)]="qna.question" name="question">
</mat-form-field>
<mat-form-field>
<textarea matInput rows="5" class="form-control" placeholder="Ideal answer from the talent" [(ngModel)]="qna.answer" name="answer"></textarea>
</mat-form-field>
<button mat-stroked-button color="warn">
Remove this
</button>
</mat-card>
</div>
In the provided HTML code, there are two buttons - one for adding a new Q&A pair and the other for removing a pair. While I can figure out how to remove a pair, the challenge lies in dynamically adding a new Q&A pair when the user clicks on the button. It's important to note that we have two-way binding implemented as well.