js object property descriptor

javascript properties has descriptors called property descriptors. You can access property descriptors like this

  
 var person ={
  name: {lastName:'xyz', firstName:'abc'},
  age: 15
 }
 console.log(Object.getOwnPropertyDescriptor(person,'name'));

This should return

  
 {
  value: object, //this could be value for primitives type property
  writable: true, 
  enumerable: true, 
  configurable: true
 }

You can update these descriptors by using Object.defineProperty

   
 Object.defineProperty(person,'age',{value:5});

Updating writable property descriptor to false will make this property read only

   
 Object.defineProperty(person,'age',{writable:false});

After doing this you won't be able to update property value

  
 person.age = 11; // This will throw error as it cannot assign to read only age property

In the following case we are making name property to be read only, but you can still update any of the property of name object as you not changing name property reference

  
 Object.defineProperty(person,'name',{writable:false});
 person.name.lastName = 'xyza'

If you want to prevent this to happen you can use

  
 Object.freeze(person.name);

After this you wont be able to update lastName

  
 person.name.lastName = 'xyzab' // This will throw error as it cannot assign to read only age property

Updating configurable to false will prevent from redefining the property. You will not be able to change enumerable/configurable property descriptor. You will also not be able to delete the property.

  
 Object.defineProperty(person,'age',{configurable:false}); 

Following will throw error

  
 Object.defineProperty(person,'name',{enumerable:false}); //cannot redefine property age
 Object.defineProperty(person,'name',{configurable:false}); //cannot redefine property age
 delete person.age //cannot delete property age

You will still be able to change writable descriptor

  
 Object.defineProperty(person,'age',{writable:false}); 

Updating enumerable to false will prevent this property to be enumerated

    
 Object.defineProperty(person,'age',{enumerable:false}); 

After executing above line you wont be able to see age property in any of the below code

   
 for (var propertyName in person){
    console.log(propertyName + ": " + person[propertyName])
 }
 console.log(Object.keys(person))

  console.log(JSON.stringify(person))  

javascript prototype

A function's prototype is the object instance that will become prototype for all objects created using this function as a constructor. For example when you define following function a prototype property is created on Foo, which you should be able to access Foo.prototype and it will be initialized object (like {}) with no property.

 
 function Foo(){
   console.log("js will create prototype property on Foo which will be initialized as empty object {} ");
 }

You can add property to the prototype object of Foo Foo.prototype.myFirstName = "Sam" Now when you create object using constructor function then constructor function prototype will become object prototype

 
 var foo = new Foo();
 var bar = new Foo();
 Foo.prototype.myLastName = "Adam"

So following should return true

 
 console.log(bar.__proto__=== Foo.prototype);
 console.log(foo.__proto__=== Foo.prototype);

You can add more properties to Foo prototype

 
 Foo.prototype.age = 5

Now lets say you update functions prototype like this. Here you changing pointer of Foo.prototype where as in the above case pointer was same, you just added new property to that object.

 
 Foo.prototype = {myName: "Tom"}

Doing so will change return value of following to false as bar and foo prototype is still pointing to prototype object which was there on Foo when foo and bar was created.

 
 console.log(bar.__proto__=== Foo.prototype);
 console.log(foo.__proto__=== Foo.prototype);

So now when you create new Foo object this will get new prototype

 
 var baz = new Foo();
 console.log(baz.__proto__=== Foo.prototype);

There is a chain of prototype. Following will return true

 
 console.log(bar.__proto__.__proto__=== Object.prototype);
 console.log(bar.__proto__.__proto__.__proto__=== null);

When you try to access foo.myFirstName, javascript looks first if myFirstName is property of foo or not, if not then it looks in the prototypal chain and return it. So in the above case foo.hasOwnProperty('age') will return false where as foo.__proto__.hasOwnProperty('age') will return true. Also you can check by looking at all the keys Object.keys(foo

). When you create an object with new keyword following happens

  
 function Foo(name){
  var someInteger = 1;
  this.name = name;
  return 5;
 }
 var foo = new Foo('John');

