0

In two-way data binding using ngModel

<input [(ngModel)]="this.name" >

is actually 

<input [value]="this.name" (input)="this.name=$event.target.value>

So ngModel internally maps (input) event of <input> to this.name

Where can I find information about the events ngModel generates for other elements like <p> etc.?

I want to increase the font of <p> when <p> is clicked. I could do it without ngModel but couldn't do it with ngModel

without ngModel

<p [style.font-size.px]="this.fontsize" (click)="handleParaClick()">Hello {{this.paratext}} {{this.fontsize}}  </p>

  handleParaClick():void{
    this.fontsize+=10;
  }

But I couldn't do

<p [(style.font-size.px)]="this.fontsize" >Hello {{this.paratext}} {{this.fontsize}}  </p>

I am guessing that for <p>, either ngModel doesnt do anything or does not generate (click) event

Manu Chadha
  • 15,555
  • 19
  • 91
  • 184
  • I am not sure what you understand by NgModel, and how it helps to click handle in `p`. `[(ngModel)]` is actually `[ngModel]` and `(ngModelChange)`. What you did without `ngModel` is correct and only way. Unless you create a custom directive. – Vamshi Jun 23 '17 at 17:58
  • I believe (ngModelChange) gets emitted when something changes in DOM. What changes in DOM which causes Angular to emit ngModelChange? I assume that when ngModelChange gets emitted would depend on the element with which we are using ngModel. In 'input' element, it is probably change in value if the input. If it is correct, where can I find for which elements Angular would emit ngModelChange and for which changes? – Manu Chadha Jun 24 '17 at 08:45
  • No, ngModelChange as suggest will be triggered when param assigned to ngModel changes. Where did you read these concepts ? – Vamshi Jun 24 '17 at 11:04
  • But if only change in param triggers in ngModelChange, then that would be 1-way binding. ngModelChange should also get triggered when some property of HTML element it is assigned to (DOM element) gets changed so that param can be updated. In `` changes (DOM property change), ngModelChange probably gets triggered. – Manu Chadha Jun 25 '17 at 08:37
  • Do you agree - `` is `` keeps `value` and property in sync (when property value changes `` `value` gets updated and when `(input)` event happens, property changes? My question is with which other elements can I use ngModel? Can I use it with
  • , ? Change event in these elements woudl trigger ngModelChange? Where can I find this information?
    • – Manu Chadha Jun 25 '17 at 08:38
  • https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts its just 100 line code . Read and ask if you did not understand anything there – Vamshi Jun 25 '17 at 15:20
  • Thanks. I'll take some time to go through this. This is advanced compared to my current knowledge of Angular. At the moment, I can see that ngModel would work for form controls like TextArea, Select and Input. It makes sense as these controls would have 'data' for two-way data binding. My original question about `

    ` doesn't make sense as `

    `'s data would not change (from UI to affect the model).

     – Manu Chadha Jun 26 '17 at 08:55