Angular 2 : multiple HTML pages within same component

Question

I am new to angular 2, I have a component named Register, in this 1 component I have 5 HTML pages where one click of 1st register page I will go to the 2nd register page and on click of 2nd register page I will go to the 3rd register page. How can I make 5 HTML pages in 1 component I means is there a way to achieve multiple templates per component? How to do routing? The main intent is to have separate HTML & SCSS files and routing logic.

As of now I am rendering pages using ngIf which has made my page very lengthy. Is there a way around to achieve this?


        
Register Page 1

            
            
Register Page 2



    @Component({
      selector: 'register-page',
      templateUrl: './register-page.component.html',
      styleUrls: ['./register-page.component.scss'],
      providers : [RegisterService,Configuration,LocalStorageService]
    })
        ngOnInit() {
        this.registerView= "regView1";
      }

    changeView(view) {

          this.registerView= view;
      }

      previousView(view) {

          this.registerView= view;
      }

user_2717189 · Answer

If your component logic is almost same and to display them on a *single html file with ngIf directive instead of various html files, you can do as below:

 import { Component, OnInit } from '@angular/core';
 import {Router, ActivatedRoute, Params} from '@angular/router';
 
 @Component({
   selector: 'app-registration',
   templateUrl: './registration.component.html',
   styleUrls: ['./registration.component.css']
 })
 export class RegistrationComponent implements OnInit {
 
   constructor(private activatedRoute: ActivatedRoute) { }
 
   abcde:string='';
 
   ngOnInit(): void {
     //fetch query string and set value of variable
     this.activatedRoute.queryParams.subscribe(params => {
         this.abcde=params['xyz'];
     });
   }
 }

In html file,

 your stuff 
 your stuff 
 your stuff

Angular 2 : multiple HTML pages within same component

4 Answers