change the content of a page without changing url in angular2

Question

I changed my route without changing the url by using the skipLocationChange attribute like below.

<a [routerLink]="['/articledetail']" skipLocationChange><h4>{{article.HeadLine}}</h4></a>

But it goes to previous route while I am refreshing the page.

Then I used ngIf to check a variable value by setting value of it in a method which is called while clicking on anchor tag,.But here also,my contents are previous contents after refreshing the page

How can I change the content of a page without changing the url while clicking an anchor tag in angular 2.

Thanks

Are you referring to child routes? If yes, you will need a router-outlet in the main parent, so that all childs can be loaded into that. — Sonu Kapoor
– Sonu Kapoor, Commented Dec 5, 2017 at 3:59
Thanks.I used <router-outlet> ,But for that url will be changed right?. — kamalav
– kamalav, Commented Dec 5, 2017 at 4:01
Yes, you are right. My bad. So in your situation, it goes to the previous route instead of staying in the current one? So it goes one step back in the browser history? — Sonu Kapoor
– Sonu Kapoor, Commented Dec 5, 2017 at 4:10
yes.so, I used "this.location.replaceState('/articledetail');" to change the state.my route is changed before navigation itself.After clicking on anchor tag it should goes to next route and should not change url .So,we can't achieve this using skiplocationchange.Pls give me any other idea to achieve this. — kamalav
– kamalav, Commented Dec 5, 2017 at 4:16
I am not to familiar with replaceState. Maybe try the replaceUrl property e.g: this.router.navigate(["articledetail"], {replaceUrl:false}); — Sonu Kapoor
– Sonu Kapoor, Commented Dec 5, 2017 at 4:21

kamalav · Accepted Answer · 2017-12-07 10:05:35Z

1

I used ngIf to check a variable value by setting value of it in a method which is called while clicking on anchor tag,.But here also,my contents are previous contents after refreshing the page

In app.component.html

            <div class="row b-r" *ngIf="region==='INDIA'">
             INDIA Region
            .........
            .........
            </div>
           <div class="row b-r" *ngIf="region==='US'">

            US Region
            ................
             ..............
             .....
           </div>
       <a role="menuitem" tabindex="-1" [routerLink]="'/'" 
       (click)="ChangeRegion('US')">US</a>
       <a role="menuitem" tabindex="-1" [routerLink]="'/'" 
        (click)="ChangeRegion('INDIA')">INDIA</a>

In app.compoenent.ts

     ngOnInit() {

          //Using localstorage for retaining region value after refreshing the page
       if (localStorage.getItem("region") === null) {
          this.region = "INDIA";
         }
      else {
       this.region = localStorage.getItem("region");
        }
      }
         region: string;

    ChangeRegion(region) {
       this.region = region;

     localStorage.setItem("region", this.region);

        }

So,that I used localstorage to retain my variable value after refreshing the page.Its working fine

edited Dec 7, 2017 at 10:05

answered Dec 5, 2017 at 5:00

kamalav

1,2005 gold badges15 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sonu Kapoor Over a year ago

Can you create a stackblitz and show us the issue? It does not seem to be normal.

kamalav Over a year ago

issue has been fixed.pls see my answer.Thanks

Collectives™ on Stack Overflow

change the content of a page without changing url in angular2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related