Angular handling conditional driven form - html

Question

I am very new to Angular, I am using template driven form.
I have two questions in a form as radio buttons (shown below) , My use case is that, Once user answers both these questions, based on his/her response, I need to show another set of questions.
So, if answer to any of the 2 question is "yes", then I need to show another set of question.If answer to both question is "no", then I need not show another set of question. Pls help how to achieve it.
My template and component.ts file are shown below. I tried to use "*ngIf" with condition
*ngIf="Question1 || Question2", but this doesn't work because as soon as the first question is answered "yes", it displays section with text " Show rest questions". Please see my sample code below. I want that when user answers both the questions, then only the div with text "Show rest questions" or "Don't Show rest questions" should be displayed, based on the response.
<div class="form-group">
<div class="form-group col-md-12">
<label>Question 1?</label>
<input type="radio" name="Question1" [(ngModel)]="Question1" value="yes">Yes
<input type="radio" name="Question1" [(ngModel)]="Question1" value="no">No
</div>
<div class="form-group col-md-12">
<label>Question 2?</label>
<input type="radio" name="Question2" [(ngModel)]="Question2" value="yes">Yes
<input type="radio" name="Question2" [(ngModel)]="Question2" value="no">No
</div>
</div>
<div align="center" *ngIf="Question1 || Question2">
Show rest questions
</div>
<div align="center" *ngIf="Question1 && Question2">
Don't show rest questions
</div>
Below is my partial component.ts
export class Component1 implements OnInit {
public Question1:string;
public Question2:string;
}

Answer 1

this value="yes" will set the selected value to a string , if you want to set the value to true / false try like this
<div class="form-group">
<div class="form-group col-md-12">
<label>Question 1?</label>
<input type="radio" name="Question1" [(ngModel)]="Question1" [value]="true">Yes
<input type="radio" name="Question1" [(ngModel)]="Question1" [value]="false">No
</div>
<div class="form-group col-md-12">
<label>Question 2?</label>
<input type="radio" name="Question2" [(ngModel)]="Question2" [value]="true">Yes
<input type="radio" name="Question2" [(ngModel)]="Question2" [value]="false">No
</div>
</div>
then you can use ngIf to show another section like this
<div align="center" *ngIf="Question1 || Question2; else noQuestions ">
Show rest questions
</div>
<ng-template #noQuestions>
.....
</ng-template>
Question1 || Question2 will become true of any of the answer is selected yes , or you can show the rest in both of the answer is yes like this Question1 && Question2
demo 🚀🚀
updated!! ⚡⚡
set the value to true/false will limt our checking of the selected cases
<div class="form-group">
<div class="form-group col-md-12">
<label>Question 1?</label>
<input type="radio" name="Question1" [(ngModel)]="Question1" value="yes">Yes
<input type="radio" name="Question1" [(ngModel)]="Question1" value="no">No
</div>
<div class="form-group col-md-12">
<label>Question 2?</label>
<input type="radio" name="Question2" [(ngModel)]="Question2" value="yes">Yes
<input type="radio" name="Question2" [(ngModel)]="Question2" value="no">No
</div>
</div>
<div *ngIf="Question1 === 'yes' && Question2 === 'yes' else both">
both questions is selected as yes
</div>
<ng-template #both>
<ng-container *ngIf="Question1 === 'yes' || Question2 === 'yes' else oneAsNo">
one of the questions is selected as yes
</ng-container>
</ng-template>
<ng-template #oneAsNo>
<ng-container *ngIf="Question1 === 'no' || Question2 === 'no' else none">
one of the questions is selected as no
</ng-container>
</ng-template>
<ng-template #none>
none of the questions
</ng-template>
demo 🌟🌟