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.
Note Although it's possible for a component to render multiple templates, we recommend using an if:true|false directive to render nested templates conditionally instead. Create multiple HTML files in the component bundle.
You can simply extend your base component and overwrite the template. This allows you to have different components with the exact same functionality, but different templates. Save this answer.
Instead of mixing all the different styles in one file, we can have multiple HTML templates in the same component and render them conditionally. Firstly, we create multiple HTML files in one of our LWC component bundles. Then we import the HTML files in our javascript file.
Angular components are a subset of directives, always associated with a template.
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 {
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With