Tag: Angular

6 Posts Found
 

Unsubscribe from Navigation Events

Posted: 12/13/2017 8:39 AM

I recently ran into a problem where an Angular Component was still responding to Navigation Events even after having navigated away from that route.

When subscribing to an Observable, be sure to store the subscription in a global variable and call the .unsubscribe() function when the component is being destroyed.

export class MyComponent implements OnInit, OnDestroy {

    constructor (private router: Router) { }

    // stores the subscription object
    navSubscription: Subscription = null;

    // called when the component is initialized
    ngOnInit() {
        this.navSubscription = this.router.events.subscribe((event: any) => {
            // test if the event is an end navigation
            if (event instanceof NavigationEnd) {
                // do something here
            }
        });
    }

    // called when the component is destroyed
    ngOnDestroy() {
        this.navSubscription.unsubscribe();
    }
}
 

Angular / Third Party Cookies

Posted: 11/8/2017 8:48 AM

When performing a GET or POST using Angular's HTTP service against a third-party server, returned cookies are, by default, not accepted by the browser.

To enable this, when calling your this.http.get() or this.http.post(), you need to add the option withCredentials and set it to true. This will allow your browser to accept any third-party cookies

 

Join Angular Observables

Posted: 8/17/2017 4:11 PM

If you have multiple observables that you want to execute simultaneously, and be notified when they've completed, you use the Observable.forkJoin() function, passing it an array of Observables:

const observable1 = this.http.get('url1.html');
const observable2 = this.http.get('url2.html');

Observable.forkJoin([observable1, observable2]).subscribe(results => {
  const results1 = results[0]; // observable1 results
  const results2 = results[1]; // observable2 results

  this.processResults1(results1);
  this.processResults2(results2);
});
 

Update NPM to Latest Stable Version

Posted: 12/1/2016 11:04 AM

To update the Node Package Manager (NPM) to the latest stable version.

Install N:

sudo npm cache clean -f
sudo npm install -g n

Run N and request the latest stable version

sudo n stable
 

TypeScript Function Decodes URL Parameters

Posted: 11/14/2016 5:15 PM

Angular 2 includes a Routing module that will automatically handle URL parameters that are implicitly passed in a URL.

If you're not using Angular Routing, or if you're passing additional parameters in the URL, you'll need to parse out the query string to retrieve the URL parameters.

Below is a TypeScript function that will return a Map with key/value pairs that correspond to the URL parameters passed to a web page. You can optionally pass a query string to decode, or if you pass NULL, the function will retrieve the query string from the URL of the current web page.

    // parses the query string
    parseQueryString(queryString: string): Map<string, string> {
        // if the query string is NULL
        if (queryString == null) {
            queryString = window.location.search.substring(1);
        }

        var params = new Map<string, string>();

        var queries = queryString.split("&");

        queries.forEach((indexQuery: string) => {
            var indexPair = indexQuery.split("=");

            var queryKey = decodeURIComponent(indexPair[0]);
            var queryValue = decodeURIComponent(indexPair.length > 1 ? indexPair[1] : "");

            params[queryKey] = queryValue;
        });

        return params;
    }
 

TypeScript Syntax for Custom Getters and Setters

Posted: 11/11/2016 3:56 PM

Here is the TypeScript syntax to define custom getters and setters for variables:

    private _myVar: number

    get myVar(): number {
        return this._myVar;
    }

    set myVar(myVar) {
        this._myVar = myVar;

        callSomeOtherFunction();
    }


    retrieveCurrentMyVar(): number {
        return this.myVar; // calls the getter myVar() above
    }