Angular extends parent component HTML

Question

I know this is an old question but I cant find a simple answer and it seems so strange.

I have a father component with its own html and several component that extends this one.

I need something like this:

Father's HTML template

<p class="father"> somethings </p>
<child-component></child-component> <-- some kind of angular tag

class ChildComponent extends FatherComponent

<p> Im a Child </p>

Result rendering Child

<p class="father"> somethings </p>
<p> Im a Child </p>

Is this so hard to get?

UPDATE AS ASKED

@Component({
    selector: 'BaseComponent',
    templateUrl: 'BaseComponent.html',
})
export class BaseComponent implements OnInit 
{
...
}



@Component({
    selector      : 'ChildBaseComponent ',
    templateUrl   : 'ChildBaseComponent .html',
  })
export class ChildBaseComponent extends BaseComponent
{
   ....
}

Updated above. It is so simple I was thinking it wasn't important. — EviSvil
– EviSvil, Commented May 5, 2020 at 13:10
Notice your selector, in order to reference a component you should use the selector. BTW, according to the naming convention it should be something like "child-base" like demonstrated in the example. Then in order to use it just call it <child-base></child-base> — Eytan
– Eytan, Commented May 5, 2020 at 14:05

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

I think what you're looking for here is content projection. You can find plenty of articles about this topic. I modified you examples slightly

@Component({
    selector: 'BaseComponent',
    template: `
               <p class="father"> somethings </p>
               <ng-content></ng-content>
               `,
})
export class BaseComponent implements OnInit 
{
...
}



@Component({
    selector      : 'ChildBaseComponent',
    templateUrl   : `
                      <BaseComponent><p> Im a Child </p></BaseComponent>`,
  })
export class ChildComponent
{
@ViewChild(BaseComponent) public baseComponent: BaseComponent
   
}

The thing is Angular doesn't inherit metadata of the parent class, it overrides it. There plenty of tools angular provides to deal with code sharing. You can always access your parent component from the child thanks to ViewChild decorator. And as the answer to your question - no, there is no such tag.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 5, 2020 at 14:40

Steve

6024 silver badges6 bronze badges

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

2 Comments

EviSvil Over a year ago

Thanks for the answer. Unfortunally I was hooping Angular had some sort of Partial View like others MVC instead of repeating the father's selector in every components extending it.

Steve Over a year ago

The framework is evolving, maybe it will be supported in the future.

Collectives™ on Stack Overflow

Angular extends parent component HTML

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related