Angular html extends

Question

i've got this generic component

data-list.component.ts

export interface basic_data {name:string}
@Component({
  selector: 'data-list',
  templateUrl: './data-list.component.html',
  styleUrls: ['./data-list.component.scss'],
})
export class DataListComponent {

    public data: basic_data[] = [];
    constructor() {
    }
}

data-list.component.html

<div *ngFor="let item of data">
    <label>{{item.name}}</label>
<div>

I'd like to extend DataListComponent in order to display differents information depending on the type of data.

export interface ext_data extends basic_data {ext_value:string}
export class Ext_DataListComponent extends DataListComponent {

    public ext_data: ext_data[] = [];
    constructor() {
        super();
        this.data = this.ext_data;
    }
}

Is there a way to inherit the html as well so i can display the ext_data?

<div *ngFor="let item of data">
    <label>{{item.name}}</label>
    <label>{{item.ext_value}}</label>
<div>

I really don't want to copy/past the entire tempate page and logic

you can add data-list.component as a child to Ext_DataListComponent , so you don't need to rewrite the code — upog
– upog, Commented May 3, 2020 at 13:35

Chris · Accepted Answer · 2020-05-03 13:51:53Z

1

It is a bad practice to extend the component, and the template cannot be extended. Use the inputs to do this:

@Component({
  selector: 'data-list',
  templateUrl: './data-list.component.html',
  styleUrls: ['./data-list.component.scss'],
})
export class DataListComponent {
    @Input() data: basic_data[];
    @Input() isShowExt = false;
}

<div *ngFor="let item of data">
    <label>{{item.name}}</label>
    <label *ngIf="isShowExt">{{item.ext_value}}</label>
</div>

Example 1:

@Component({
  selector: 'example1',
  templateUrl: './example1.component.html',
  styleUrls: ['./example1.component.scss'],
})
export class Example1 {
    data = [
      { name: 'test_name' },
      { name: 'test_name' },
      { name: 'test_name' },
    ]
}

<data-list [data]="data"></data-list>

Example 2:

@Component({
  selector: 'example2',
  templateUrl: './example2.component.html',
  styleUrls: ['./example2.component.scss'],
})
export class Example2 {
    data = [
      { name: 'test_name', ext_value: 'value' },
      { name: 'test_name', ext_value: 'value' },
      { name: 'test_name', ext_value: 'value' },
    ]
}

<data-list [data]="data" [isShowExt]="true"></data-list>

edited May 3, 2020 at 13:51

answered May 3, 2020 at 13:30

Chris

2,45616 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Bastok Over a year ago

bad practice? What are we supposed to do? Copy/past?

Ploppy Over a year ago

You can use a sub component to show the data in a different way. You could switch between components using the ngSwith directive.

Chris Over a year ago

@Bastok because the decorators do not extends

Bastok Over a year ago

@Chris, and why should it be a problem? Ok inheritance might be a bad practice for some reasons, but copy/pasting is the worst solution ever.

Chris Over a year ago

@Bastok but where will you see in the implementation above copy/paste

|

Collectives™ on Stack Overflow

Angular html extends

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related