Got interpolation ({{}}) where expression was expected

template

<div [hidden]="!checkIfInvalid(i, 'item_exportExpression_')">
                            <small class="form-text text-danger" [hidden]="isRequiredError(i, 'item_exportExpression_')" dpTranslate="dataconfiguration.validation.required"> This field is
                                required. </small>
    </div>

component

checkIfInvalid( index: number, field: string ): boolean {
        const control = this.getControl( index, field );
        if ( control && control.dirty && !control.valid ) {
            return true;
        }
        return false;
    }

    isRequiredError( index: number, field?: string ): boolean {
        const control = this.getControl( index, field );
        if ( control && control.getError( "required" ) ) {
            return true;
        }
        return false;
    }

There are 4 types of bindings:

• Property binding i.e. [] required to evaluate values
• Model binding i.e. [()] required nothing special
• Interpolation binding i.e. {{}} could be used with general attributes
• Event binding i.e. () worked great with functions

To answer your question, something like this worked for us:

<input type="checkbox" [id]="['model-'+i]" [(ngModel)]="model" name="model-{{i}}" (change)="changeHandler($event)" />

Use like this instead of interpolation

  <button class="btn btn-primary" title="Edit" (click)="showEditModal(record.id)"><i class="fa fa-edit"></i></button>

{{}} never goes together with [prop]="..." or (event)="..."

<small class="form-text text-danger" 
       [hidden]="!editForm.controls.['field_item_exportExpression_' + i]?.errors?.required" dpTranslate="dataconfiguration.validation.required"> This field is
                        required. 
</small>