Can I add two template for one component in angular2?

Question

I have one component with one html and .ts file. For some reasons I have to create multiple pages (HTML) pages.
Is it possible to create multiple (html) pages for single class (component)?
Or is it possible to provide dynamic TemplateUrl to the component?

My main motive is to provide different URL and to use different view (HTML pages) but using single class (.ts class i.e component)?
I have seen many questions referred below related to that but unable to found exact solution-

I want something like this

{ path: '/Login', component: LogIn, name: "Login"},
{ path: '/Login2', component: LogIn, name: "Login" },
{ path: '/Login3', component: LogIn, name: "Login" }

I want to load same component with different url and view.

So what's the problem with the solutions provided in the linked SO questions? — Günter Zöchbauer
– Günter Zöchbauer, Commented May 13, 2016 at 8:41
any alternate than without *ngIf ? exactly i want diff. templateUrls for diff. routes — Pardeep Jain
– Pardeep Jain, Commented May 13, 2016 at 8:50
I just wanted to explicitly mention again that if you have a component that extends a class that all decorators @Component(), @Input(), @Output(), @ViewChile(), ... need to be on the class that is actually used as component. If they are only on a subclass they are ignored (mostly) — Günter Zöchbauer
– Günter Zöchbauer, Commented May 13, 2016 at 9:38

Chandrahasa Rai · Accepted Answer · 2017-11-16 06:38:55Z

This is possible with inheritance. Different view and style templates, but (basically) the same underlying component code. You still have to declare the @Component metadata, so if you're using value accessors etc, you will need to redefine those too.

First component:

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

import { KeyValuePairBase } from '../../model/key-value-pair-base'

@Component({
  moduleId: module.id,
  selector: 'select-list',
  templateUrl: './select-list.component.html',
  styleUrls: ['./select-list.component.scss']
})
export class SelectListComponent implements OnInit {
  @Input() private data: KeyValuePairBase[];

  constructor() {
    super();
  }

  ngOnInit() {
    if (!this.name) throw new Error("'name' property is required by 'select-list' component");
    if (!this.friendlyName) throw new Error(`'friendlyName' property is required by 'select-list' component '${this.name}'`);
  }
}

Second component:

import { Component } from '@angular/core';

import { SelectListComponent } from '../select-list/select-list.component'

@Component({
  moduleId: module.id,
  selector: 'radio-list',
  templateUrl: './radio-list.component.html',
  styleUrls: ['./radio-list.component.scss']
})
export class RadioListComponent extends SelectListComponent {
}

Benyamin Shoham · Accepted Answer · 2017-01-23 15:11:20Z

2

Angular best practice is one component includes one template. If you want to apply the same logic to two views, you should create that logic inside a service, and use one service for two different component-view sets. URLs are a different issue, handled by the router. You should assign component A to URL A and component B to URL B.

answered Jan 23, 2017 at 15:11

Benyamin Shoham

2,7092 gold badges16 silver badges19 bronze badges

1 Comment

Ravinder Payal Over a year ago

he is asking for creating two blank components with logic in single service class. You will need two different URLs for this. @PardeepJain

Collectives™ on Stack Overflow

Can I add two template for one component in angular2?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related