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?

<!--View 1-->
        <div class="open-card-BG" *ngIf="registerView=='regView1'">
Register Page 1
</div>
            <!--View 2-->
            <div class="open-card-BG" *ngIf="registrationView=='regView2'">
Register Page 2
</div>


    @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;
      }

Answer 1

Try do like this :

@Component({
    selector: 'register-page',
    template: `
            <div class="open-card-BG" *ngIf="registerView == 'regView1'">Reg View 1 Content</div>
            <div class="open-card-BG" *ngIf="registerView == 'regView2'">Reg View 2 Content</div>
            `,
    styleUrls: ['./register-page.component.scss'],
    providers: [RegisterService, Configuration, LocalStorageService]
})

export class Appcomponent {
    registerView = 'regView1';
}

Else do like this

page1.component.html

<div>
    <h1>Page1 Component Content</h1>
</div>

page2.component.html

<div>
    <h1>Page2 Component Content</h1>
</div>

home.component.html

<div>
    <div class="open-card-BG" *ngIf="registerView == 'regView1'">
         <app-page1-component></app-page1-component>
    </div>
    <div class="open-card-BG" *ngIf="registerView == 'regView2'">
         <app-page2-component></app-page2-component>
    </div>
</div>

component.ts

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
})

export class HomeComponent {
    registerView = 'regView1';
}

Answer 2

In Angular components are basically a patch of the screen means there should always be single template for each component class. If you want to use multiple templates for single component class then As per terminology it doesn't refer to component definition. If you want to use then create a base class and create 3 separate component and extend the base class.

Answer 3

Using *ngIf would be the most sensible way to do this. If it gets to the point that you are having to use *ngIf to cover large chunks of HTML then it's probably more of an indication that these should be separate components since they clearly have significantly different views.

If there is a lot of shared logic in your .ts files you can make a class with all the shared logic and use class inheritance on your individual components.

export class BaseComponentLogic implements OnInit {

    ...

}

@Component({...})
export class MyFirstComponent extends BaseComponentLogic implements OnInit {

   ...
}

@Component({...})
export class MySecondComponent extends BaseComponentLogic implements OnInit {

   ...
}