#angular 2.0

New Post has been published on https://is.gd/ReyVHx

Angular Architecture overview

Angular is a platform and framework for building client applications in HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.

The basic building blocks of an Angular application are NgModules, which provide a compilation context for components. NgModules collect 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, and typically has many more feature modules.

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.

Both components and services are simply classes, with decorators that mark their type and provide metadata that tells Angular how to use them.

The metadata for a component class associates it with a template that defines a view. A template combines ordinary HTML with Angular directives and binding markup that allow Angular to modify the HTML before rendering it for display.

The metadata for a service class provides the information Angular needs to make it available to components through dependency injection (DI).

An app’s components typically define many views, arranged hierarchically. Angular provides the Router service to help you define navigation paths among views. The router provides sophisticated in-browser navigational capabilities.

Modules

Angular NgModules differ from and complement JavaScript (ES2015) modules. An NgModule declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a closely related set of capabilities. An NgModule can associate its components with related code, such as services, to form functional units.

Every Angular app has a root module, conventionally named AppModule, which provides the bootstrap mechanism that launches the application. An app typically contains many functional modules.

Like JavaScript modules, NgModules can import functionality from other NgModules, and allow their own functionality to be exported and used by other NgModules. For example, to use the router service in your app, you import the Router NgModule.

Organizing your code into distinct functional modules helps in managing development of complex applications, and in designing for reusability. In addition, this technique lets you take advantage of lazy-loading—that is, loading modules on demand—to minimize the amount of code that needs to be loaded at startup.

Components

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.

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.

Templates, directives, and data binding

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:

Event binding lets your app respond to user input in the target environment by updating your application data.

Property binding lets you interpolate values that are computed from your application data into the HTML.

Before a view is displayed, Angular evaluates the directives and resolves the binding syntax in the template to modify the HTML elements and the DOM, according to your program data and logic. Angular supports two-way data binding, meaning that changes in the DOM, such as user choices, are also reflected in your program data.

Your templates can use pipes to improve the user experience by transforming values for display. For example, use pipes to display dates and currency values that are appropriate for a user’s locale. Angular provides predefined pipes for common transformations, and you can also define your own pipes.

Services and dependency injection

For data or logic that isn’t associated with a specific view, and that you want to share across components, you create a service class. A service class definition is immediately preceded by the @Injectable() decorator. The decorator provides the metadata that allows other providers to be injectedas dependencies into your class.

Dependency injection (DI) lets you keep your component classes lean and efficient. They don’t fetch data from the server, validate user input, or log directly to the console; they delegate such tasks to services.

Routing

The Angular Router NgModule provides a service that lets you define a navigation path among the different application states and view hierarchies in your app. It is modeled on the familiar browser navigation conventions:

Enter a URL in the address bar and the browser navigates to a corresponding page.

Click links on the page and the browser navigates to a new page.

Click the browser’s back and forward buttons and the browser navigates backward and forward through the history of pages you’ve seen.

The router maps URL-like paths to views instead of pages. When a user performs an action, such as clicking a link, that would load a new page in the browser, the router intercepts the browser’s behavior, and shows or hides view hierarchies.

If the router determines that the current application state requires particular functionality, and the module that defines it hasn’t been loaded, the router can lazy-load the module on demand.

The router interprets a link URL according to your app’s view navigation rules and data state. You can navigate to new views when the user clicks a button or selects from a drop box, or in response to some other stimulus from any source. The router logs activity in the browser’s history, so the back and forward buttons work as well.

To define navigation rules, you associate navigation paths with your components. A path uses a URL-like syntax that integrates your program data, in much the same way that template syntax integrates your views with your program data. You can then apply program logic to choose which views to show or to hide, in response to user input and your own access rules.

New Post has been published on https://is.gd/dlHxRJ

All About Template In Angular By Sagar Jaybhay

Template In Details In Angular By Sagar Jaybhay

In angular component we have 2 ways to add a template, here template means the Html code which required for component.

In AngularJS, the view is a projection of the model through the HTML template. This means that whenever the model changes, AngularJS refreshes the appropriate binding points, which updates the view.

If you see below code we use inline template property in the component class.

