Function inside parent is invoked when I open new modal window with child (same component...

I created activity.component.ts file that has selector: 'activity'.

In it's html have this:

<div matSuffix (click)="picker.open()">
<mat-form-field class="clicker">
<mat-date-range-input [formGroup]="range" [rangePicker]="picker">
<input matStartDate formControlName="start"/>
<input matEndDate formControlName="end"/>
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="picker">
</mat-datepicker-toggle>
<mat-date-range-picker #picker [calendarHeaderComponent]="dateHeaderC"
[touchUi]="xsOrSM">
</mat-date-range-picker>
</mat-form-field>
</div>



Then in typescript I have declared values like that:

range!: any;
dateHeaderC = DateHeaderComponent;


Then in OnInit I have this

this.range = cloneDeep(new FormGroup({
start: new FormControl(),
end: new FormControl(),
}));

this.range.valueChanges.pipe(
debounceTime(300)
).subscribe(() => {
const start = this.range.get('start')?.value;
const end = this.range.get('end')?.value;

if ((start && end) || (!start && !end)) {
if (end) {
end.setHours(23);
end.setMinutes(59);
end.setSeconds(59);
}

console.log('WHY TWICE HERE');

this.getTimeline(1);
}
});


Next to OnInit I have this function

openActivityDetails(activity: any, e: any) {
if (e) {
e.stopPropagation();
}

const dialogRef = this.dialog.open(ActivityParamModalComponent, {
data: { activity: activity, dialogRef: this },
panelClass: 'todo-dialog'
});

dialogRef.afterClosed()
}};


In ActivityParamModalComponent in it's html i have again declared

<activity></activity>


that invokes console log from parent... why ?

Continue reading...