Can you extend HTML code with inheritance in Angular(5-6)[TypeScript]

Question

I have this Idea in my head, there is an ConfrimModal component, which extends the regular Modal.

code wise its very efficient, since I can write all the basic code(TypeScript) inside the modal, and then just add specific stuff to ConfirmModal to finish.

can I do something similar with the HTML, that there is a basic envelope(which is inherited from Modal, and then I add all the stuff I need inside using another template)?

modal.component.ts

@Component({
    selector: 'app-modal',
    template: '<section></section>'})

export abstract class ModalComponent{
      protected modalService: BsModalService;

      protected constructor(receivedModalService: BsModalService) {
        this.modalService = receivedModalService;
      }
}

confirm-modal.component.ts

@Component({   
    selector: 'app-confirm-modal',
    template: '<div>Hi its a test</div>',
    styleUrls: ['./confirm-modal.component.css'] })

export class ConfirmModalComponent extends ModalComponent implements OnInit {

  constructor(protected modalService: BsModalService) {
    super(modalService);   }

  ngOnInit() {   }

}

and I want the final result to be

<section><div>Hi its a test</div></section>

by using something in the spirit of OOP.

I tried using ng-content but found it to be inappropriate.

succeed by passing plain HTML, but it causes problems with the binding[besides being an unAngulary way to handle the situation].

Abylay · Accepted Answer · 2018-06-13 04:54:47Z

3

Ng-content don't support data binding from parent to child. You can do this without inheritance from parent component and with support data binding, using ng-template. Here example:

parent.component.html

<section>
    <ng-template [ngTemplateOutletContext]='{data: data}' [ngTemplateOutlet]="templateVariable"></ng-template>
</section>

parent.component.ts

@Input() data: any[];
@ContentChild(TemplateRef) templateVariable: TemplateRef<any>;

child.component.html

<ul>
    <li *ngFor="let item of data">{{item}}</li>
</ul>

child.component.ts

@Input() data: any[];

app.component.html

<app-parent [data]="items">
   <ng-template let-data="data">
       <!-- Here can be any component -->
       <app-child [data]="data"></app-child>  
   </ng-template>
</app-parent>

app.component.ts

items = ['One', 'Two', 'Three', 'Four'];

answered Jun 13, 2018 at 4:54

Abylay

3442 silver badges11 bronze badges

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

2 Comments

Mvin Over a year ago

This really helped my use-case. I was trying to extend a parent component to swap out a child component used, but wanted to keep everything else the same. Since you can't really extend HTML in Angular and I didn't want to copy the whole parent component template for such a minor change, I was looking for a more elegant solution. I first tried to pass in and create the required child component dynamically: stackoverflow.com/a/52118551/3099523, which works, but doesn't automatically update input bindings.

Mvin Over a year ago

Doing it like this DOES auto-update the bindings, so it seems the superior approach. Tip: If the let-params get excessive, you can also pass in this by another name, such as [ngTemplateOutletContext]='{t: this}', let-t="t" and on the child-component [randomBinding]="t.property"

Carnaru Valentin · Accepted Answer · 2018-06-13 04:14:41Z

1

I think a template with ng-content will solve this problem:

<div class="card card-block">
  <h4 class="card-title">
    <ng-content select=".setup"></ng-content> 
  </h4>
  <p class="card-text"
     [hidden]="data.hide">
    <ng-content select=".punchline"></ng-content> 
  </p>
  <a class="btn btn-primary"
     (click)="data.toggle()">Tell Me
  </a>
</div>

answered Jun 13, 2018 at 4:14

Carnaru Valentin

1,92524 silver badges28 bronze badges

1 Comment

Efim Rozovsky Over a year ago

ng-content is not enough, I mean I can use it like <app-modal><div></div></app-modal> but what I actually looking for is to use it as follows: <app-confirm-modal></app-confirm-modal> which would be turned to <app-modal><app-confirm-modal></app-confirm-modal></app-modal>

Ali · Accepted Answer · 2018-06-13 04:01:45Z

0

HTML is a type of markup language. It encapsulates, or “marks up” data within HTML tags, which define the data and describe its purpose on the webpage. The web browser then reads the HTML, which tells it things like which parts are headings, which parts are paragraphs, which parts are links, etc. The HTML describes the data to the browser, and the browser then displays the data accordingly.

So you can not treat it like any other language

reference: https://ischool.syr.edu/infospace/2012/04/05/why-html-is-not-a-programming-language/

answered Jun 13, 2018 at 4:01

Ali

2,6013 gold badges19 silver badges32 bronze badges

Collectives™ on Stack Overflow

Can you extend HTML code with inheritance in Angular(5-6)[TypeScript]

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related