CODEWITHSUNDEEP
angulartypescriptoop
Efim Rozovsky
Efim Rozovsky

Reputation: 383

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

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].

Upvotes: 3

Views: 5308

Answers (3)

Abylay
Abylay

Reputation: 344

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'];

Upvotes: 3

Carnaru Valentin
Carnaru Valentin

Reputation: 1875

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>

Upvotes: 1

Ali
Ali

Reputation: 2591

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/

Upvotes: 0

Related Questions