In my Angular project, I have two components set up. Here is the code for both:
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
msg() {
console.log('my message');
}
}
app.component.html:
<app-child [message]="msg()"></app-child>
child.component.ts:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
@Input() message: string;
constructor() {}
ngOnInit() {
}
}
child.component.html
{{ message }}
The issue at hand is that the console message generated by msg() is being repeated 4 times instead of just once. How can this be fixed to ensure that msg() runs only one time?