Angular Binding how it works and the Significance of package.lock.json

In this article, Sagar Jaybhay explains different ways of angular binding in angular and Package.lock.json file significance in angular application.

Angular Binding

Their are 3 types of binding which are listed below.

  1. One-Way binding( UI – – -> Component): when you want to send data from UI to Component you can use this. () angular bracket this syntax is used for one way binding from UI to Component.
  2. One-Way binding [Component – – -> UI]: when you want to send data from Component to UI you can use Square brackets.
  3. Two-Waybindig: when you want to send data from UI to Component and Component to UI you can use [()] this syntax.
Customer ID : <input [(ngModel)]="CustomerModel.CustomerID" type="text">
<br/>
Customer Name : <input [(ngModel)]="CustomerModel.CustomerName" type="text">
<br/>
Customer Amount : <input [(ngModel)]="CustomerModel.CustomerAmount" type="text">

<br/>
<br/>
<hr>

<table>
    <tr><td>Customer ID</td><td>{{CustomerModel.CustomerID}}</td></tr>
    <tr><td>Customer Name </td><td>{{CustomerModel.CustomerName}}</td></tr>
    <tr><td>Customer Amount</td><td>{{CustomerModel.CustomerAmount}}</td></tr>
</table>

But above code is not worked it will throw an error

ngModel Angular Error: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’

why because angular have the modular approach and to work binding, it needs formModule for that purpose we need to import this in our customer.module.ts file now our code becomes.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import {FormsModule } from '@angular/forms'

import { AppRoutingModule } from './Customer-routing.module';
import { CustomerComponent } from './Customer.component';

@NgModule({
  declarations: [
    CustomerComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [CustomerComponent]
})
export class AppModule { }

angular formModule

Package.Lock.json:

This package.lock.json tells us how npm versioning works.

In the above figure, 5.2.1 is our version in this 5 represents a major version, 2 is a minor version and 1 is revision. So by using the above image, you will understand version number is divided into 3 parts major, minor and revision.

  1. Major version:– it means developer added new features remove the old one and major version incremented when there are breaking changes.
  2. Minor Version: It is incremented when there are new features added but no breaking changes present.
  3. Revision: it is incremented when patches or bug fixes.

The below image is for package.lock.json.

package.lock.json

So if you check the above image if no symbol present in-front of version number then it is not updated automatically. Npm does not increment the major version automatically. But it gives provision for upgrading minor version and provision by using below symbols in front of version numbers.

^:- this for latest minor and revision version

~:- this is for the only install the latest revision

This is the file created after npm resolution and it created automatically.

GitHub Project Link: https://github.com/Sagar-Jaybhay/angular9

Sagar Jaybhay, from Maharashtra, India, is currently a Senior Software Developer at Software Company. He has continuously grown in the roles that he has held in the more than seven years he has been with this company. Sagar Jaybhay is an excellent team member and prides himself on his work contributions to his team and company as a whole.

Sagar Jaybhay

Sagar Jaybhay, from Maharashtra, India, is currently a Senior Software Developer at Software Company. He has continuously grown in the roles that he has held in the more than seven years he has been with this company. Sagar Jaybhay is an excellent team member and prides himself on his work contributions to his team and company as a whole.

You may also like...