how can I get the name of property, to which [(ngModel)] is binded? Angular6

Question

I have following custom component

<form-text
    [(ngModel)]="dataItem.prop1">
  </form-text>

How Can I get the property name from class in this case "prop1"?

  @Component({
  selector: 'form-text',
  template: `
    <div>
      <label *ngIf="label" [attr.for]="identifier">{{label}}</label>
      <input
        type="text"
        [(ngModel)]="value"
      />
    </div>
  `,
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: FormTextComponent,
    multi: true,
   }],
  })
export class FormTextComponent extends ElementBase<string>{

    @ViewChild(NgModel) model: NgModel;

    constructor(@Optional() @Inject(NG_VALIDATORS) validators: Array<any>){
       super(validators);
    }

}

angular somehow knows which property it should update. I want to get the reference or name of this property. thanks

Answer 1

You can pass an @input property 'propname' with value as string.

<form-text
    required
    hexadecimal
    [dataV]="data"
    placeholder="Enter a hexadecimal value"
    label="Value 1"
    #prop1=ngModel
    [(ngModel)]="dataItem.prop1"
    propname="'prop1'"
    >
  </form-text>

In FormTextComponent,

@input() propname: string;
@ViewChild('prop1') propmodel: ngModel;

console.log(this.propname); // prop1
console.log(this.propmodel);