title: Angular 2 : multiple HTML pages within same component
body: <p>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 &amp; SCSS files and routing logic.</p>
  
  <p>As of now I am rendering pages using <code>ngIf</code> which has made my page very lengthy. Is there a way around to achieve this?</p>
  
  <pre><code>&lt;!--View 1--&gt;
          &lt;div class="open-card-BG" *ngIf="registerView=='regView1'"&gt;
  Register Page 1
  &lt;/div&gt;
              &lt;!--View 2--&gt;
              &lt;div class="open-card-BG" *ngIf="registrationView=='regView2'"&gt;
  Register Page 2
  &lt;/div&gt;
  
  
      @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;
        }
  </code></pre>