Changing the card section dynamically on click of menu list

[vijayamurugan]

Guys, Thanks for a such wonderful Session on ng-conf. ' I have a problem changing the content dynamically , my design follows as below

app.component.html

<div>
  <router-outlet></router-outlet>
</div>

Login

<div style="padding-top:8%" fxFlex fxLayoutAlign="center center">
  <md-card fxLayoutGap="20px" fxFlex fxFlex.xs="70" fxFlex="30" fxFlexAlign="center">
    <md-card-header align="center">
      <span style="font-size: 1.5em; margin-bottom: 5px;align-content:center" fxFlexAlign="center">Login</span>
    </md-card-header>
    <md-card-content>
      <md-input-container>
        <input mdInput ngModel name="name" placeholder="Username" required>
      </md-input-container>
      <md-input-container>
        <input mdInput ngModel name="password" type="password" placeholder="Password" required>
      </md-input-container>
    </md-card-content>
    <md-card-actions align="center">
      <button md-raised-button class="primary">Login</button>
    </md-card-actions>
  </md-card>
</div>

Register

<div style="padding-top:8%" fxFlex fxLayoutAlign="center center">
  <md-card fxFlex fxFlex.xs="70" fxFlex="30">
    <md-card-header>
      <span style="font-size: 1.3em; margin-bottom: 5px;align-content:center" fxFlexAlign="center">Register</span>
    </md-card-header>
    <md-card-content>
      <md-input-container>
        <input mdInput ngModel name="firstName" placeholder="First Name" required>
      </md-input-container>
      <md-input-container>
        <input mdInput ngModel name="lastName" placeholder="Last Name" required>
      </md-input-container>
      <md-input-container>
        <input mdInput ngModel name="email" placeholder="Email" required>
      </md-input-container>
      <md-input-container>
        <input mdInput ngModel name="password" type="password" placeholder="Password (6 or more Characters)" required>
      </md-input-container>
    </md-card-content>
    <md-card-actions align="center">
      <button md-raised-button class="primary">Sign Up</button>
    </md-card-actions>
  </md-card>
  <div>

upon successful login the user will be navigated to the home page where I have copied your file of app.component.html and made it as home page. I don't need a tool bar for index(which will have link to login and register pages) .login and register page and need a tool bar for home page.

Now my problem is I want to change the content section of home page dynamically on click of side nav menu list

The below section has to be updated dynamically

<div class="content" fxLayout="row" fxLayout.sm="column" fxLayoutGap="16px">

      <md-card fxFlex="80">
        <md-icon svgIcon="avatars:{{selectedUser.avatar}}" class="avatar"></md-icon>
        <h2>{{selectedUser.name}}</h2>
        <p>{{selectedUser.details}}</p>
      </md-card>

      <md-card fxFlex fxLayout="column" fxLayoutGap="14px">
        <md-slide-toggle [(ngModel)]="selectedUser.isAdmin">Is Admin?</md-slide-toggle>
        <md-slide-toggle [(ngModel)]="selectedUser.isCool">Is Cool?</md-slide-toggle>
      </md-card>

    </div>

What's the best way to achieve this?

[vijayamurugan]

I fixed this on my own since Closing this

[EladBezalel]

Happy to hear! thank you and i'm glad you got it fixed