CODEWITHSUNDEEP
angularangular2-template
Pardeep Jain
Pardeep Jain

Reputation: 86790

Can I add two template for one component in angular2?

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.

Upvotes: 10

Views: 20075

Answers (2)

Spikeh
Spikeh

Reputation: 3705

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

Upvotes: 7

Benyamin Shoham
Benyamin Shoham

Reputation: 2689

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.

Upvotes: 2

Related Questions