Posts

Data Binding

-
Image
 In This topic we are going to look at Data Bindings and how angular keeps both view and component in sync. we will see what techniques we can use to keep component and view in sync. Data Binding in Angular ➤➤ In simple word data binding is a technique which keeps component and view in sync in respect to data. Whenever user updates data in view, angular updates the component and when component get any new data angular sync it with view. The angular data binding can be classified in two group ➣ 1. One-way Binding 2. Two-way Binding One-way data binding ⮞ In one way data binding data flows in one direction, either from component to view or from view to component. To bind data from component to view or html we can use property binding or Interpolation. Interpolation  ⮞⮞ If you want to display read only data in a view template then we can use angular interpolation. The interpolation allow us to place the component property name in the view template, enclosed in  curly brace...
Post a Comment
Read more

Components

-
In this topic we will look at Angular Components and its metadata properties. What is Angular Component ? We can say Angular component is the main building block of angular application. The component contains data and logic which defines the behavior's and looks of the view. i.e. UI Page or HTML page. Syntax to create angular component ng generate component ' yourComponentName ' or in short ng g c 'yourComponentName'.  The angular component are javascript classes which is defined using @Component Decorator. The Component is responsible to provide data to view or html. Angular does this by using Data Binding to get the data from component to view or html. An angular application can have any number of components and each components plays there own role in a angular application. The components contains three main building blocks: 1. Template 2. Class 3. Metadata Template or view or HTML file Templates are nothing but HTML code with Angular Template Syntax, without ...
Post a Comment
Read more

Bootstrap in Angular

-
Image
Angular Components   In this topic we will look how Angular work internally and bootstrap application. When you create a new angular project using ng new 'project Name' it will generate many files like shown below: checkout  Angular Application with Angular CLI  for more...   What is Bootstrapping ? Bootstrapping is a technique of loading or initializing our angular application. Angular takes following steps to our first view. 1. Index.html gets loaded. 2. Libraries gets loaded. 3. Main.ts entry point for application. 4. Root Module. 5. Root Component. 6. Templates. Index.html Index.html is the first page to load, you can find index.html under src folder src → index.html.  you can see index.html does not contain any javascript or stylesheet file, it only contain html tag  <app-root></app-root> inside body. index.html will look as shown below: <!doctype html > <html lang = "en" > <head>   <meta charset = "u...
Post a Comment
Read more