Hello everyone,
I am currently working on developing a parent class called Event that will manage the DOM for four child classes: vote-event, view-event, my-events, and my-votes.
The concept is to have a single HTML file, a parent Component, and four child Components that will override certain methods of the parent. This scenario is a classic example of polymorphism.
Here is the parent component:
@Component({
selector: 'app-events',
templateUrl: './events.component.html',
styleUrls: ['./events.component.css']
})
export abstract class EventsComponent implements OnInit{
constructor() {};
ngOnInit() {
this.test();
}
abstract test();
}
This is the parent HTML structure:
<div id="main">
<div class="container pad-top">
<div class="row">
<div class="col-xs-12 nopadding text-center">
<a [routerLink]="['/events/vote-events']"><img class="img-responsive sin-looks-votacion"
src="assets/images/no-tienes-votaciones.jpg"></a>
</div>
</div>
</div>
Now, in terms of implementation, I am aiming to achieve something like this:
Child Component:
export class MyVotesComponent extends EventsComponent {
private potato;
constructor() {
super();
}
test() {
console.log("Testttttttttttt");
}
}
Child HTML:
<app-events></app-events>
However, I encountered an issue where I had to remove the EventsComponent from the events.module.ts declarations. As a result, the browser now throws an error:
'app-events' is not a known element:
So, my question is: Is this the most effective approach? If not, what would be a better alternative? What resources should I look into? And if this is indeed the right approach, what might I be missing?
Thank you all for your help,
Alejandro