Day 14 : Concepts in Angular

-
We have studied the angular directives in previous blog.....Now we are going to learn the concepts in angular.....

 ngModel :

  • The ngModel directive binds select, input and form control.
  • The ngModel try to bind to the property given by evaluating the expression on given scope.
  • If the property doesn't exist on scope, it will be created and added to the scope.
  • One-way binding syntax - [ngModel]=" " it binds to input.value.
  • Two-way binding syntax - [(ngModel)]=" " it update with value of input.value.
  • The two-way binding syntax is compound from [ngModel]=" " and (ngModel)=" ".
 ngModel responsibilities :
  1.  Binds the view into the model, which other directives require.
  2.  Providing validating behavior(i.e email,url)
  3.  Setting related css classes like ng-valid, ng-invalid, ng-empty etc.

Directives:

There are three kinds of directives in angular :
  1.  Components : directives with template.
  2.  Structural directives : change the structure of the view. Eg. NgFor and NgIf 
  3.  Attribute directives : change the behavior or style of an element, component or another directive. 

Two-way Binding :

  • The two-way binding is a combination of square brackets and parenthesis as[( )].
  • Where the square brackets[] are of property binding with the parenthesis() of event binding.
  • The two-way binding  is used to listen the events and update values simultaneously between parent and child.
  • Two-way binding combines property binding and event binding with inputs & outputs, where property binding sets a specific element property and event building listens for an element change event. 

Components :

  • Components are the most basic user interface building block of angular app.
  • The components are subset of directives and associated with template.
  • The component must belong to or must member of NgModule.
  • The @Component decorator identifies the class as component class and specifies the metadata.
"The decorator mark a class as angular component and provides configuration metadata that determines how the component should be processed and used at runtime."

ngFor :

  • The ngFor directive is used to repeat a portion of HTML template once per each item from list.
  • The ngFor is a structural directive same as ngRepeat.
  • Syntax   -----   *ngFor = "let item of items;"    where the item is object and items is class.

Declarative vs Imperative :


  • The declarative specify what to do but not how to do it.
  • The declarative is a functional OOP.
  • The imperative specify both what and how to do it.
  • The imperative is a procedural OOP.
  • Most of the developers and angular also prefer declarative over imperative programming.
  • In declarative programming we write code that describes what you want, but not necessarily how to get it.
  • The how to get it is solved by imperative codes.

If you have any doubts comment below and for more understanding watch below video :


Thank You!!!


Comments

Post a Comment

Popular posts from this blog

Day 3 : JavaScript

-
Image
 Data Types of JavaScript:  In JavaScript, their are three data types present i.e number, string and boolean. As we all know JavaScript is a dynamic language, means one variable can hold different datatypes.                    Example :                                      var x;                                      x=10;              //number                                      x="Hello"      //string                     // In above eg. the x holds number as well as string but shows string.                 ...
Read more

SQL Concepts-1

-
Image
              In this blog we are going to understand the important and basic concepts of SQL... Q. How to  create a SQL server database  connection and new database? 1. Firstly open SSMS and connect with server also ensure SQL Server(MSSQLSERVER) is in running mode - 2. Create a new database -                                                              3. Create a table - // U need to refresh whenever u add a new table            Q. What is primary key and foreign key in SQL server? Primary Key :  Primary key is a column having unique record. Primary key cannot have NULL values. It is used to uniquely identify records in relational database. Only one primary key is allowed in a table. When we delete or update records, data integrity happens. Foreign Key...
Read more

ASP .NET Session Management

-
Image
  Q. Why http protocol is called as stateless ? HTTP protocol is called as stateless because the http server not keeps the record of any information. When client requests to server, every time request treated independently(it not checks whether it requested before or not) by server. We can also say that when client ends the process of any task the connection between server and browser also terminated. In below example we can see that after accessing browser when we again access the value of i starts again from 0.                                                   Stateless Protocol : Stateless protocols are the protocols in which client sends request to server and server response back to client based on current state.  Server not require to maintain information of each client with multiple requests. Some important features of stateless protocol are :...
Read more