Angular 2 Routes to show confirmation screen without compoent?

Question

I have the UX design in my project like suppose I have a Register page, so I have made a Register component with its html and css and given a state 'localhost:8080/register' i.e. '/register'as a route. On successfull registeration I want to display a different HTML template for register with some route stats as "/register/done" but here I donot want to make any new component, So is it possible to create a route without component. The second approach is I can replace the HTML template in the current component to show the successfull registration confirmation screen. So is it possible to change the HTML template dynamically or not. As I am using webpack, it is not possible I think.

If there is any other solution to show these two related routes with different HTML template and route then please share it here.

Thanks in advance!!

I quite normal approach would be to set a `route guard` on the routes that require authentication. If you are not logged in, you will be redirected to `/login` - you are are logged in, you will just go to that routes real component. Then, if the users actively navigates to `/login` when already logged in - just show "You are already logged in... something something" — Fredrik Lundin, Jun 06 '17 at 10:05
@FredrikLundin I think you are not getting my problem. Please go again with the explanation of question, there is no role of guard here and also there is no login related thing I discussed. — Satish Kumar Verma, Jun 06 '17 at 11:16
You are right, i read it way too fast - sorry about that! I don't really have a good solution for your problem, but maybe this thread can help: https://stackoverflow.com/questions/40786490/dynamically-load-html-template-in-angular2 — Fredrik Lundin, Jun 06 '17 at 11:48
And of course you can simply do an `*ngIf='registered' else...` in you template to show different html. But if there are a lot of html I understand that you might want to break it up — Fredrik Lundin, Jun 06 '17 at 11:58

score 0 · Answer 1 · answered Jun 07 '17 at 05:06

0

Use a flag to dynamically change the html template. Set flag true or false in your register.component.ts as per your requirement. And in html template use 'ngIf' to toggle between template views.

<div *ngIf="flag">
   Main Template
</div>

<div *ngIf="!flag">
   Successfull registration template
</div>

`

answered Jun 07 '17 at 05:06

Veena K. Suresh

942
5
16

Thanks, this already came in my mind. Do you have any other option? – Satish Kumar Verma Jun 08 '17 at 11:38

score 0 · Answer 2 · answered Jul 04 '17 at 08:53

I have solved it like you say but with optimized ngIf else in Angular 4. like following-


<div class="parent-div">
  <div class="signup-center " *ngIf="!signUpDone; else confirm">
      <div>Signup with emailid>
          ....Signup screen.....
      </div>
  </div>
  <ng-template #confirm>
     <div>Congratulations!! You have successfully created your account</div>
  </ng-template>
</div>

Angular 2 Routes to show confirmation screen without compoent?

2 Answers2