How to display a list of inheritance objects in Angular?
0
I want to display a list of different objects that inherit from the same abstract class in Angular. What is a good practice to do that?
Let's assume the following simple model:
abstract class Vehicle {
wheels: number;
}
class Car extends Vehicle {
isConvertible: boolean;
}
class Truck extends Vehicle {
freight: string;
}
My approach works, but it seems to be pretty ugly and not the oop way.
HTML Template:
<ul>
<li *ngFor="let vehicle of vehicles">
<p>{{vehicle.wheels}}</p>
<p *ngIf="isCar(vehicle)">{{asCar(vehicle).isConvertible}}</p>
<p *ngIf="isTruck(vehicle)">{{asTruck(vehicle).freight}}</p>
</li>
</ul>
Component:
@Component({
[...]
})
export class VehicleInfoComponent{
@Input() vehicles: Vehicles;
public isCar(vehicle: Vehicle): boolean {
return vehicle instanceof Car;
}
public isTruck(vehicle: Vehicle): boolean {
return vehicle instanceof Truck;
}
public asCar(vehicle: Vehicle): Car{
return vehicle as Car;
}
public asTruck(vehicle: Vehicle): Truck{
return vehicle as Truck;
}
}
Is there a better more oop way to do this?
angular typescript oop asked Nov 26 '18 at 6:43
cyluxxcyluxx
368
add a comment |
0
I want to display a list of different objects that inherit from the same abstract class in Angular. What is a good practice to do that?
Let's assume the following simple model:
abstract class Vehicle {
wheels: number;
}
class Car extends Vehicle {
isConvertible: boolean;
}
class Truck extends Vehicle {
freight: string;
}
My approach works, but it seems to be pretty ugly and not the oop way.
HTML Template:
<ul>
<li *ngFor="let vehicle of vehicles">
<p>{{vehicle.wheels}}</p>
<p *ngIf="isCar(vehicle)">{{asCar(vehicle).isConvertible}}</p>
<p *ngIf="isTruck(vehicle)">{{asTruck(vehicle).freight}}</p>
</li>
</ul>
Component:
@Component({
[...]
})
export class VehicleInfoComponent{
@Input() vehicles: Vehicles;
public isCar(vehicle: Vehicle): boolean {
return vehicle instanceof Car;
}
public isTruck(vehicle: Vehicle): boolean {
return vehicle instanceof Truck;
}
public asCar(vehicle: Vehicle): Car{
return vehicle as Car;
}
public asTruck(vehicle: Vehicle): Truck{
return vehicle as Truck;
}
}
Is there a better more oop way to do this?
angular typescript oop asked Nov 26 '18 at 6:43
cyluxxcyluxx
368
add a comment |
0
0
0
I want to display a list of different objects that inherit from the same abstract class in Angular. What is a good practice to do that?
Let's assume the following simple model:
abstract class Vehicle {
wheels: number;
}
class Car extends Vehicle {
isConvertible: boolean;
}
class Truck extends Vehicle {
freight: string;
}
My approach works, but it seems to be pretty ugly and not the oop way.
HTML Template:
<ul>
<li *ngFor="let vehicle of vehicles">
<p>{{vehicle.wheels}}</p>
<p *ngIf="isCar(vehicle)">{{asCar(vehicle).isConvertible}}</p>
<p *ngIf="isTruck(vehicle)">{{asTruck(vehicle).freight}}</p>
</li>
</ul>
Component:
@Component({
[...]
})
export class VehicleInfoComponent{
@Input() vehicles: Vehicles;
public isCar(vehicle: Vehicle): boolean {
return vehicle instanceof Car;
}
public isTruck(vehicle: Vehicle): boolean {
return vehicle instanceof Truck;
}
public asCar(vehicle: Vehicle): Car{
return vehicle as Car;
}
public asTruck(vehicle: Vehicle): Truck{
return vehicle as Truck;
}
}
Is there a better more oop way to do this?
angular typescript oop asked Nov 26 '18 at 6:43
cyluxxcyluxx
368
I want to display a list of different objects that inherit from the same abstract class in Angular. What is a good practice to do that?
Let's assume the following simple model:
abstract class Vehicle {
wheels: number;
}
class Car extends Vehicle {
isConvertible: boolean;
}
class Truck extends Vehicle {
freight: string;
}
My approach works, but it seems to be pretty ugly and not the oop way.
HTML Template:
<ul>
<li *ngFor="let vehicle of vehicles">
<p>{{vehicle.wheels}}</p>
<p *ngIf="isCar(vehicle)">{{asCar(vehicle).isConvertible}}</p>
<p *ngIf="isTruck(vehicle)">{{asTruck(vehicle).freight}}</p>
</li>
</ul>
Component:
@Component({
[...]
})
export class VehicleInfoComponent{
@Input() vehicles: Vehicles;
public isCar(vehicle: Vehicle): boolean {
return vehicle instanceof Car;
}
public isTruck(vehicle: Vehicle): boolean {
return vehicle instanceof Truck;
}
public asCar(vehicle: Vehicle): Car{
return vehicle as Car;
}
public asTruck(vehicle: Vehicle): Truck{
return vehicle as Truck;
}
}
Is there a better more oop way to do this?
angular typescript oop angular typescript oop asked Nov 26 '18 at 6:43
cyluxxcyluxx
368
asked Nov 26 '18 at 6:43
cyluxxcyluxx
368
edited Nov 26 '18 at 7:19
cyluxx
asked Nov 26 '18 at 6:43
cyluxxcyluxx
368
asked Nov 26 '18 at 6:43
cyluxxcyluxx
368
asked Nov 26 '18 at 6:43
cyluxxcyluxx
368
368
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
I don't know if it is better than yours or if it is any good.
Try and do what you want if you like it. Hopefully, it is useful.
@Component({
[...]
})
export class ActionInfoComponent{
@Input() vehicles: Vehicles
public getClass(vehicle: Vehicle): string{
return vehicle.constructor.name
}
}
and HTML
<ul>
<li *ngFor="let vehicle of vehicles">
<p>{{vehicle.wheels}}</p>
<p *ngIf="getClass(vehicle) == 'Car'">{{vehicle.isConvertible}}</p>
<p *ngIf="getClass(vehicle) == 'Truck'">{{vehicle.freight}}</p>
</li>
</ul>
answered Nov 26 '18 at 7:10
holydragonholydragon
2,69021230
Interesting! I will give it a try. At least I learned something new: The "constructor.name" attribute!
– cyluxx
Nov 26 '18 at 7:21
1
That won't compile in AOT (i.e. production) mode, because there is no isConvertible property in Vehicle.
– JB Nizet
Nov 26 '18 at 7:25
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53475930%2fhow-to-display-a-list-of-inheritance-objects-in-angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
I don't know if it is better than yours or if it is any good.
Try and do what you want if you like it. Hopefully, it is useful.
@Component({
[...]
})
export class ActionInfoComponent{
@Input() vehicles: Vehicles
public getClass(vehicle: Vehicle): string{
return vehicle.constructor.name
}
}
and HTML
<ul>
<li *ngFor="let vehicle of vehicles">
<p>{{vehicle.wheels}}</p>
<p *ngIf="getClass(vehicle) == 'Car'">{{vehicle.isConvertible}}</p>
<p *ngIf="getClass(vehicle) == 'Truck'">{{vehicle.freight}}</p>
</li>
</ul>
answered Nov 26 '18 at 7:10
holydragonholydragon
2,69021230
Interesting! I will give it a try. At least I learned something new: The "constructor.name" attribute!
– cyluxx
Nov 26 '18 at 7:21
1
That won't compile in AOT (i.e. production) mode, because there is no isConvertible property in Vehicle.
– JB Nizet
Nov 26 '18 at 7:25
add a comment |
1
I don't know if it is better than yours or if it is any good.
Try and do what you want if you like it. Hopefully, it is useful.
@Component({
[...]
})
export class ActionInfoComponent{
@Input() vehicles: Vehicles
public getClass(vehicle: Vehicle): string{
return vehicle.constructor.name
}
}
and HTML
<ul>
<li *ngFor="let vehicle of vehicles">
<p>{{vehicle.wheels}}</p>
<p *ngIf="getClass(vehicle) == 'Car'">{{vehicle.isConvertible}}</p>
<p *ngIf="getClass(vehicle) == 'Truck'">{{vehicle.freight}}</p>
</li>
</ul>
answered Nov 26 '18 at 7:10
holydragonholydragon
2,69021230
Interesting! I will give it a try. At least I learned something new: The "constructor.name" attribute!
– cyluxx
Nov 26 '18 at 7:21
1
That won't compile in AOT (i.e. production) mode, because there is no isConvertible property in Vehicle.
– JB Nizet
Nov 26 '18 at 7:25
add a comment |
1
1
1
I don't know if it is better than yours or if it is any good.
Try and do what you want if you like it. Hopefully, it is useful.
@Component({
[...]
})
export class ActionInfoComponent{
@Input() vehicles: Vehicles
public getClass(vehicle: Vehicle): string{
return vehicle.constructor.name
}
}
and HTML
<ul>
<li *ngFor="let vehicle of vehicles">
<p>{{vehicle.wheels}}</p>
<p *ngIf="getClass(vehicle) == 'Car'">{{vehicle.isConvertible}}</p>
<p *ngIf="getClass(vehicle) == 'Truck'">{{vehicle.freight}}</p>
</li>
</ul>
answered Nov 26 '18 at 7:10
holydragonholydragon
2,69021230
I don't know if it is better than yours or if it is any good.
Try and do what you want if you like it. Hopefully, it is useful.
@Component({
[...]
})
export class ActionInfoComponent{
@Input() vehicles: Vehicles
public getClass(vehicle: Vehicle): string{
return vehicle.constructor.name
}
}
and HTML
<ul>
<li *ngFor="let vehicle of vehicles">
<p>{{vehicle.wheels}}</p>
<p *ngIf="getClass(vehicle) == 'Car'">{{vehicle.isConvertible}}</p>
<p *ngIf="getClass(vehicle) == 'Truck'">{{vehicle.freight}}</p>
</li>
</ul>
answered Nov 26 '18 at 7:10
holydragonholydragon
2,69021230
answered Nov 26 '18 at 7:10
holydragonholydragon
2,69021230
answered Nov 26 '18 at 7:10
holydragonholydragon
2,69021230
answered Nov 26 '18 at 7:10
holydragonholydragon
2,69021230
2,69021230
Interesting! I will give it a try. At least I learned something new: The "constructor.name" attribute!
– cyluxx
Nov 26 '18 at 7:21
1
That won't compile in AOT (i.e. production) mode, because there is no isConvertible property in Vehicle.
– JB Nizet
Nov 26 '18 at 7:25
add a comment |
Interesting! I will give it a try. At least I learned something new: The "constructor.name" attribute!
– cyluxx
Nov 26 '18 at 7:21
1
That won't compile in AOT (i.e. production) mode, because there is no isConvertible property in Vehicle.
– JB Nizet
Nov 26 '18 at 7:25
Interesting! I will give it a try. At least I learned something new: The "constructor.name" attribute!
– cyluxx
Nov 26 '18 at 7:21
Interesting! I will give it a try. At least I learned something new: The "constructor.name" attribute!
– cyluxx
Nov 26 '18 at 7:21
1
1
That won't compile in AOT (i.e. production) mode, because there is no isConvertible property in Vehicle.
– JB Nizet
Nov 26 '18 at 7:25
That won't compile in AOT (i.e. production) mode, because there is no isConvertible property in Vehicle.
– JB Nizet
Nov 26 '18 at 7:25
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53475930%2fhow-to-display-a-list-of-inheritance-objects-in-angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
