Two Html Templates On One Component

Issue

How to bind an property of the same object on two html templates incase the second one will be in relation to the main (first) on as following:

export class ExampleNo2AddedHTMLComponent extends ExampleNo2Component {
  constructor() {super();}

All logic will be included into the main ExampleNo2Component only. Both components will be called by the selector: 'jg-example-no2-added-html'?

Also I copy the object of the second component to the first component one, but without success.

The complete code and more expainations can be find on: github.com or as running web-version on stacktest.de including comments.

Thank you for kind help and feel free to fork the code source.

Solution

You probably have a misunderstanding of how classes work in JS. When creating a class, a new instance is created. If this instance (1) is inherited from another instance (2), then it is part of a new instance (1; like copy). This instance (1) will not be associated with other instances (3, 4...), which are also heirs from the same parent (2). And will not be associated with parent (2) too.

In Angular you can use service:

• Component1 inject Service as "service"
• Component2 inject Service as "service"
• Service has property "variable"
• Component1 and Component2 will have "service.variable"

Or you can use one-way-data-binding for parent-child (@Input()).

---

In addition, I will say that using inheritance of one component from another component is the wrong approach. For inheritance, a directive is created for the component.

Answered By - Sergey Barabanov