Posts

Interpolation Event binding Property binding and Pipes

Interpolation {{ }} lets you render the property value as text;    <h3> {{ item.name }} </h3> The interpolation syntax {{ }} : <div * ngFor = " let item of items " >   <h3> {{ item.name }} </h3> </div> Event binding lets your app respond to user input in the target environment by updating your application data. Event binding ()   uses a set of parentheses, ( ) , around the event, as in the following <button> element:  <button (click)="share()"> Share </button> Property binding lets you interpolate values that are computed from your application data into the HTML. property binding [ ] lets you use the property value in a template expression. < a [ title ] = "product.name + ' details'" >    {{ product.name }} </ a > Pipes Use pipes to display dates and currency values that are appropriate for a user's locale. Angular pr...

Decorators and Template

Decorators are functions that modify JavaScript classes. Angular defines a number of decorators that attach specific kinds of metadata to classes, so that the system knows what those classes mean and how they should work. A template combines HTML with Angular markup that can modify HTML elements before they are displayed.  Template directives provide program logic, and binding markup connects your application data and the DOM. There are two types of data binding: Ref: angular.io

Components

Components define views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data. Components use services, which provide specific functionality not directly related to views. Service providers can be injected into components as dependencies, making your code modular, reusable, and efficient. Every Angular application has at least one component, the root component that connects a component hierarchy with the page document object model (DOM). Each component defines a class that contains application data and logic, and is associated with an HTML template that defines a view to be displayed in a target environment. The @Component() decorator identifies the class immediately below it as a component, and provides the template and related component-specific metadata. Ref: angular.io

NgModules

NgModules  The basic building blocks of an Angular application are NgModules NgModules which provide a compilation context for components.  NgModules associate related code into functional sets. An Angular app is defined by a set of NgModules.  An app always has at least a root module that enables bootstrapping that launches the application. NgModules can import functionality from other NgModules, and allow their own functionality to be exported and used by other NgModules. NgModules are containers for a cohesive block of code dedicated to an application domain. They can contain components, service providers, and other code files whose scope is defined by the containing NgModule. They can import functionality that is exported from other NgModules, They export selected functionality for use by other NgModules. Every Angular app has at least one NgModule class, The root module, which is conventionally named AppModule and resides in a file named app....

Architecture overview

Image
The fundamental building blocks of an Angular apps are  NgModules . NgModules  provides a compilation context for  components .  NgModules collect related code into functional sets. Angular app is structured by a set of NgModules.  An app always has at least a  root module  that enables bootstrapping of app,  and typically it has many more  feature modules . Mainly Angular App consist of followings: NgModules Components Template Services Routing Depedency Injections Ref: angular.io

Angular Introduction

Angular is a  framework   and  platform for building client applications using HTML and (TS)TypeScript.  Angular is written in TypeScript language.  Angular implements core side functionality as a set of TypeScript libraries that you need to import into your apps while developing Apps. Ref: angular.io