&lt;!-- language-all: lang-ts --&gt;

If u need something as `/search?q=asdf` than you can simply use:

    @RouteConfig {
       {path: &#39;/search&#39;,   name: &#39;Search&#39;, component: SearchCmp}
    }

    //And to generate router Links use:

    &lt;a [routerLink]=&quot;[&#39;/Search&#39;]&quot; [queryParams]=&quot;{q:&#39;asdf&#39;}&quot;&gt;&lt;/a&gt;

This will generate the href tag as `&lt;a href=&quot;/search&quot;` but on clicking the anchor tag will lead you to url `/search?q=asdf`. [queryParams] will let you add the query params with &quot;?&quot;, otherwise they will be appended by &quot;;&quot;. You can get this parameter in your `SearchCmp` using:

    constructor(private _routeParams: RouteParams) {
       var queryParam = this._routeParams.get(&#39;q&#39;);
    }

OP (Original Poster) asked how to add **query parameters** via router link, not a **router parameters** as @SaUrAbH MaUrYa answered.

To add query parameters you need to use `[queryParams]` binding:

    &lt;a [routerLink]=&quot;[&#39;/users&#39;]&quot; [queryParams]=&quot;{ page: 1 }&quot;&gt;next page&lt;/a&gt;

I want to check if all the values, i.e values corresponding to all keys in a dictionary are 0. Is there any way to do it without loops? If so how?

How to check if all values of a dictionary are 0

Here is the code in `actions.js`

    export function exportRecordToExcel(record) {
		return ({fetch}) =&gt; ({
			type: EXPORT_RECORD_TO_EXCEL,
			payload: {
				promise: fetch(&#39;/records/export&#39;, {
					credentials: &#39;same-origin&#39;,
					method: &#39;post&#39;,
					headers: {&#39;Content-Type&#39;: &#39;application/json&#39;},
					body: JSON.stringify(data)
				}).then(function(response) {
					return response;
				})
			}
		});
    }

The returned response is an `.xlsx` file. I want the user to be able to save it as a file, but nothing happens. I assume the server is returning the right type of response because in the console it says 

    Content-Disposition:attachment; filename=&quot;report.xlsx&quot;

What I&#39;m I missing? What should I do in the reducer?

How to download fetch response in react as file

How can I add query parameters to `routerLink`?

    @RouteConfig {
       {path: &#39;/search&#39;,   name: &#39;Search&#39;, component: SearchCmp}
    }  

Let&#39; say I want to route to `/search?q=asdf`,

    &lt;a [routerLink]= &quot; [ &#39;/Search&#39; , {q= &#39;asdf&#39;}] &quot;&gt;Link 1&lt;/a&gt;

this resolves to `/search` .


Is there a way to add query parameters without using:

    this.router.navigate( [&#39;Search&#39;, { q: &#39;asdf&#39;}]);

or

    &lt;a href=&quot;/search?a=asdf&quot;&gt; Link 2 &lt;/a&gt;

?



Angular2 Routerlink: add query parameters

How can I add query parameters to <code>routerLink</code>?
<pre><code class="hljs language-scss">@RouteConfig {
 {path: '/search', name: 'Search', component: SearchCmp}
} 
</code></pre>
Let' say I want to route to <code>/search?q=asdf</code>,
<pre><code class="hljs language-css">&#x3C;a [routerLink]= " [ '/Search' , {q= 'asdf'}] ">Link 1&#x3C;/a>
</code></pre>
this resolves to <code>/search</code> .
Is there a way to add query parameters without using:
<pre><code class="hljs language-kotlin">this.router.navigate( ['Search', { q: 'asdf'}]);
</code></pre>
or
<pre><code class="hljs language-css">&#x3C;a href="/search?a=asdf"> Link 2 &#x3C;/a>
</code></pre>
?

In Angular 1, the code below works well.

    &lt;div ng-class=&quot;$varA === $varB ? &#39;css-class-1&#39; : &#39;css-class-2&#39;&quot;&gt;

But when I try to do similar thing in Angular 2. It does not work.

I already added `directives: [NgClass]`

    &lt;div [ngClass]=&quot;varA === varB ? &#39;css-class-1&#39; : &#39;css-class-2&#39;&quot;&gt;

How should I write in Angular 2, thanks!

**EDIT: It was my mistake, I accidentally added `{` `}` to the whole `varA === varB ? &#39;css-class-1&#39; : &#39;css-class-2&#39;`. So ngClass still can use ternary operator in Angular 2.**

Can ngClass use ternary operator in Angular 2?

I have a set of single cell components within an `ng-for` loop.

I have everything in place but I cannot seem to figure out the proper

Currently I have 

    setTimeout(() =&gt; {
      scrollToBottom();
    });

But this doesn&#39;t work all the time as images asynchronously push the viewport down.

Whats the appropriate way to scroll to the bottom of a chat window in Angular 2?



Angular 2 Scroll to bottom (Chat style)

I have a property in a top level Component that is used data from a HTTP source like so (this is in a file called `app.ts`):

    import {UserData} from &#39;./services/user-data/UserData&#39;;

    Component({
        selector: &#39;app&#39;, // &lt;app&gt;&lt;/app&gt;
        providers: [...FORM_PROVIDERS],
        directives: [...ROUTER_DIRECTIVES],
        pipes: [],
        template: require(&#39;./app.html&#39;)
    })
    @RouteConfig([
        // stuff here
    ])
    
    export class App {
        // Please note that UserData is an Injectable Service I have written
        userStatus: UserStatus;
    
        constructor(private userData: UserData) {
            this.userStatus = new UserStatus();
        }
    
        ngOnInit() {
            this.userData.getUserStatus()
                .subscribe(
                (status) =&gt; {
                    this.userStatus = status; // I want to access this in my Child Components...
                },
                (err) =&gt; {console.log(err);},
                () =&gt; {console.log(&quot;User status complete&quot;);            }
            );
        }
    }

Now, I have another Component that is a direct child of the top level Component and within it I would like to access the parent&#39;s property &#39;`userStatus`&#39;, here is the child:

    Component({
        selector: &#39;profile&#39;,
        template: require(&#39;app/components/profile/profile.html&#39;),
        providers: [],
        directives: [],
        pipes: []
    })
    
    export class Profile implements OnInit {
        constructor() {
    
        }
    
        ngOnInit() {
        	// I want to have access with the parent App Component, &#39;userStatus&#39; propety here... I only want to read this property
        }
    }

Now in Angular 1.x this would be easy as I could reference `$parent` in my child controller or (**ANTI PATTERN ALERT!!!**) I could be so foolish to put this data in my `$rootScope`.

What would be the best way to access the parent in Angular 2?

Accessing a property in a parent Component

I&#39;m currently trying to teach myself Angular2 and TypeScript after happily working with AngularJS 1.* for the last 4 years! I have to admit I am hating it but I am sure my eureka moment is just around the corner... anyway, I have written a service in my dummy app that will fetch http data from a phoney backend I wrote that serves JSON.

    import {Injectable} from &#39;angular2/core&#39;;
    import {Http, Headers, Response} from &#39;angular2/http&#39;;
    import {Observable} from &#39;rxjs&#39;;
    
    @Injectable()
    export class UserData {
    
        constructor(public http: Http) {
        }
    
        getUserStatus(): any {
            var headers = new Headers();
            headers.append(&#39;Content-Type&#39;, &#39;application/json&#39;);
            return this.http.get(&#39;/restservice/userstatus&#39;, {headers: headers})
                .map((data: any) =&gt; data.json())
                .catch(this.handleError);
        }
    
        getUserInfo(): any {
            var headers = new Headers();
            headers.append(&#39;Content-Type&#39;, &#39;application/json&#39;);
            return this.http.get(&#39;/restservice/profile/info&#39;, {headers: headers})
                .map((data: any) =&gt; data.json())
                .catch(this.handleError);
        }
    
        getUserPhotos(myId): any {
            var headers = new Headers();
            headers.append(&#39;Content-Type&#39;, &#39;application/json&#39;);
            return this.http.get(`restservice/profile/pictures/overview/${ myId }`, {headers: headers})
                .map((data: any) =&gt; data.json())
                .catch(this.handleError);
        }
    
        private handleError(error: Response) {
            // just logging to the console for now...
            console.error(error);
            return Observable.throw(error.json().error || &#39;Server error&#39;);
        }   
    }

Now in a Component I wish to run (or chain) both `getUserInfo()` and `getUserPhotos(myId)` methods. In AngularJS this was easy as in my controller I would do something like this to avoid the &quot;Pyramid of doom&quot;...

    // Good old AngularJS 1.*
    UserData.getUserInfo().then(function(resp) {
    	return UserData.getUserPhotos(resp.UserId);
    }).then(function (resp) {
    	// do more stuff...
    }); 

Now I have tried doing something similar in my component (replacing `.then` for `.subscribe`) however my error console going crazy! 

    @Component({
        selector: &#39;profile&#39;,
        template: require(&#39;app/components/profile/profile.html&#39;),
        providers: [],
        directives: [],
        pipes: []
    })
    export class Profile implements OnInit {
    
        userPhotos: any;
        userInfo: any;
    
        // UserData is my service
        constructor(private userData: UserData) {
        }
    
        ngOnInit() {
    
            // I need to pass my own ID here...
            this.userData.getUserPhotos(&#39;123456&#39;) // ToDo: Get this from parent or UserData Service
                .subscribe(
                (data) =&gt; {
                    this.userPhotos = data;
                }
            ).getUserInfo().subscribe(
                (data) =&gt; {
                    this.userInfo = data;
                });
        }
    
    }

I&#39;m obviously doing something wrong... how would I best with Observables and RxJS? Sorry if I am asking stupid questions... but thanks for the help in advance! I have also noticed the repeated code in my functions when declaring my http headers...


Chaining RxJS Observables from http data in Angular2 with TypeScript

What is wrong with my Angular code? I am getting the following error:

&gt; Cannot read property &#39;remove&#39; of undefined at BrowserDomAdapter.removeClass 
 
&lt;!-- language: lang-html --&gt;

    &lt;ol&gt;
      &lt;li *ngClass=&quot;{active: step===&#39;step1&#39;}&quot; (click)=&quot;step=&#39;step1&#39;&quot;&gt;Step1&lt;/li&gt;
      &lt;li *ngClass=&quot;{active: step===&#39;step2&#39;}&quot; (click)=&quot;step=&#39;step2&#39;&quot;&gt;Step2&lt;/li&gt;
      &lt;li *ngClass=&quot;{active: step===&#39;step3&#39;}&quot; (click)=&quot;step=&#39;step3&#39;&quot;&gt;Step3&lt;/li&gt;
    &lt;/ol&gt;

Angular: conditional class with *ngClass

I&#39;m new to Angular 2. I have stored my single-page application in my server within a folder named as &quot;myapp&quot;. I have changed the URL in the base to http://example.com/myapp/`.

My project has two pages. So I implement Angular 2 routing. I set the default page as login. When I type `http://example.com/myapp/` in my browser it will redirect automatically to `http://example.com/myapp/login`. But if refresh that page I get a `404` error, saying that `http://example.com/myapp/login` is not found.

But if I run my project using the lite server everything is working. In this case the base URL in index.html will be `&quot;/&quot;`. How do fix it?

 

Angular 2: 404 error occur when I refresh through the browser

How can I set Bootstrap navbar &quot;active&quot; class in Angular 2? I only found [Angular 1 way](https://stackoverflow.com/questions/16199418/how-do-i-implement-the-bootstrap-navbar-active-class-with-angular-js).

When I go to **About** page, add `class=&quot;active&quot;` to **About**, and remove `class=&quot;active&quot;` on **Home**.

    &lt;ul class=&quot;nav navbar-nav&quot;&gt;
        &lt;li class=&quot;active&quot;&gt;&lt;a [routerLink]=&quot;[&#39;Home&#39;]&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a [routerLink]=&quot;[&#39;About&#39;]&quot;&gt;About&lt;/a&gt;&lt;/li&gt;&lt;/li&gt;
    &lt;/ul&gt;

Thanks

How to set Bootstrap navbar &quot;active&quot; class in Angular 2?

In my Angular 2 application I&#39;m trying to disable a routerLink without any success. I&#39;ve tried to handle the click event on the `click` event (with `event.preventDefault()` and `event.stopPropagation()`) but it doesn&#39;t work.

How can I disable a routerLink?

How can I conditionally disable the routerLink attribute?

Is there a smart way to go back last page in Angular 2?

Something like

    this._router.navigate(LASTPAGE);

For example, page C has a &lt;kbd&gt;Go Back&lt;/kbd&gt; button,

 - Page A -&gt; Page C, click it, back to page A.
    
 - Page B -&gt; Page C, click it, back to page B.

Does router have this history information?

How to go back last page

I&#39;m making a real estate website using Angular 2, Google Maps, etc. and when a user changes the center of the map I perform a search to the API indicating the current position of the map as well as the radius. The thing is, I want to reflect those values in the url without reloading the entire page. Is that possible? I&#39;ve found some solutions using AngularJS 1.x but nothing about Angular 2.

Content Type	Original Author	Original Content on Stackoverflow
Question	tisie	View Question on Stackoverflow
Solution 1 - Angular	Saurabh Maurya	View Answer on Stackoverflow
Solution 2 - Angular	pleerock	View Answer on Stackoverflow

Angular2 Routerlink: add query parameters

Angular Problem Overview

Angular Solutions

Solution 1 - Angular

Solution 2 - Angular

How to download fetch response in react as file

How to check if all values of a dictionary are 0

Attributions