Why is the constructor being called repeatedly?

Question

Angular

There are two components. One is inherited from the other. An example is here .
As you can see, the constructor of each outputs a phrase to the console. Please explain why the constructor of the HelloComponent component works twice? This can be seen from the message in the console
Is this a normal course of events, can and should this be avoided?

Answer 1

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent extends HelloComponent { // Вот тут
  name = 'Angular 6';

  constructor() {
    super(); // Первый console.log('...')
    console.log('constructor app');
  }
}

You have inherited AppComponent from HelloComponent. Called super(). Then we pushed the HelloComponent into the template again:

<hello name="{{ name }}"></hello> // Второй console.log('...')
<p>
  Start editing to see some magic happen :)
</p>