5

I have a landing page that will present the user (by default) and "Sign Up" component which is a set of input fields to allow them to register.

For returning users, I would want them to see the landing page as is, then click "Log In" and just replace the registration component with a login component. I do not want the URL to change, it should remain '/'.

For ui-router I could do nested states, but not sure if Angular2's router supports that yet?

app.ts

@Component({
  selector: 'app',
  template: '
    *snip*
    <router-outlet></router-outlet>
    *snip*
  ',
  directives: [Footer, ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path: '/...', name: 'Landing', component: LandingComponent, useAsDefault: true },
  { path: '/about', name 'About', component: AboutComponent }
]);

landing.ts

@Component({
  selector: 'landing',
  template: '
    <body>
      <div>
        <router-outlet></router-outlet>
      </div>
    </body>',
  directives: [ROUTER_DIRECTIVES]

})
@RouteConfig([
  { path: '/', name: 'RegisterForm', component: RegisterForm, useAsDefault: true },
  { path: '/login', name: 'LoginForm', component: LoginForm },
])

Do the paths for the landing component need to be different?

Oleksii Pavlenko
  • 1,327
  • 1
  • 11
  • 25
nathasm
  • 2,524
  • 5
  • 24
  • 35

1 Answers1

-2

Why do you need to use the route at all then? Can't you just bind to a boolean that hides or shows the appropriate section?

<div *ngIf="showReg">Registration</div>

<div *ngIf="!showReg">Login</div>
TGH
  • 38,769
  • 12
  • 102
  • 135