import Component, Input, OnInit, Output,EventEmitter from "@angular/core"; @Component( selector:'rating', template:` <span>I m in rating Component</span> <div class="container"> <button (click)="onClickStar()"> <span> <i class="isClicked==true?'fa fa-star':'fa fa-star-o'"></i> </span> </button> </div> ` ) export class Rating implements OnInit ngOnInit(): void console.log('i m in OnInit => '+this.isClicked); cssClass="fa fa-star-o"; @Input('is-Favourite') isClicked:boolean; @Output('change') click=new EventEmitter(); onClickStar() this.isClicked=!this.isClicked; var newObject= needtopass:"demo string", numb:12, boolval:false this.click.emit((newObject));

Another way is that use of templateUrl property.

import Component, Input, OnInit, Output,EventEmitter from "@angular/core"; @Component( selector:'rating', templateUrl:'./rating.component.html' ) export class Rating implements OnInit ngOnInit(): void console.log('i m in OnInit => '+this.isClicked); cssClass="fa fa-star-o"; @Input('is-Favourite') isClicked:boolean; @Output('change') click=new EventEmitter(); onClickStar() this.isClicked=!this.isClicked; var newObject= needtopass:"demo string", numb:12, boolval:false this.click.emit((newObject));

Below is external Html file present in app folder.

<h1>I am In rating</h1> <span>I m in rating Component</span> <div class="container"> <button (click)="onClickStar()"> <span> <i class="isClicked==true?'fa fa-star':'fa fa-star-o'"></i> </span> </button> </div>

Now the question comes in your mind which one is better template or templateUrl?

First if you have small component and which required hardly 3 to 4 lines of small Html you can use template property which is inline code in that file itself.

When you need a big Html code then go to external Html file which is referred by templateUrl property.

If you use external Html you will get intellisense for Html but if you use inline template property intellisense is not present.

If you use templateUrl property it will not make another call to render Html when webpack is applied it bundled everything and Html is present in main.js file in module.export. below is the image

How to apply the style to Component?

In angular component decorator we have 2 ways to apply styles.

styleUrls

styles

In these both are the arrays but you can use only one. Also if you use both the who ever is last that CSS is applied on your component Html.

So the styles which we apply here are scoped to that component only these are not applied outside of that component.

import Component, Input, OnInit, Output,EventEmitter from "@angular/core"; @Component( selector:'rating', templateUrl:'./rating.component.html', styleUrls:['./rating.component.css'], styles:[` .fa-star color: green; `] ) export class Rating implements OnInit ngOnInit(): void console.log('i m in OnInit => '+this.isClicked); cssClass="fa fa-star-o"; @Input('is-Favourite') isClicked:boolean; @Output('change') click=new EventEmitter(); onClickStar() this.isClicked=!this.isClicked; var newObject= needtopass:"demo string", numb:12, boolval:false this.click.emit((newObject));

Now the question is how angular decide to apply CSS only that Html element or scoped to that element only?

First need to understand Shadow Dom.

Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with a shadow root, underneath which can be attached to any elements you want, in the same way as the normal DOM.

For more information visit link:- https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

ViewEncapsulation in Angular:

Defines template and style encapsulation options available for Component’s Component.

enum ViewEncapsulation Emulated: 0 Native: 1 None: 2 ShadowDom: 3

It is used to encapsulate the view and in simple term shadow dom methods are applied by using simple hack by angular team. In this shadow dom is not supported by many old browsers and supported by some of safari which one is latest and chrome version 50 onwards so to compatible all angular use viewEncapsulation property. And in this Emulated is default one.

MemberDescriptionEmulated: 0Emulate Native scoping of styles by adding an attribute containing surrogate id to the Host Element and pre-processing the style rules provided via styles or styleUrls, and adding the new Host Element attribute to all selectors.This is the default option.Native: 1None: 2Don’t provide any template or style encapsulation.ShadowDom: 3Use Shadow DOM to encapsulate styles.For the DOM this means using modern Shadow DOM and creating a ShadowRoot for Component’s Host Element.

In this below image you can see angular by default generate some Id’s to identify the element and apply the CSS on that element only.

Ng-Content:

Now suppose I want to create one panel which is reusable and wants to plug different content on-demand so how I went do that in simple way. For that angular provide ng-content which is used for dynamic content placement.

In below code is our panel component class in which we push dynamic content.

If we add the tag <ng-content></ng-content> anywhere in our template HTML for our component. The inner content of the tags that define our component is then projected into this space.

