How to call multiple templates in single component using angular2

Question

I am new to angularJs2. My requirement is that I want multiple templates in single component. Like I have ForgetPasswordComponent and there are two routes with name forgot-password and password/reset. So I want to call diff-diff templates on diff routes. Currently the forgot-password.component.html is calling on forgot-password route and now I want to call diff. template on password/reset route. Here is my code.

app-routing.module.ts

 { path: 'forgot-password', component: ForgetPasswordComponent },
{ path: 'password/reset', component: ForgetPasswordComponent },

forget-password.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { AlertService, AuthenticationService, ForgotpasswordService } from '../_services/index';
//import { AppSettings,IEnvVars } from '../_configs/app.settings';


@Component({
  moduleId: module.id,
  templateUrl: '../templates/forgot-password.component.html',
  providers:[AlertService, AuthenticationService,  ForgotpasswordService]
 })

export class ForgetPasswordComponent implements OnInit {
  model: any = {};
  loading = false;

  constructor(
    private router: Router,
    private authenticationService: AuthenticationService,
    private forgotpasswordService: ForgotpasswordService,
    private alertService: AlertService) { }

  ngOnInit() {
    // reset login status
    this.authenticationService.logout();
  }

  forgotPassword() {

    this.loading = true;
    this.forgotpasswordService.forgotPassword(this.model.email)
        .subscribe(
            data => console.log("yesss"),
            error => {
               console.log("yesss");
            }
        );
    }
}

ZZZ · Accepted Answer · 2017-01-13 06:11:54Z

1

Not sure if NG2 has built-in way to support this. My solution is inheritance. I just used a base component class to contain all or most logic and data, without a html template. Then in derived component classes, just need to declare constructor calling super(...), and define respective html template.

If your application is complex, likely you will be using module to instantiate classes, then make sure you declare moduleId: module.id in the Component attribute, otherwise the NG2 runtime may complain the html template could not be loaded.

answered Jan 13, 2017 at 6:11

ZZZ

2,8102 gold badges29 silver badges38 bronze badges

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

Collectives™ on Stack Overflow

How to call multiple templates in single component using angular2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related