Categories
Reactjs

React render props

Render prop” we can share code between React components using a prop whose value is a function.

<Mycomponent render={(isAdmin)=> isAdmin ? 'login' : 'logout'}/>
{this.props.render}

Categories
Reactjs

Differences between redux, react-redux, redux-thunk?

redux: main library (independent from React)
redux-thunk: a redux middleware that helps you with async actions
react-redux: connects your redux store with ReactComponents

react-redux – bindings between redux and react. The library offers a set of react hooks – useSelector(), and useStore() to get the data from the store, and useDispatch() to dispatch actions. You can also use the connect() function to create HoCs (higher-order components), that listen to the store’s state changes, prepare the props for the wrapped component, and re-render the wrapped components when the state changes.

redux-thunk – middleware that allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action or to dispatch only if a certain condition is met. Used mainly for async calls to API, that dispatch another action on success/failure.

Categories
Angular

Angular Change Detection

Change Detection means updating the DOM whenever data is changed. Angular provides two strategies for Change Detection.

Change Detection: The process of updating the view (DOM) when the data has changed

Categories
Javascript

Event loop in javascript?

What is event loop in JavaScript
The event loop is the secret behind JavaScript’s asynchronous programming.

The call stack is responsible for keeping track of all the operations in line to be executed. Whenever a function is finished, it is popped from the stack.

Event loop => Call Stack => webApi => Event Queue
webApi delay sum()

Categories
Angular

Angular ng-template, ng-container , ngTemplateOutlet

1- <ng-template> is a template element that Angular uses with structural directives like *ngIf, *ngFor, [ngSwitch] and custom directives
Note: the ng-template directive represents an Angular template

2- <ng-container> We can avoid having to create that extra div, we can instead use ng-container directive

<ng-container *ngFor="let item of items">
   <p *ngIf="item.id">{{item.name}}</p>
</ng-container>

3- *ngTemplateOutlet
We can used as a container to templates that can be reused at multiple places.

Categories
Javascript

javascript: Export and Import

coming soon

Categories
Javascript

Prototype methods, objects without proto

The __proto__ is considered outdated and somewhat deprecated (in browser-only part of the JavaScript standard).
The modern methods are:

Object.create(proto, descriptors) – creates an empty object
Object.getPrototypeOf(obj) – returns the Prototype of obj.
Object.setPrototypeOf(obj, proto) – sets the Prototype of obj to proto.

let animal = {
  eats: true
};

// create a new object with animal as a prototype
let rabbit = Object.create(animal);

alert(rabbit.eats); // true

alert(Object.getPrototypeOf(rabbit) === animal); // true

Object.setPrototypeOf(rabbit, {}); // change the prototype of rabbit to {}
function Rabbit(name) {
  this.name = name;
}
Rabbit.prototype.sayHi = function() {
  alert(this.name);
};

let rabbit = new Rabbit("Rabbit")

rabbit.sayHi(); // "Rabbit"
Rabbit.prototype.sayHi(); //undefined
Object.getPrototypeOf(rabbit).sayHi(); //undefined
rabbit.__proto__.sayHi(); //undefined

Categories
Javascript

Javascript prototype

In JavaScript, objects have a special hidden property Prototype , that is either null or references another object. That object is called “a prototype”:
The property Prototype is internal and hidden, but there are many ways to set it.

let animal = {
  eats: true
};
let cat= {
  jumps: true
};

cat.__proto__ = animal;  // Here sets animal to be a prototype of cat
alert( cat.eats ); // true (**)
alert( cat.jumps ); // true
let animal = {
  eats: true,
  walk() {
    alert("Animal walk");
  }
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

// walk is taken from the prototype
rabbit.walk(); // Animal walk

……………………………………………………………………………………………………………

The prototype chain

let animal = {
  eats: true,
  walk() {
    alert("Animal walk");
  }
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

let longEar = {
  earLength: 10,
  __proto__: rabbit
};

// walk is taken from the prototype chain
longEar.walk(); // Animal walk
alert(longEar.jumps); // true (from rabbit)
let animal = {
  jumps: null
};
let rabbit = {
  __proto__: animal,
  jumps: true
};

alert( rabbit.jumps ); // ? (1)

delete rabbit.jumps;

alert( rabbit.jumps ); // ? (2)

delete animal.jumps;

alert( rabbit.jumps ); // ? (3)

Categories
Angular

Angular Routing: router outlet

<router-outlet></router-outlet>
Where we want to output to display for a route, we can configure using router outlet
by default, angular has one router outlet in app.html

Route Information’s
1-Routing Strategy
2-Base href
3-Router module
4-Router outlet
5-Configuring Router
6-Parameterized Routes
7-Router link
8-Redirecting Routes
9-Wildcard Routes
10-Query params in Routes
11-Child Routes
12-Route Guards

Categories
Angular Uncategorized

Angular ChangeDetectorRef

import { JsonPipe } from '@angular/common';
import { Component, VERSION, ViewChild, AfterViewInit , AfterViewChecked, AfterContentChecked, SimpleChanges ,OnChanges, ElementRef  } from '@angular/core';
import { ChildComponent } from './child/child.component';
import { ChangeDetectorRef } from '@angular/core';
@Component({  
   selector: 'my-app',  templateUrl: './app.component.html',  
   styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit, AfterViewChecked {  
constructor(private cdRef:ChangeDetectorRef) {}  
@ViewChild(ChildComponent) hello:ChildComponent;  
@ViewChild('title') title: ElementRef;  
aname = 'Ajay' 
 name = 'Angular ' + VERSION.major; 
 xx:any;  
ngAfterViewInit() {   
   this.aname = this.hello.name  
}  
ngAfterViewChecked(){    
   this.aname = this.hello.name   
   //console.log(this.title.nativeElement.innerText)    
   this.cdRef.detectChanges();  
} 
ngAfterContentInit(){    
   console.log("after content init");   
   // this.aname = this.hello && this.hello.name  
}  
ngOnChanges(changes: SimpleChanges) {    
   console.log(changes)       
   this.xx = changes 
 }
}
import { JsonPipe } from '@angular/common';
import { Component, VERSION, ViewChild, AfterViewInit , AfterViewChecked, AfterContentChecked, SimpleChanges ,OnChanges, ElementRef  } from '@angular/core';
import { ChildComponent } from './child/child.component';
import { ChangeDetectorRef } from '@angular/core';
@Component({  
   selector: 'my-app',  templateUrl: './app.component.html',  
   styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit, AfterViewChecked {  
constructor(private cdRef:ChangeDetectorRef) {}  
@ViewChild(ChildComponent) hello:ChildComponent;  
@ViewChild('title') title: ElementRef;  
aname = 'Ajay' 
 name = 'Angular ' + VERSION.major; 
 xx:any;  
ngAfterViewInit() {   
   this.aname = this.hello.name  
}  
ngAfterViewChecked(){    
   this.aname = this.hello.name   
   //console.log(this.title.nativeElement.innerText)    
   this.cdRef.detectChanges();  
} 
ngAfterContentInit(){    
   console.log("after content init");   
   // this.aname = this.hello && this.hello.name  
}  
ngOnChanges(changes: SimpleChanges) {    
   console.log(changes)       
   this.xx = changes 
 }
}