Content projection is an Angular concept that helps developers build reusable components. It allows you to pass data from a parent component to a template of a child component.

import Component from '@angular/core'; @Component( selector:'custom-panel', templateUrl:'./panelDemo.component.html', styleUrls:['./panelDemo.component.css'] ) export class panelDemo

Below is the code for html of that panel

div class="panel panel-default"> <div class="panel-heading"> <ng-content select=".heading"></ng-content> </div> <div class="panel-body"> <ng-content select=".body"></ng-content> </div> </div>

In above you can see that we add <ng-content></ng-content> in 2 places in panel heading and in panel body.

But here is the catch that in single Html I m using 2 <ng-content> so I need to identify them anyhow so I use select attribute where I give .class name by using this we can identify them.

Now below is the code for app.component.html where we push dynamic content.

<custom-panel> <div class="heading"> My heading is here </div> <div class="body"> my body is here </div> </custom-panel>

Now we use to identify by class name so we use

<div class="heading">

To select <ng-content> and push the content only in that div.

If your Html page contains only <ng-content> element then no need to selector of that <ng-content>

Now the output looks like this.

Ng-Container:-

In angular you cant use more than one template binding on single element.

<!-- Can't do this --> <div *ngIf="todos" *ngFor="let todo of todos"> todo.content </div> To achive the same functionality we need to do following modification. <div *ngIf="todos"> <div *ngFor="let todo of todos"> todo.content </div> </div>

Angular This solution perfectly fine but it adds extra div element in dom. So at this place ng-container comes in a picture.

<ng-container *ngIf="todos"> <div *ngFor="let todo of todos"> todo.content </div> </ng-container>

New Post has been published on https://is.gd/QI1yUp

Building Blocks of Angular Application

Building Block Of Angular Application By Sagar Jaybhay

Component

It is heart of angular app. In our real world application we 10 to 100 components. Component can encapsulate data, Html markup and View.

The use of component is that we can reuse this in multiple places. In angular is component based architecture and it is for easy to manage large application. Every application have app-component or root-component. There are 3 step process to use component.

Create component

Register your component in module

Add selector tag in respective html

To create component follow the below process.

Create class and export it.

Import Component from angular/core

Then mark class with component decorator.

import Component from '@angular/core' @Component( selector:'course' ) export class CourseComponent

In this selector course we have <course></course> tag present in index html or respective html file.Custom UI component selection way.

Selector By Class Name

@Component( selector:'.css_class_name' )

Selector By ID

@Component( selector:'#divID' )

Template in component

It is for adding the template or html markup to your ui component or htmlpage.

@Component( selector:'#divID', template:'<h2>Courses</h2>' )

Registering Component

To register the component in module you need to add in root module which is generally app.module.ts and in that declarations array you need to add this.

