CODEWITHSUNDEEP
angular
Cyril
Cyril

Reputation: 47

ngIF is not working with my object property to apply a condition to show and hide

I would like to retrieve the boolean isdropdown from my object to place it in the ngIf condition but I can not access it.

Here is my html component :

<div formArrayName="inputRows" *ngFor="let inputRow of formData.controls; let i = index; let c = count">
    <div class="line" [formGroupName]="i" id="inputRow">
        <!-- <span>{{i+1}} </span> -->
        <select *ngIf="table.columns.isDropdown; else noDropdown">
            <option *ngFor="let param of typpar">{{param.libelle}}></option>
        </select>
        <ng-template #noDropdown>
            <input class="myInput" *ngFor="let column of table.columns" formControlName="{{column.name}}" type="{{ column.type }}" name="{{column.name}}_{{i}}" maxLength="{{ column.length }}" required="{{ column.nullable }}" value="{{ column.dataDefault }}" placeholder=" ">
        </ng-template>
        <span><img title="Supprimer la ligne " *ngIf="c > 1" (click)="deleteInputLine($event, i)" id="deleteIcon" src="../../assets/img/cancel.png" /></span>
   </div>
</div>

My object where I have dropdown boolean property :

enter image description here

My Result :

enter image description here

My goal is to put a drop-down menu when my column object contains a "dropdown": true

Upvotes: 0

Views: 621

Answers (2)

sneas
sneas

Reputation: 1062

You need to *ngFor columns before checking for isDropdown:

<div formArrayName="inputRows" *ngFor="let inputRow of formData.controls; let i = index; let c = count">
  <div class="line" [formGroupName]="i" id="inputRow">
    <ng-container *ngFor="let column of table.columns">
      <select *ngIf="column.isDropdown; else noDropdown">
        <option *ngFor="let param of column.parameters">{{param.libelle}}></option>
      </select>
      <ng-template #noDropdown>
        <input class="myInput" formControlName="{{column.name}}" type="{{ column.type }}" name="{{column.name}}_{{i}}" maxLength="{{ column.length }}" required="{{ column.nullable }}" value="{{ column.dataDefault }}" placeholder=" ">
      </ng-template>
    </ng-container>
    <span><img title="Supprimer la ligne " *ngIf="c > 1" (click)="deleteInputLine($event, i)" id="deleteIcon" src="../../assets/img/cancel.png" /></span>
  </div>
</div>

Upvotes: 1

Abdul Aleem
Abdul Aleem

Reputation: 361

let say

// in controller
get formData() { return <FormArray>this.myform.controls['inputRows']; }
this.myform = this.formBuilder.group({ inputRows: this._fb.array([])})

// in html 
<div formArrayName="inputRows" *ngFor="let inputRow of formData.controls; let i = index; let c = count">
    <div class="line" [formGroupName]="i" id="inputRow">
    <!-- <span>{{i+1}} </span> -->
    <select *ngIf="inputRows[i].isDropdown">
        <option *ngFor="let param of typpar">{{param.libelle}}></option>
    </select>
    <ng-template #noDropdown>
        <input class="myInput" *ngFor="let column of table.columns" formControlName="{{column.name}}" type="{{ column.type }}" name="{{column.name}}_{{i}}" maxLength="{{ column.length }}" required="{{ column.nullable }}" value="{{ column.dataDefault }}" placeholder=" ">
    </ng-template>
    <span><img title="Supprimer la ligne " *ngIf="c > 1" (click)="deleteInputLine($event, i)" id="deleteIcon" src="../../assets/img/cancel.png" /></span>
</div>
</div>

Upvotes: 1

Related Questions