Adsense
Angular project folder structure
“Change Detection”?
Change Detection means updating the view (DOM) when the data has changed.
Change Detection is done in two steps
Angular provides you two Change Detection Strategies, the default one and the onPush.
In order to understand the difference between a Subject and an Observable, you need to be aware of two distinct concepts
– A data producer
– A data consumer
Change Detection means updating the view (DOM) when the data has changed.
Change Detection is done in two steps
- Update the application model (developer);
- Reflect the state of the model in the view (Angular).
If we take a todo application, represented by the graphic above. We have a fairly simple application that has a
TodosComponent
managing a list of TodoComponent
. If we modify this list, by changing the value of the first item of the todos’ list (in yellow), we will have the following flow:- The developer is making changes to the model (like a component’s bindings);
- Angular’s change detection kicks in to propagate the changes;
- Change detection goes through every components in the component tree (from top to bottom) to check if the model it depends on changed;
- If Yes, it will update the component;
- Angular updates the component’s view (DOM).
The way Angular runs the change detection by starting from the top and continuing until it reaches the bottom, makes the system more predictable and more performant.
Angular Change Detection Strategies
ChangeDetectionStrategy.Default
By default, Angular has to be conservative and will checks every time something may have changed, this is called dirty checking.
ChangeDetectionStrategy.onPush
With onPush, Angular will only depend on the component’s inputs, events, markForCheck method, or the use of the async pipe in the template, to perform a change detection mechanism and update the view.
In order to understand the difference between a Subject and an Observable, you need to be aware of two distinct concepts
– A data producer
– A data consumer
Angular switch map and merge map
Rx js debounce and total
diff between observable and subject
weekset and set
Angular change detection
array fill
Javascript datatype
Understanding objects - Data Property Attribute
configurable - for delete
Understanding objects - DefineProperty
Array Iteration method : Filter
Understanding Objects
Understanding Objects - Accessor Property
Understanding Objects - Accessor Property definedproperty Get and Set
Creating objects
Arrays Introduction
Arrays Introduction - conversion method (toString())
Array Stack Data structure methods
Array Queue Data structure methods
Array Reordering methods : sort and callback to compare function
Array manipulation methods - Array copy using concat
Array manipulation methods - using Slice and splice
Array Iteration methods : map and foeach
Array Iteration methods: Filter
Array Iteration methods: every and some
Array reduction methods : reduce
Array reduction methods : reduce - nested array to flat array - find unique char
Date and RegEx Objects
Prototype Inheritance
HTTP Methods
Singleton
Call, Bind, Apply
Promise in Javascript
Custom mybind
Finding an Object's Size in JavaScript
Array Flat and Array Fill
Closure:
protected, encapsulated
access inner function thorough outer function
access inner function thorough outer function
3 Ways to Clone Objects in JavaScript
Remove Array Duplicates in ES6
Javascript: Using reduce() to find min and max values?
const ArrayList = [1, 2, 3, 4, 3, 20, 0];
const LargestNum = ArrayList.reduce((prev, curr) => {
return Math.max(prev, curr)
});
const MinNum = ArrayList.reduce((prev,curr)=>{
return Math.min(pre,curr)
});
console.log(LargestNum);
console.log(MinNum);
Count number of occurrences for each char in a string
// The string
var str = "I want to count the number of occurances of each char in this string";
// A map (in JavaScript, an object) for the character=>count mappings
var counts = {};
// Misc vars
var ch, index, len, count;
// Loop through the string...
for (index = 0, len = str.length; index < len; ++index) {
// Get this character
ch = str.charAt(index); // Not all engines support [] on strings
// Get the count for it, if we have one; we'll get `undefined` if we
// don't know this character yet
count = counts[ch];
// If we have one, store that count plus one; if not, store one
// We can rely on `count` being falsey if we haven't seen it before,
// because we never store falsey numbers in the `counts` object.
counts[ch] = count ? count + 1 : 1;
}
Shorter answer, with reduce:
let s = 'hello';
[...s].reduce((a, e) => { a[e] = a[e] ? a[e] + 1 : 1; return a }, {});
// {h: 1, e: 1, l: 2, o: 1}
Factory vs Abstract factory design pattern
var mybind = function( fn, b ) {
return fn.bind(this, b);
};
var concat = function(a, b) { return a + " " + b;}
var good = mybind(concat, "good");
console.log(good("night"));
Subscribe to:
Posts (Atom)