0

DISCLAIMER : my title could not be accurate because I don't really know what should I do to achieve what I want, that's the purpose of this question ;)

I'm building a standard Angular 5 app. The boostraped component is AppComponent as generated by the CLI. Its template contains a nice drawer, a toolbar and the router-outlet to change the content based on navigation. Everything works as intended.

The problem is that I need 2 pages that wouldn't fit in this template. The homepage when not logged in with log in form and another with a create account form.

I can do that with an ngIf in my template and having 2 "templates" in one (one with the drawer, one without) and based on navigation the page will totally changed its look. The "newer" template would contain just a router-outlet so I can have completely different component. I don't want to have a single template with a router-outlet because drawer and toolbar would always be redrawn when navigating (because component is changing).

But in my opinion it's weird to do things like that... I'm already using ngIf on div but for "little" things on the page, not for the entire page!

Is there another way to do that?

David CASBONNE
  • 139
  • 2
  • 9

1 Answers1

0

DISCLAIMER :-) I'm pretty new to Angular. So perhaps I miss the point.

I'm not sure, if I do understand where You see a problem. Assume something like this:

<app-root>
  <app-nice-toolbar></app-nice-toolbar>
  <app-nice-drawer></app-nice-drawer>
  <app-login *ngIf ...
  <app-register *ngIf ...
  ...

What is the problem with this approach?

Stefan
  • 576
  • 7
  • 27
  • The downside with this approach is that you had to have logic in your AppComponent to show or not other components. You wouldn't only rely on router to do that and that's what I'm trying to achieve... (this is what I says in my question by "2 templates in one") – David CASBONNE Mar 22 '18 at 20:51
  • Okay, interesting. I thought exactly this is the point with Angular. Simple view logic (display, hide, animations,...) based on model/component state (changes). Arbitrary complex client side application/business logic and plain routing (view changes, back button etc.) in the router. Could not even imagine, that the router is the right place to achieve this behaviour. – Stefan Mar 22 '18 at 22:26