How to get submitted number into the input form outside modal angular

I'm trying to make modal that have button and input manual number, so when get submit the number would be on the input outside the modal. and then can be use for many stuff like activate time minutes with the number and more. I try so many ways but I only can get the number from console.log for now and prevent from redirect to ? when i press the button. When I try input manual the number is null.

How to make a good modal that can get a number to the input outside the modal?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<div class="flex flex-col  w-full justify-center my-2" *ngIf="status === 'Preparing'">
<button mat-raised-button (click)="openDialog('0ms', '0ms')">Input Target Time ( Button )</button>
<form class="p-1" [formGroup]="timerForm">
<div class="mb-2">Target Time (minutes)</div>
<button
(click)="clickButton(60)"
class="bg-green-400 hover:bg-green-300 cursor-pointer w-10 h-10 rounded-md mx-2"
>
60
</button>
<button
(click)="clickButton(120)"
class="bg-green-400 hover:bg-green-300 cursor-pointer w-10 h-10 rounded-md mx-2"
>
120
</button>
<button
(click)="clickButton(180)"
class="bg-green-400 hover:bg-green-300 cursor-pointer w-10 h-10 rounded-md mx-2"
>
180
</button>
<button
(click)="clickButton(240)"
class="bg-green-400 hover:bg-green-300 cursor-pointer w-10 h-10 rounded-md mx-2"
>
240
</button>
<div>
<input
class="border-2 mt-3 w-full px-3 py-1 rounded-md text-black"
formControlName="timer"
[value]="timerForm.value.timer"
type="number"
placeholder="time charging on minutes"
/>
</div>
</form>
</div>

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<h1 mat-dialog-title>Choose Target Time</h1>
<div mat-dialog-content>
<button
(click)="clickButton(60)"
class="bg-green-400 hover:bg-green-300 cursor-pointer w-10 h-10 rounded-md mx-2"
>
60
</button>
<button
(click)="clickButton(120)"
class="bg-green-400 hover:bg-green-300 cursor-pointer w-10 h-10 rounded-md mx-2"
>
120
</button>
<button
(click)="clickButton(180)"
class="bg-green-400 hover:bg-green-300 cursor-pointer w-10 h-10 rounded-md mx-2"
>
180
</button>
<button
(click)="clickButton(240)"
class="bg-green-400 hover:bg-green-300 cursor-pointer w-10 h-10 rounded-md mx-2"
>
240
</button>
<form class="p-1" formGroup="timerForm">
<div class="mb-2">Target Time (minutes)</div>
<div>
<input
class="border-2 mt-3 w-full px-3 py-1 rounded-md"
formControlName="timer"
[value]="timerForm.value.timer"
type="number"
placeholder="time charging on minutes"
/>
</div>
</form>
<button type="submit" (click)="handleClose()" mat-dialog-close [disabled]="false" mat-button>Submit</button>
</div>

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormControl, FormGroup, NgForm } from '@angular/forms';
import {MatDialog, MatDialogRef} from '@angular/material/dialog';
@Component({
selector: 'dialog-animations-example-dialog',
templateUrl: 'dialog-animations-example-dialog.html',
})
export class DialogAnimationsExampleDialog implements OnInit{
public active = false;
constructor(public dialogRef: MatDialogRef<DialogAnimationsExampleDialog>) {}
public timerForm: FormGroup = new FormGroup({
timer: new FormControl()
});
ngOnInit(): void {
}
@Output() cancel: EventEmitter<undefined> = new EventEmitter();
public onCancel(e: PointerEvent): void {
e.preventDefault();
this.closeForm();
}
public closeForm(): void {
this.active = false;
}
public clickButton(num: number) {
this.timerForm.value.timer = num
this.closeForm();
}
public handleClose(){
console.log(this.timerForm.value.timer)
this.dialogRef.close()
}
}

<!-- end snippet -->

You can retrieve the result from the modalRef you create when you open the modal, subscribing to afterCLosed():

    const dialogRef = this.dialog.open(DialogAnimationsExampleDialog, {
data: {inputValue: this.inputValue},
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed, result: ', result);
});