Geek Answers Handbook

Is it possible to add two templates for one component in angular2?

I have one component with one html and .ts file. For some reason, I have to create pages with multiple pages (HTML).
Is it possible to create several (html) pages for one class (component)?
Or can you provide a dynamic TemplateUrl to a component?

My main motive is to provide different URLs and use different views (HTML pages), but using the same class (ie class component)?
I saw a lot of questions mentioned below related to this, but could not find the exact solution -

I need something like this

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

I want to download the same component with a different url and view.

+6
source share
2 answers

This is possible with inheritance. Different patterns of appearance and style, but (basically) the same basic component code. You still have to declare @Component metadata, so if you use parameter accessors, etc., you will also need to override them.

The 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}'`); } }

The 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 { }
+4
source

Angular Best Practice is one component that includes one template. If you want to apply the same logic to two views, you must create this logic inside the service and use the same service for two different sets of components. URLs are another issue performed by the router. You must assign component A for URL A and component B for URL B.

+1
source

More articles:


All Articles