Put sticky hyphens in text input - html

Question

I need to put sticky hyphens in a text input. I attached an image of what I need. I have marked in red what should be fixed. The first hyphen should be after three number gaps, the next after two gaps, and so on.
The numbers appear as I click on each number but I want the dashes to appear by default.
I have tried to do it with a span but I have not succeeded.
<div class="row">
<p id="p" style="font-size: 30px;">Introduzca ubicación:<input style="margin-left: 10px; font-size: 30px;"
type="text" [value]="codeNum" id="code" placeholder="___-__-__-__-__">
<button type="button" style="margin-left: 10px; font-size: 30px; border: white 3px solid;"
class="btn btn-dark btn-lg" (click)="clear()">Borrar</button>
<button type="button" style="margin-left: 10px; font-size: 30px; border: white 3px solid;"
class="btn btn-dark btn-lg" (click)="allClear()">Borrar todo</button>
</p>
</div>
</div>
<div class="calculator-keys">
<button type="button" class="btn btn-light waves-effect" (click)="pressNum('0')" value="0">0</button>
<button type="button" class="btn btn-light waves-effect" (click)="pressNum('1')" value="1">1</button>
<button type="button" class="btn btn-light waves-effect" (click)="pressNum('2')" value="2">2</button>
<button type="button" class="btn btn-light waves-effect" (click)="pressNum('3')" value="3">3</button>
<button type="button" class="btn btn-light waves-effect" (click)="pressNum('4')" value="4">4</button>
<button type="button" class="btn btn-light waves-effect" (click)="pressNum('5')" value="5">5</button>
<button type="button" class="btn btn-light waves-effect" (click)="pressNum('6')" value="6">6</button>
<button type="button" class="btn btn-light waves-effect" (click)="pressNum('7')" value="7">7</button>
<button type="button" class="btn btn-light waves-effect" (click)="pressNum('8')" value="8">8</button>
<button type="button" class="btn btn-light waves-effect" (click)="pressNum('9')" value="9">9</button>
</div>
Thank you

Answer 1

If you're open to using packages there's some out there that might fit your needs. E.g. ngx-mask
npm i --save ngx-mask
then you can do
<input type="text" mask="000-00-00-00-00" [(ngModel)]="codeNum">
OR
<p>{{ codeNum | mask: '000-00-00-00-00' }}</p>
Example: https://stackblitz.com/edit/angular-ngx-mask-example-zd89hh?file=src%2Fapp%2Fapp.component.html