0

I am navigating to another component while swiping on app.component.My content of other component are displayed instead of . But it showing app.component contents also.I need to hide those.Pls help me to do that

kamalav
  • 1,190
  • 4
  • 14
  • 31

1 Answers1

0

You have two main possibilities : using router outlet like this (or Tour of Heroes) http://embed.plnkr.co/vTmlwo2LP2sQ3NCCp4VH/

In this case you need to configure all your routes (path, name...) : 

<a [routerLink]="['Page1']">Page 1</a>
<a [routerLink]="['Page2']">Page 2</a>
<router-outlet></router-outlet>

EDITED : The other possbility, is to hide manualy your component in your app html code

// try both solution, ngIf has problems sometimes to regenerate the DOM to display
<app-pageContact [class.hidden]="!(page === 'Contact')"></app-contact>
<app-pageContact *ngIf="page === 'Contact'"></app-contact>

// somewhere in your code just change this value depending on the button clicked
<button (click)="changePage('Contact')">Contact us</button>

in your app.component.ts create the changePage method that change the page variable value :

changePage(pageName: string) {
   this.page = pagename;
}

/!\ In this case, the more you have code, the more your application and code will be harder to understand, so I still recommand route instead.

andrea06590
  • 1,259
  • 3
  • 10
  • 22
  • I need to do navigation while swiping on a page.so,that i am doing it by this. router.navigate(['/article']);. after swiping app.component it navigate to article but showing app also.I don't need tabs and all – kamalav Nov 09 '17 at 11:03
  • can you pls explain what is mainPage in *ngIf="mainPage".I will try this – kamalav Nov 09 '17 at 11:09
  • Suppose you have a variable called "page" of type string, in your main component, app.component. Change this value when a user click on the Page2 button to "Page2" for example. Then in your html code (app.html) you can play with this variable name. Check my post edited for you ;) – andrea06590 Nov 09 '17 at 12:17
  • thanks.I got solution by following https://stackoverflow.com/questions/37069609/show-loading-screen-when-navigating-between-routes-in-angular-2/38620817#38620817 – kamalav Nov 09 '17 at 12:28
  • Oh ok, the solution you sent is better as it's using route logic. My solution can still be implemented when you don't navigate to another route, but when you want to change the UI / view within the same page ;) – andrea06590 Nov 09 '17 at 12:30