@NgModule({ import BrowserModule from '@angular/platform-browser'; import NgModule from '@angular/core'; import AppRoutingModule from './app-routing.module'; import AppComponent from './app.component'; import CourseComponent from './courses.component'; @NgModule( declarations: [ AppComponent, CourseComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] ) export class AppModule

This is default module and component when we generate our application. To add custom component you need to include this declarations array.

Module

Every angular application have 1 or more module and it is a container of 1 or more related component. Every application have at least 1 module is 1 app – module. If your application is smaller then 1 module is ok but as your application grows you need to create different module with each one have separate functionality.

Service

when you want some code which is reuse again and again then write that code in service and where you use that service you need to inject that service reference in constructor.

import Component from '@angular/core' import coursesService from './courses.service'; @Component( selector:'course', template:`<h2>Courses By getTitle()</h2> <ul> <li *ngFor="let cc of courses"> cc </li> </ul> ` ) export class CourseComponent pageTitle="Sagar Jaybhay"; courses; constructor(service:coursesService) this.courses=service.getCourse(); console.log("i am in constructor"+this.courses) getTitle() return this.pageTitle;

Then this service need to register in module so in module file you need to add this service inside the providers array.

import BrowserModule from '@angular/platform-browser'; import NgModule from '@angular/core'; import AppRoutingModule from './app-routing.module'; import AppComponent from './app.component'; import CourseComponent from './courses.component'; import coursesService from './courses.service'; @NgModule( declarations: [ AppComponent, CourseComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [coursesService], bootstrap: [AppComponent] ) export class AppModule

Below is the service code

export class coursesService getCourse() return ['C#','Angular','Java'];

Injectable

when our service have some dependencies in their constructor we need to add this injectable import statement in service. It follows a singleton pattern. Means single instance is created through the application. Also before the component called service should initialized and angular itself take cares of it.

New Post has been published on https://sagarjaybhay.net/step-by-step-guide-of-angular-part-i/

Step By Step Guide Of Angular Part I

Guide To Angular Part 1- Sagar Jaybhay

What is Angular?

It is a framework for building web applications which contain HTML, TypeScript, CSS, Javascript.

Typescript is compiled into JavaScript finally at the time of running your application.

Why we need angular?

It might you think you can use plain JavaScript, jquery to build a web application.

Yes, you can create a web application using these 2 but when your application grows it is very hard to maintain all that.

So for creating an application, we need first structure by that way in future we don’t have any problem.

If you use JavaScript there are pattern present like Revealing Module pattern, Prototype pattern but they are hard to understand and hard to test also.

To avoid these problems lots of frameworks are evolved and build like vue.js, react.js and angular.js like that.

Benefits of Using Angular

Clean structure of the application

Re-usability of code is achieved

The application becomes more testable.

The architecture of Modern application

Most of the recent application has 2 layer front end and back-end. In this Front-End contains HTML page, CSS, JavaScript or typescript files.

And back-end mostly interacts with the help of web-API, because the back-end is sat on the web-server on the cloud which is responsible for store data and process that data.

Front-end is responsible for taking the data from the client. So angular is not used to store the data, because of the angular run on the client machine and for security reasons we don’t t store data on clients machine or might be the case user will change his/her computer or might use a different browser.

The API which uses for transfer data from the client to web-server or back-end uses HTTP protocol to access this endpoint.

Node: It is a run-time environment for JavaScript code to run outside the browser.

The minimum version required for building the angular application is 6.9. We use the Node package manager (npm) to install the libraries.

To install Angular CLI globally use below command

npm install -g @angular/cli

New Post has been published on https://sagarjaybhay.net/container-nested-component-input-output-properties-interfaces-in-angular/

Container Nested Component Input Output Properties Interfaces in Angular

All about Container,Component and Interface in AngularJS by Sagar Jaybhay

Input properties:

They are used to get value from parent component and used by decorating our properties by Input() decorator for that we need to import Input from the angular core. By using Input property we are able to pass data from container to nested component.

Output Properties

By using output properties we can able to pass user actions or user-entered values or selections from child component to parent component. The output is present in the angular core and we required event emitter for this which is also called payload event and also it will send the type of event data of particular type.

Output and EventEmitter are present in the angular core.

For this, you to create output property and event for emitter in the child component. Then create method and property in the parent element and assign this child event name in parent selector with the parent selector method.

In Angular 2 structural directive is not applicable in the single element it throws an error like can’t have multiple template binding on a single element. We have to use custom event emitter in the selector of parent and assign function in parent to that custom event emitter in the child.

When we use 2 structural directives on the single element it throws an error so overcome this we use ng-container directive.

Interface In Angular

To create a custom type also interface defines the contract the class who implement that interface he needs to implement the method in that interface. If you don’t use strongly typed variable then you got intellisence but if you don’t like our employee field which is having any data type so you never got intellisence for that. So chances of typographical error might be increases.

Interface in TypeScript

null

The interface is a keyword to create an interface.

It is common that interface should start with I letter but in angular, it’s not the case OnInt interface.

Interface members are public by default and don’t require access modifier. If you add you will get a compile-time error. And the error is ‘public’ modifier cannot appear on a type member.

New Post has been published on https://sagarjaybhay.net/event-ngfor-trackby-index-and-pipes-in-angular/

$event, ngFor, trackBy, index and Pipes in Angular

Directives in Angular By Sagar Jaybhay

$event :

Is an object which is exposed by angular which contains event data.

In angular 2 way data binding means property binding and data binding.

<input [(ngModel)]="textName" />

[] this Square brackets on outside for property binding.

() this parenthesis on the inside for event binding.

If we are not importing forms module in angular forms then it will throw an error which is not known property of HTML element.

import FormsModule from '@angular/forms';

ngFor:

This is structural directive.

*ngFor="let emp of employees"

trackBy

This is used with ng-for directive because if you have data bind on some button event and that data is not changed again and but angular doesn’t know about to that so he will create that element again and again. So used trackBy with for loop.

<tr *ngFor="let emp of employees; track: trackByEmpCode">

trackByEmpCode(index: number, employee: any): string console.log(index); console.log(employee); return employee.code;

To get an index over the collection used below syntax.

<tr *ngFor="let emp of employees; trackBy: trackByEmpCode; let i = index">

How to get first and last element?

*ngFor=" let emp of employees; trackBy: trackByEmpCode; let i = index; let isFirst = first; let isLast = last ">

How to find even and Odd element:

*ngFor=" let emp of employees; trackBy: trackByEmpCode; let i = index; let isFirst = first; let isLast = last; let isOdd = odd; let isEven = even "

Pipes In Angular: –

Pipe helps to transform data before display on UI. Like. Uppercase, date, currency, lowercase, decimal  are different in built pipe. To apply pipe you can use | (pipe) character

<td> uppercase </td> <td> emp.geneder </td> <td> currency: '$' </td>

For formatting, you should refer to angular documentation.

To create a custom pipe- Create a class with pipe and implement PipeTransform interface and it is present in.

import PipeTransform from '@angular/core';

Then implement the method for that interface.

transform(value: string, gender: string) if (gender.toLowerCase() === 'male') return 'Mr. ' + value; else return 'Mrs. ' + value;

Which is a transform method? Value parameter it gets explicitly but if you want to pass another value then you need to pass that for this method. In angular 2 only pipe is imported present from the angular core but the next versions required to import Pipe and PipeTransform. After this, you need to register your pipe in app.module and add into declaration array of that module. Also, remember you have to the given name of pipe in interpolation syntax not the class name of that pipe.

<td> employeeTitle: emp.geneder </td>

New Post has been published on https://sagarjaybhay.net/what-is-the-difference-between-html-attribute-and-dom-property-in-angular/

What is the difference between HTML attribute and DOM property in Angular?

Diff between html attribute and DOM by Sagar Jaybhay

Attributes are defined by Html, whereas properties are defined by the DOM. Attribute initialize DOM properties, once the initialization complete the attribute job is done. Property value can change, whereas attribute value can’t.

Angular recommends property binding instead of attribute binding. Attribute binding only used when you don’t have a corresponding property for that attribute.

If you want to bind a value to attribute by angular use below syntax attr.propertyName

What is Attribute Binding?

Interpolation and Property binding deal with binding component class properties to HTML element properties and NOT attributes.

But not all HTML element attributes have corresponding properties. For ex, colspan attribute does not have a corresponding property.

In situations like this, we want to be able to bind to HTML element attributes.

Hence angular provides attributes binding.

Css Class Binding:

<button class="redClass" [class]="buttonCssClass">Hello Brother</button>

When we use attribute binding it remove existing css class binding.

Style Binding:

Event Binding:

<button class="redClass" [style.font-size.px]="ftSize" (click)="clickBtn()" [ngClass]="addclassess()">ngClass</button>

Canonical Form

<button class="redClass" [style.font-size.px]="ftSize" on-click="clickBtn1()">canical form</button>

Data Binding:

New Post has been published on https://sagarjaybhay.net/interpolation-in-angular/

Interpolation In Angular

Interpolation In Angular – By Sagar Jaybhay

It is called as data binding and in angular, we have 3 categories of data binding.

One Way data binding: it is from component to view template

One way data binding: it is from view template to component

Two-way data binding: it is from component to view and vice versa.

One Way Data Binding:

In interpolation you can use mathematical operation, validation, condition checking. By using interpolation you can bind class properties to element properties. Interpolation is all about moving class data to html template in one direction means component class properties to html element properties.

<img style="height: 200px; width: 200px" src=" imagePath " />

Property Binding:

Property Binding and Interpolation flow data from one direction.

<img style="height: 200px; width: 200px" [src]="imagePath" />

Interpolation v/s Property binding

Interpolation is special syntax that angular converts into a property binding.

In concatenation of string we can use interpolation instead of property binding

To set an element property to a non-string data value, you must use property binding

You can use canonical variation means for binding to property of html element rather than using [] braces use bind-property-name.

<span bind-innerHtml="_first"></span>

For security reason angular data-binding automatically sanitizes malicious content before displaying it on browser.

DOM: Angular all about binding to dom object properties and not html attribute