A function without a return statement will return a default value. In the case of a constructor called with the new keyword, the default value is the value of its "this" parameter. For all other functions, the default return value is undefined. So in the above case foo will be assigned like this

 
  Foo {
   name: 'john'
  }

foo object will not see someInteger and its return value Function prototype (Foo.prototype) object is passed to the __proto__ property of the object so this will return true

 
  console.log(foo.__proto__=== Foo.prototype); //will return true

When you create an object by Object.create() only prototype is set

 
 var foo = Object.create(Foo.prototype);
 console.log(foo.__proto__=== Foo.prototype); //will return true
 console.log(typeof foo.name1 === 'undefined'); //will return true
 console.log((foo.name1 === undefined ); //will return true

When you create an object by object literal {} then Object prototype is set prototype of the object

  
 var foo = {firstName: 'John', lastName: 'singh'};
 console.log(foo.__proto__ ===Object.prototype); //will return true

Angular - Observables

Observables is an ES7 feature which means you need to make use of an external library to use it today. RxJS is a good one. This is not angular 2 specific feature, though angular cli does add this to the dependencies. Observables gives you all the features of promises and more. A Promise handles a single event when an async operation completes or fails, whereas Observable is like a Stream and allows to pass zero or more events where the callback is called for each event. For example FormControl valueChanges returns Observable, so I can write a code like this which will write to console every time value is changed.

   
   let sub =  this.name.valueChanges.pipe(debounceTime(1000))subscribe(
      (newValue: string) => {
       console.log(newValue);
       if (newValue.length === 5) {
        sub.unsubscribe();
       }
      });

In the following example we are making an http call and I am expecting number, then I apply pipe, which gives me option to transform data before passing to the subscriber. This will be helpful if I would like to transform data before sending to subscriber or may be convert error to standard format. Keep in mind observable are deferred execution, so unless it has a subscriber it (along with operators in pipes) will not be executed

   import { Observable, BehaviorSubject, throwError, combineLatest, forkJoin } from 'rxjs';
   import { retry, catchError, tap, map, filter, finalize,  delay,debounceTime } from 'rxjs/operators';
   import { HttpClient } from '@angular/common/http'; 

   this.http.get(url).pipe(
        retry(3),
        map(obj=>{return obj *2;}),
        tap(obj => {console.log(obj)}),
        catchError((err)=>{return throwError(err);})
      ).subscribe(
        (value)=>{console.log(value)},
        (err)=>{console.log(err)},
        ()=>{console.log('done')}
      );

combineLatest
once all input observables have produced at least one value it returns Observable and after that it returns Observable everytime it produces a new value.
forkJoin
It require all the observables to be completed and then returns single value that is an array of the last values produced by the input observables

Observable also has the advantage over Promise to be cancelable. One of the example will be for type ahead, if user has changed the text which will result in new http call, we can cancel subscription to the previous one. In case of promise, the callback call will happen either in success or failure scenario. Promises doesn't have option of Lazy loading where as observable will not be executed until someone subscribe to it. You also have option on retry and retryWhen in observable.

If you subscribe to an observable or event in JavaScript, you should unsubscribe at a certain point to release memory in the system, otherwise it will lead to memory leak. Here are few of the case where you should explicitly unsubscribe
1. Form value change as shown in the example above
2. Router to be on safe side, though angular claim to clean it up.
3. Infinite observable
 Observable.interval(1000).subscribe(console.log(''))
 Observable.fromEvent(this.element.nativeElement, 'click').subscribe(console.log('hi'));

For the following case you don't need to unsubscribe
1. aysnc pipe - When the component gets destroyed, the async pipe unsubscribes automatically.
2. Finite Observable - When you have a finite sequence, usually you don’t need to unsubscribe, for example when using the HTTP service or the timer observable

Angular 2 - Forms & Validation

Template Based form 

For this you need to import FormsModule. As soon as you import FormsModule, ngForm directive becomes active on all <form> tags. You can export it into a local template variable (#myForm="ngForm"). This will give access to aggregate form value (myForm.value), child controls (myForm.controls['control's name attribute']) and validity status (myForm.controls['formElement'].valid or myForm.valid) as well as user interaction properties like dirty (myForm.controls['formElement'].dirty), touched(myForm.controls['formElement'].touched) etc.

Angular provides ngSubmit ((ngSubmit)="saveMe(myForm.value)") directive which prevents form to be submitted to server

For binding you can use ngModel. If you need two way binding then use [()]. () Html to component direction, [] component to html

[(ngModel)]="somePropertyDefinedInComponent" ngModel require name attribute

In theory you should be able to use input event and then assign any of the component's property to the value of the input element. Most likely you will not do this as angular provides shot cut methods as described earlier.

(input)="somePropertyDefinedInComponent=$event.target.value"

ngModelGroup - If you want to group certain properties nested within property then you use ngModelGroup="property under which all elements will be nested"

Model based form or reactive form

In template based approach all the logic resides in html, so complex scenarios (like cross field validation etc.) may not be easy to achieve and also you cannot unit test your code. So for this case you can use reactive form for which you need to import ReactiveFormsModule. In your component you create FormGroup and add all form controls to it

   myFormGroup = new FormGroup({

      name: new FormControl('', [Validators.required, Validators.pattern('[a-zA-Z].*')]),
      address: new FormArray([
        new FormGroup({
          city: new FormControl(),
          state: new FormControl(),
        })
      ]),
      cityVisited: new FormArray([
        new FormControl()
      ])
    })

In the template, bind form formGroup attribute to the FormGroup object created in the component and input elements you need to bind it the FormControl property of component

     <form [formGroup]="myFormGroup" 

     formControlName="name" or [formControl]="myFormGroup.controls.name"

     <div *ngFor="let item of myFormGroup.controls.address.controls; let i=index">

         <input  [formControl]="item.controls.state" />

     </div>

     <div *ngFor="let item of myFormGroup.controls.cityVisited.controls; let i=index">

         <input  [formControl]="item" />

     </div>

FormGroup tracks the value and validity state of a group of FormControl instances.

Custom Validation
Create a function which takes FormControl as a parameter and returns object (property usually with the validator name and value as any value which you may want to show). If the function returns null then its valid otherwise its invalid. You can also create directive  and implements Validator. You can call updateValueAndValidity() on specific controller to trigger its validation.

Angular 2 Directive

Directive change appearance or behavior of the element. Component is an element and directive is attribute. It is defined similar as component, in place of @Component you use @Directive. Also notice selector is wrapped with [] which indicates its an attribute.

@Directive({
selector: "[my-directive]",
})

Within directive you can get reference of the element like this

private el: HTMLElement;
        @Input("modal-trigger") modalId: string; //you need to wrap modal-trigger in "" as it has - which is not allowed in variable name

        constructor(ref: ElementRef) {
               this.el = ref.nativeElement;
        }

Now finally you can add this directive to any of the element
<some-element my-directive="some-data-to-be-passed">

Angular 2 Routes

Setting up routing requires that we define a base path, import the Angular router, configure the routes to define which route path activates which component, identify where to place the activated component's template, and activate routes to navigate based on user actions

 

The RouterModule provides router service to manage navigation and URL manipulation, configuration for configuring routes, and directives for activating and displaying routes. Router service deals with the globally shared resource, the URL location, there can only be one active router service. To ensure that there is always only one active router service, even when importing RouterModule multiple times, RouterModule provides two methods- forRoot and forChild. RouterModule.forRoot declares the router directives, manages our route configuration, and registers the router service. We use it only once in an application and for feature route use forChild.

 

Order In which Route Path is Evaluated

The router will pick the first route with a path that matches the URL segments. It merges the application routes explicitly defined in the application module with the routes from the all feature imported module. The routes which are explicitly configured in a module are processed last after any imported modules.

 

AppModule
 imports: [
  ...
  RouterModule.forRoot([
   { path: '', redirectTo: '/home', pathMatch: 'full' },
   { path: 'home', component: HomepageComponent },
   { path: '**', component: PageNotFoundComponent }
  ]),
  UseraccountModule,

..
 ]

 

UseraccountModule
 imports: [
  CommonModule,
  RouterModule.forChild([
   { path: 'signin', component: SigninComponent },
   { path: 'signup', component: SignupComponent }
  ]),
  ...
 ],

In the above case route is evaluated like following, notice it will first evaluate routes from imported UseraccountModule and then route from AppModule.

 { path: 'signin', component: SigninComponent },
 { path: 'signup', component: SignupComponent }
 { path: '', redirectTo: '/home', pathMatch: 'full' },
 { path: 'home', component: HomepageComponent },
 { path: '**', component: PageNotFoundComponent }

 

Directives

Router outlet Directive - Directive from the router library that is used like a component. It acts as a placeholder that marks the spot in the template where the router should display the components for that outlet.

RouterLink - Directive to navigate between routes. This will not load the entire page rather route defined within router outlet directive. This is different than href as href will load entire page and will make server call. Within the component you can use Router service to navigate between routes.

RouterLinkActive - Directive let you add CSS class to an element when the links route become active.

Angular2 Service Dependency Injection

A provider provides the concrete, runtime version of a dependency value.

{ provide: Logger, useClass: Logger} is same as Logger. This tells the injector to return instance of Logger when someone ask for Logger

{ provide: Logger, useClass: BetterLogger} - This tells the injector to return instance of BetterLogger when someone ask for Logger

Now you can inject logger by using a Logger type which is dependency injection token. In the following example an instance of Logger (or BetterLogger) will be injected via private property logger. Within the class you should get proper intellisense and type safety based on type Logger

constructor(private logger: Logger){}

Its better to always use decorator @Injectable() to a service class, even though its only mandatory if your service has dependency (inject other service as dependency of its own) on some other service. Decorators simply add meta to our code when transpiled.

MyService = __decorate([

        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Injectable"])(),

        __metadata("design:paramtypes", [_angular_common_http__WEBPACK_IMPORTED_MODULE_2__["HttpClient"]])

    ], MyService );

Here The paramtypes metadata is the one that is needed by Angular’s DI to figure out, for what type it has to return an instance.

TypeScript generates metadata when the emitDecoratorMetadata option is set and decorator is attached to the class, method etc

OpaqueToken

These are used to create non class dependency. For example for jQuery or any other third party library which do not have typescript class you can define OpaqueToken

import {OpaqueToken} from "@angular/core";

export let JQ_TOKEN = new OpaqueToken("my app jquery");

Similarly for DI on interface you can define OpaqueToken

export interface AppConfig {

 apiEndpoint: string;

 title: string;

}

export const HERO_DI_CONFIG: AppConfig = {

 apiEndpoint: 'api.heroes.com',

 title: 'Dependency Injection'

};

import { OpaqueToken } from '@angular/core';

export let APP_CONFIG = new OpaqueToken('my app config');

Now in the providers you can use it like this

{ provide: JQ_TOKEN, useValue: myAppjQuery }

Here you need to have myAppjQuery defined (let myAppjQuery: Object = window["$"];). Where ever you use JQ_TOKEN you will get handle of myAppjQuery, which at runtime will initialize as window["$"], so as long as jQuery is loaded in the rootwindow, you should be able to user it.

{ provide: APP_CONFIG, useValue: HERO_DI_CONFIG }

The above example is for interface which is not typescript class, so we defined Opaque token for that. Where ever this token will be used it will refer to value HERO_DI_CONFIG.

Now in your application, you should be able to inject this like this

constructor(@Inject(JQ_TOKEN) private $: any){}

constructor(@Inject(APP_CONFIG) config: AppConfig) {}