Angular - how to display text / String / Date type based on the mat select drop down

Question

Based on Mat-select selected value (text/Number/Date) text field type and relevant element have to be shown. Here is my code but in this code, I am showing all.

For example If user selecting drop down as date only date field has to show not string/ number vice versa for others.....

          <form class="example-form">
            <mat-form-field class="example-full-width">
                <mat-label>Name of Assumption </mat-label>
                <input matInput type="text" placeholder="Enter Assumption Name">
            </mat-form-field>
            <mat-form-field class="example-full-width">
                <mat-form-field>
                    <mat-label>Selected Assumption Type...</mat-label>
                    <mat-select formControl="dataType">
                        <mat-option value="Number">Number</mat-option>
                        <mat-option value="Text">Text</mat-option>
                        <mat-option value="Date">Date</mat-option>
                    </mat-select>
                  </mat-form-field>
            </mat-form-field>
            <mat-form-field class="example-full-width">
                <mat-label>Contracted Value </mat-label>
                <input matInput type="text" placeholder="Enter Assumption Value">
            </mat-form-field>
            <mat-form-field class="example-full-width">
                <mat-label>Contracted Value </mat-label>
                <input matInput type="number" placeholder="Enter Assumption Value">
            </mat-form-field>
            <mat-form-field class="example-full-width">
                <mat-label>Contracted Value </mat-label>
                <mat-form-field>
                    <input matInput [matDatepicker]="picker" placeholder="Choose a date">
                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                  </mat-form-field>
            </mat-form-field>
            <mat-form-field class="example-full-width">
                <mat-label>Description (Optional) </mat-label>
                <textarea matInput></textarea>
            </mat-form-field>
        </form>

Please let me know how to achieve this

Answer 1

You can achieve it in a very simple way using ngIf conditional and #selector pls note other mat-form-fields continue in the same way... here is your code

<form class="example-form">
            <mat-form-field class="example-full-width">
                <mat-label>Name of Assumption </mat-label>
                <input matInput type="text" placeholder="Enter Assumption Name">
            </mat-form-field>
            <mat-form-field class="example-full-width">
                <mat-form-field>
                    <mat-label>Selected Assumption Type...</mat-label>
                    <mat-select formControl="dataType" #selectVal>
                        <mat-option value="Number">Number</mat-option>
                        <mat-option value="Text">Text</mat-option>
                        <mat-option value="Date">Date</mat-option>
                    </mat-select>
                  </mat-form-field>
            </mat-form-field>
            <mat-form-field class="example-full-width" *ngIf="selectVal.value == 'Text'">
                <mat-label>Contracted Value </mat-label>
                <input matInput type="text" placeholder="Enter Assumption Value">
            </mat-form-field>


            <mat-form-field class="example-full-width">
                <mat-label>Description (Optional) </mat-label>
                <textarea matInput></textarea>
            </mat-form-field>
        </form>