How to create the first element in angular without declaring it in ts?

Question

Angular

I have an array object:

Lead = {
comment: []
}

I want to display an input for this array in order to drive some kind of string there.

<mat-form-field *ngFor="let n of Lead.comment">
     <input type="tel" matInput [(ngModel)]="Lead.comment[n]" [ngModelOptions]="{standalone: true}" placeholder="comment">
</mat-form-field>

Naturally, it will not be displayed, because this array is empty.
I modify this array so that the first element can be entered:

Lead = {
comment: ['']
}

Everything is fine, the input is everything is fine!
Let's say I saved the Lead to the database without entering anything into this input.
Next, I made a page for displaying all leads, and made the input field for a new comment in a different way, declaring some new variable, and in case of clicking on some button, I push a new comment to the Lead.comment array.
As a result, I don’t like the first method when creating a new element, since an empty string will be stored in the database, and if I want to display some kind of Lead, it will give me an empty comment. And I don't like the second method either, because there will be a lot of elements on the page.
How is it done correctly?

Answer 1

Create another block with one of your inputs, and *ngIf="Lead?.comment?.length===0" on it
. show input if the array exists and is empty.
And if the array is not empty, then your let n of will show