Their are 3 types of binding which are listed below.
- 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.
- One-Way binding [Component – – -> UI]: when you want to send data from Component to UI you can use Square brackets.
- 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
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.
- Major version:– it means developer added new features remove the old one and major version incremented when there are breaking changes.
- Minor Version: It is incremented when there are new features added but no breaking changes present.
- Revision: it is incremented when patches or bug fixes.
The below image is for 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