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

Can you be more specific what you want to achieve? You seem to have a RegisterPage Component which holds different RegisterViews? Do you want these to have different templates / styles? Because if they are different in terms of Markup and styling then they should be seperated as single components. If they functions match or if they share a good amount of same code you can create something like a base component from which you could extend the child views. — malifa
– malifa, Commented Sep 15, 2017 at 8:52
for every html you should create new component and then in ngif you can use this components — porgo
– porgo, Commented Sep 15, 2017 at 8:52

Chandru · Accepted Answer · 2017-09-15 09:14:35Z

13

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

edited Sep 15, 2017 at 9:14

answered Sep 15, 2017 at 9:06

Chandru

11.2k6 gold badges43 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Chandru Over a year ago

Can you close this answer ?

Pratik Over a year ago

app-page1-component is not known element.. error occured

Chandru Over a year ago

app-page1-component is a selector of a component and its declaration to module.ts

Ramkee Over a year ago

@Chandru Can you please tell me how did you declare app-page1-component in appModule.ts

bvdb Over a year ago

@Chandru as Ramkee pointed out, something is missing from your answer. Am I correct to conclude that your answer means that we should create 3 components (ts + html) , i.e. home, page1 and page2 ?

|

Plog · Accepted Answer · 2017-09-15 08:56:58Z

8

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 {

   ...
}

answered Sep 15, 2017 at 8:56

Plog

9,6625 gold badges45 silver badges68 bronze badges

Comments

Arun Redhu · Accepted Answer · 2017-09-15 08:54:25Z

7

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.

answered Sep 15, 2017 at 8:54

Arun Redhu

1,59913 silver badges16 bronze badges

Comments

Rohil Patel · Accepted Answer · 2021-07-31 17:20:12Z

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,

<div *ngIf="abcde=='1'"> your stuff </div>
<div *ngIf="abcde=='2'"> your stuff </div>
<div *ngIf="abcde=='3'"> your stuff </div>

Collectives™ on Stack Overflow

Angular 2 : multiple HTML pages within same component

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related