Show section based on user input using ng-if or ng-show

Question

So I have 2 sections and I only want one of them visible depending on the user input.

When the user selects 'Daily' in the first 'type' input I would like the section 1 to show(Enter start date and hour). If the user selects any other type I would like section 2 to show(Enter start date).

I'm quite new to coding and ionic and I've looked around and couldn't find an answer for this. This is what I've done so far, but it doesn't work.

This is the html:

<ion-content>

<h2>Type:</h2>
<ion-item>
        <ion-select class="input"[(ngModel)]="type" placeholder="Please select" (click)="type()" text-right>
          <ion-option value="Annually">Annually</ion-option>
          <ion-option value="Monthly">Monthly</ion-option>
          <ion-option value="Weekly">Weekly</ion-option>
          <ion-option value="Daily">Daily</ion-option>
        </ion-select>   
</ion-item> 

//Section 1
<h2 *ngIf="showDaily">Enter Start Date and Hour:</h2>
        <ion-datetime displayFormat="DD-MM-YYYY" [(ngModel)]="fromDate"></ion-datetime>
        <ion-datetime displayFormat="HH:MM A" [(ngModel)]="fromTime"</ion-datetime>

//Section 2
<h2 *ngIf="!showDaily">Enter Start Date:</h2>
            <ion-datetime> displayFormat="DD-MM-YYYY" [(ngModel)]="fromDate" (ngModelChange)="dateChange($event, 'from' )"></ion-datetime>

This is in the .ts :

export class RequestPage {
    public showDaily = selectedtype;

constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.type = getSelection;}

type() {
    this.type = getSelection.name;
    if (this.type="Daily") {this.showDaily=true}
    else {this.showDaily=false};
}

Answer 1

Use the ng-template instead. You can use the type for the ngIf condition. Here:

<h2>Type:</h2>
<ion-item>
    <ion-select class="input" [(ngModel)]="type" placeholder="Please select" text-right>
      <ion-option>Annually</ion-option>
      <ion-option>Monthly</ion-option>
      <ion-option>Weekly</ion-option>
      <ion-option>Daily</ion-option>
    </ion-select>   
</ion-item>
<ion-item>
    <div *ngIf="type=='Daily'; else elseBlock">
        <h2>Enter Start Date and Hour:</h2>
        <ion-datetime displayFormat="DD-MM-YYYY" [(ngModel)]="fromDate"></ion-datetime>
        <ion-datetime displayFormat="HH:MM A" [(ngModel)]="fromTime"</ion-datetime>
    </div>
</ion-item>
<ng-template #elseBlock>
    <div>
        <h2>Enter Start Date:</h2>
        <ion-datetime> displayFormat="DD-MM-YYYY" [(ngModel)]="fromDate" (ngModelChange)="dateChange($event, 'from' )"></ion-datetime>
    </div>
</ng-template>