Angular Scroll to top on every Route click

Source: https://stackoverflow.com/questions/48048299/angular-5-scroll-to-top-on-every-route-click/48048822

A router outlet will emit an activate event any time a new component is being instantiated, so (activate) event could be to scroll (for example) to the top:

app.component.html

<router-outlet (activate)="onActivate($event)" ></router-outlet>

app.component.ts

onActivate(event) {
    window.scroll(0,0);
    //or document.body.scrollTop = 0;
    //or document.querySelector('body').scrollTo(0,0)
    ...
}

or using this answer to smooth scroll

    onActivate(event) {
        let scrollToTop = window.setInterval(() => {
            let pos = window.pageYOffset;
            if (pos > 0) {
                window.scrollTo(0, pos - 20); // how far to scroll on each step
            } else {
                window.clearInterval(scrollToTop);
            }
        }, 16);
    }

---

If you wish to be selective, say not every component should trigger the scrolling, you can check it:

onActivate(e) {
    if (e.constructor.name)==="login"{ // for example
            window.scroll(0,0);
    }
}

---

Since Angular6.1, we can also use { scrollPositionRestoration: 'enabled' } on eagerly loaded modules or just in app.module and it will be applied to all routes:

RouterModule.forRoot(appRoutes, { scrollPositionRestoration: 'enabled' })

It will also do the smooth scrolling

javasript if value

Source: https://stackoverflow.com/questions/5515310/is-there-a-standard-function-to-check-for-null-undefined-or-blank-variables-in

You can just check if the variable has a truthy value or not. That means

if( value ) {
}

will evaluate to true if value is not:

• null
• undefined
• NaN
• empty string ("")
• 0
• false

The above list represents all possible falsy values in ECMA-/Javascript. Find it in the specificationat the ToBoolean section.

Furthermore, if you do not know whether a variable exists (that means, if it was declared) you should check with the typeof operator. For instance

if( typeof foo !== 'undefined' ) {
    // foo could get resolved and it's defined
}

If you can be sure that a variable is declared at least, you should directly check if it has a truthyvalue like shown above.

Further read: http://typeofnan.blogspot.com/2011/01/typeof-is-fast.html

From an array of objects, extract value of a property as array

Source: https://stackoverflow.com/questions/19590865/from-an-array-of-objects-extract-value-of-a-property-as-array

Here is a shorter way of achieving it:

let result = objArray.map(a => a.foo);

or

let result = objArray.map(({ foo }) => foo)

Deep copy array

Source: https://medium.com/@gamshan001/javascript-deep-copy-for-array-and-object-97e3d4bc401a

JSON.parse and JSON.stringify is the best and simple way to Deep copy

The JSON.stringify() method converts a JavaScript value to a JSON string.The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string.

// Deep Copy
let a = { x:{z:1} , y: 2};
let b = JSON.parse(JSON.stringify(a));
b.
x.z=0

console.log(JSON.stringify(a)); // {"x":{"z":1},"y":2}console.log(JSON.stringify(b)); // {"x":{"z":0},"y":2}

This is also solution for deep copy objects inside array.

//Deep Clonelet a = [{ x:{z:1} , y: 2}];
let b = JSON.parse(JSON.stringify(a));
b[0].
x.z=0console.log(JSON.stringify(a)); //[{"x":{"z":1},"y":2}]console.log(JSON.stringify(b)); // [{"x":{"z":0},"y":2}]

That’s it. Hope you all get clear understanding of JavaScript Deep copy for array and object. See you :)

Angular material Could not find Angular Material core theme

Source: https://stackoverflow.com/questions/44230852/angular-material-could-not-find-angular-material-core-theme

Please insert below code into your style.css which is located in your src folder.

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

You can select any css under the prebuilt-themes folder.

What's the difference between a tilde (~) and a caret (^) in a npm package.json file?

Source:https://michaelsoolee.com/npm-package-tilde-caret/


So if you see ~1.0.2 it means to install version 1.0.2 or the latest patch version such as 1.0.4. If you see ^1.0.2 it means to install version 1.0.2or the latest minor or patch version such as 1.1.0.

If you use npm to manage packages in your JavaScript application, you’re probably familiar with the package.json file.

{
  "devDependencies": {
    "ember-cli": "~2.14.0"
  }
}

The syntax is in JSON format where the key is the name of the package and the value is the version of the package to be used.

npm uses the package.json file to specify the version of a package that your app depends on.

The version number is in semver syntax which designates each section with different meaning. semver is broken into three sections separated by a dot.

major.minor.patch

1.0.2

Major, minor and patch represent the different releases of a package.

npm uses the tilde (~) and caret (^) to designate which patch and minor versions to use respectively.