angular 4 material doing page navigation

Question

I am very new to angular 4 with material 2 design. I have a basic question around it.

I have my code in app.component.html which basically renders few mat-card components.

Clicking on any of the link inside the mat-card component is supposed to change the entire view with another set of components.

Technically i can use *ngIf construct to show hide. But this will make the entire app.component.html too big and hard to manage.

so, is there a concept like page in angular 4 material like we have in ionic 3?

what would be the recommended way to achieve this.

the current page looks like:

      <div fxLayout="row" style="padding:10px">
                      <mat-card class="dashboard-widget-1-2">
                            <mat-card-title class="card-title">Favorite Searches</mat-card-title>
                            <mat-card-content>
                                  <div fxLayout="column">
                                        <div class="widget-para-title" style="border-bottom: 1px solid #8D8D8D">Account with open opportunities</div>
                                        <div class="widget-para-title fa-text-link" style="border-bottom: 1px solid #8D8D8D">My open opportunities</div>
                                        <div class="widget-para-title" style="border-bottom: 1px solid #8D8D8D">My strategic customers</div>
                                        <div class="widget-para-title" style="border-bottom: 1px solid #8D8D8D">My customer with upcoming renewals</div>
                                        <div class="widget-para-title" style="border-bottom: 1px solid #8D8D8D">My customer with open service requests</div>

                                  </div>
                            </mat-card-content>
                      </mat-card>
</div>

currently on the same place which should go to entirely a new page

  <div fxFlex="95%">
            <mat-tab-group [selectedIndex]="core.selectedTab">
                        <mat-tab *ngFor="let tb of core.dynTabs">
                        <ng-template mat-tab-label *ngIf="tb.closable == 'true'">
                              {{tb.label}}&nbsp;&nbsp;<mat-icon (click)="removeTab()">close</mat-icon>
                        </ng-template>
                        <ng-template mat-tab-label *ngIf="tb.closable == 'false'">
                              {{tb.label}}
                        </ng-template>
                        <div>      
                              <app-opty-list *ngIf="tb.label == 'Opportunities'"></app-opty-list>
                              <app-edit-opty *ngIf="tb.label != 'Opportunities'"></app-edit-opty>
                        </div>
                        </mat-tab>
            </mat-tab-group>
            </div>

I think what you want is the router-outlet. Check it out on the official docs here: angular.io/guide/router#router-outlet — Aamir Khan

Aamir Khan Aamir Khan · Accepted Answer · 2017-10-31T05:21:46

You need to set up routing in your application. You can read more about the powerful Angular router here: https://angular.io/guide/router#the-basics

A small example to help you wrap your head around the concept:

//app.component.html
<div class="links">
    <a routerLink="/home">Home</a>
    <a routerLink="/about">About</a>
</div>
<router-outlet></router-outlet>

//app.module.ts
@NgModule({
imports: [
RouterModule.forRoot(
  [
     {
        path: 'home',
        component: HomeComponent
     },
     {
        path: 'about',
        component: AboutComponent
     }
  ]
)
// any other imports
],
  ...
})
export class AppModule { }

In this setup, whenever you click on one of the links, either Home or About, the component referenced by the path will be appended just below the <router-outlet> directive.

angular 4 material doing page navigation

1 Answers