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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s