How to show/hide a select dropdown with options on check/uncheck checkbox in angular 2

I have the below HTML code in which i have added change event for checkbox, on check of checkbox, the select dropdown should be shown, and on uncheck of checkbox, the select drop down should be hidden. I have added ngIf condition and set the value of showDropDown to true or false in ts file. But i dont know what is wrong, the show/ hide of select dropdown doesnt work. however, if i replace select drop down with a plain text , the show / hide works fine. is there a specific way to achieve show/hide for select drop down?

<div>
            <label>
              <input name="test" type="checkbox" (change)="showHideDropDown($event)">
            </label>
            <label>I receive other income annually</label>
          </div>


              <div *ngIf="showDropDown">
                <select id="form2" class="mdb-select">
                  <option value="" disabled selected>Other Income Amount</option>
                  <option value="1">SAR 2000 and below</option>
                  <option value="2">SAR 2000 to 5000</option>
                  <option value="3">SAR 5000 to 10000</option>
                  <option value="4">SAR 10000 to 20000</option>
                  <option value="5">SAR 20000 to 40000</option>
                  <option value="6">SAR 40000 to 60000</option>
                  <option value="7">SAR 60000 and above</option>
                </select>
              </div>