How to add a number by pressing the button

I want that when I press addTituloQueHacerButton() and I get another tituloQueHacer item, when I start the app it shows me TituloQueHacer1 and when I press the button I want that the new Item shows me Titulo Que Hacer 2 and if I create another one TituloQueHacer3 but it only shows me TituloQueHacer1 all the time, this is my code:

this is the html

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Añadir Crucero</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <form [formGroup]="addCruceroForm" (ngSubmit)="onSubmit()">

    <ion-item class="titulo" color="primary">
      <ion-title>Crucero</ion-title>
    </ion-item>

    <ion-item>
      <ion-input label="Nombre del Crucero:" [clearInput]="true" placeholder="Añade el nombre del Crucero" name="name" formControlName="name"></ion-input>
    </ion-item>

    <ion-item class="titulo" color="primary">
      <ion-title>Subtitulo</ion-title>
    </ion-item>

    <ion-item>
      <ion-input label="Subtitulo del Crucero" [clearInput]="true" placeholder="Añade el subtitulo del Crucero" name="subtitle" formControlName="subtitle"></ion-input>
    </ion-item>

    <ion-item class="titulo" color="primary">
      <ion-title>Imagen del Crucero</ion-title>
    </ion-item>

    <ion-item>
      <ion-input label="Imagen del Crucero" [clearInput]="true" placeholder="Añade la imagen del Crucero" name="imagenCrucero" formControlName="imagenCrucero"></ion-input>
    </ion-item>

    <ion-item class="titulo" color="primary">
      <ion-title>Descripción</ion-title>
    </ion-item>

    <ion-item>
      <ion-input label="Descripción del Crucero" [clearInput]="true" placeholder="Añade la descripción del Crucero" name="descripcion" formControlName="descripcion"></ion-input>
    </ion-item>

    <ion-item class="titulo" color="primary">
      <ion-title>Imagen de la Descripción</ion-title>
    </ion-item>

    <ion-item>
      <ion-input label="Imagen de la Descripción" [clearInput]="true" placeholder="Añade la imagen de la descripcion" name="imagenDescripcion" formControlName="imagenDescripcion"></ion-input>
    </ion-item>

    <ion-item class="titulo" color="primary">
      <ion-title>Título Que Hacer</ion-title>
    </ion-item>

Here is the problem in Título Que Hacer {{ numeroElementos(0) }} vvvvv

    <div formArrayName="tituloQueHacer">
      <div *ngFor="let control of getTituloQueHacerControls(); let i = index">
        <ion-item>
          <ion-input label="Título Que Hacer {{ numeroElementos(0) }}" [clearInput]="true" placeholder="Añade el titulo de Que Hacer" [formControlName]="i"></ion-input>
        </ion-item>
      </div>
    </div>

^^^^^^^^^^

    <div class="titulo">
      <ion-button (click)="addTituloQueHacerButton()">+</ion-button>
    </div>

    <ion-item class="titulo" color="primary">
      <ion-title>Imagen Que Hacer</ion-title>
    </ion-item>
    
    <div formArrayName="imagenQueHacer">
      <div *ngFor="let control of getImagenQueHacerControls(); let i = index">
        <ion-item>
          <ion-input label="Imagen Que Hacer" [clearInput]="true" placeholder="Añade la imagen de Que Hacer" [formControlName]="i"></ion-input>
        </ion-item>
      </div>
    </div>
    <div class="titulo">
      <ion-button (click)="addImagenQueHacerButton()">+</ion-button>
    </div>

    <ion-item class="titulo" color="primary">
      <ion-title>Descripción Que Hacer</ion-title>
    </ion-item>

    <div formArrayName="descripcionQueHacer">
      <div *ngFor="let control of getDescripcionQueHacerControls(); let i = index">
        <ion-item>
          <ion-input label="Descripcion Que Hacer" [clearInput]="true" placeholder="Añade la descripcion de Que Hacer" [formControlName]="i"></ion-input>
        </ion-item>
      </div>
    </div>
    <div class="titulo">
      <ion-button (click)="addDescripcionQueHacerButton()">+</ion-button>
    </div>

    <ion-item class="titulo" color="primary">
      <ion-title>Título Camarotes</ion-title>
    </ion-item>

    <div formArrayName="tituloCamarotes">
      <div *ngFor="let control of getTituloCamarotesControls(); let i = index">
        <ion-item>
          <ion-input label="Título Camarotes" [clearInput]="true" placeholder="Añade el titulo de Camarotes" [formControlName]="i"></ion-input>
        </ion-item>
      </div>
    </div>
    <div class="titulo">
      <ion-button (click)="addTituloCamarotesButton()">+</ion-button>
    </div>

    <ion-item class="titulo" color="primary">
      <ion-title>Descripción Camarotes</ion-title>
    </ion-item>

    <div formArrayName="descripcionCamarotes">
      <div *ngFor="let control of getDescripcionCamarotesControls(); let i = index">
        <ion-item>
          <ion-input label="Descripcion Camarotes" [clearInput]="true" placeholder="Añade la descripcion de Camarotes" [formControlName]="i"></ion-input>
        </ion-item>
      </div>
    </div>
    <div class="titulo">
      <ion-button (click)="addDescripcionCamarotesButton()">+</ion-button>
    </div>

    <ion-item class="titulo" color="primary">
      <ion-title>Imagen Camarotes</ion-title>
    </ion-item>

    <div formArrayName="imagenCamarotes">
      <div *ngFor="let control of getImagenCamarotesControls(); let i = index">
        <ion-item>
          <ion-input label="Imagen Camarotes" [clearInput]="true" placeholder="Añade la imagen de Camarotes" [formControlName]="i"></ion-input>
        </ion-item>
      </div>
    </div>
    <div class="titulo">
      <ion-button (click)="addImagenCamarotesButton()">+</ion-button>
    </div>
    <ion-item class="titulo" color="primary">
      <ion-title>Imagen de Planos</ion-title>
    </ion-item>

    <div formArrayName="planos">
      <div *ngFor="let control of getPlanosControls(); let i = index">
        <ion-item>
          <ion-input label="Imagen Planos" [clearInput]="true" placeholder="Añade la imagen de Planos" [formControlName]="i"></ion-input>
        </ion-item>
      </div>
    </div>
    <div class="titulo">
      <ion-button (click)="addPlanosButton()">+</ion-button>
    </div>
    <ion-item class="titulo" color="primary">
      <ion-title>Lugares</ion-title>
    </ion-item>

    <div formArrayName="lugares">
      <div *ngFor="let control of getLugaresControls(); let i = index">
        <ion-item>
          <ion-input label="Lugares" [clearInput]="true" placeholder="Añade el lugar" [formControlName]="i"></ion-input>
        </ion-item>
      </div>
    </div>
    <div class="titulo">
      <ion-button (click)="addLugaresButton()">+</ion-button>
    </div>

    <ion-item class="titulo" color="primary">
      <ion-title>Precio de Lugares</ion-title>
    </ion-item>

    <div formArrayName="precioLugares">
      <div *ngFor="let control of getPrecioLugaresControls(); let i = index">
        <ion-item>
          <ion-input label="Precio Lugares" [clearInput]="true" placeholder="Añade el precio de Lugares" [formControlName]="i" type="number"></ion-input>
        </ion-item>
      </div>
    </div>
    <div class="titulo">
      <ion-button (click)="addPrecioLugaresButton()">+</ion-button>
    </div>

    <ion-item class="titulo" color="primary">
      <ion-title>Puertos</ion-title>
    </ion-item>

    <div formArrayName="puertos">
      <div *ngFor="let control of getPuertosControls(); let i = index">
        <ion-item>
          <ion-input label="Puertos" [clearInput]="true" placeholder="Añade el puerto" [formControlName]="i"></ion-input>
        </ion-item>
      </div>
    </div>
    <div class="titulo">
      <ion-button (click)="addPuertosButton()">+</ion-button>
    </div>
        
    <div class="boton">
      <ion-button type="submit">Reservar</ion-button>
    </div>
  </form>
</ion-content>

this is the .ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormArray, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterLink } from '@angular/router';
import { AlertController } from '@ionic/angular';
import { CrucerosService } from '../cruceros.service';

@Component({
  selector: 'app-add-crucero',
  templateUrl: './add-crucero.page.html',
  styleUrls: ['./add-crucero.page.scss'],
  standalone: true,
  imports: [CommonModule, FormsModule, IonicModule, RouterLink, ReactiveFormsModule]
})
export class AddCruceroPage  {

  constructor(public crucerosService: CrucerosService, private alertController: AlertController) { }

  addCruceroForm = new FormGroup({
    name: new FormControl(""),
    subtitle: new FormControl(""), 
    imagenCrucero: new FormControl(""), 
    descripcion: new FormControl(""), 
    imagenDescripcion: new FormControl(""), 
    tituloQueHacer: new FormArray([new FormControl('')]), 
    imagenQueHacer: new FormArray([new FormControl('')]),
    descripcionQueHacer: new FormArray([new FormControl('')]),
    tituloCamarotes: new FormArray([new FormControl('')]),
    descripcionCamarotes: new FormArray([new FormControl('')]),
    imagenCamarotes: new FormArray([new FormControl('')]),
    planos: new FormArray([new FormControl('')]),
    lugares: new FormArray([new FormControl('')]),
    precioLugares: new FormArray([new FormControl('')]),
    puertos: new FormArray([new FormControl('')])
  })

And here too vvvvvv

  numeroElementos(numero: number){
    numero = numero + 1
    return numero
  }

^^^^^^

  addTituloQueHacerButton() {
    (this.addCruceroForm.get('tituloQueHacer') as FormArray).push(new FormControl(''));
  }

  getTituloQueHacerControls() {
    return (this.addCruceroForm.get('tituloQueHacer') as FormArray).controls;
  }

  addImagenQueHacerButton() {
    (this.addCruceroForm.get('imagenQueHacer') as FormArray).push(new FormControl(''));
  }

  getImagenQueHacerControls() {
    return (this.addCruceroForm.get('imagenQueHacer') as FormArray).controls;
  }

  addDescripcionQueHacerButton() {
    (this.addCruceroForm.get('descripcionQueHacer') as FormArray).push(new FormControl(''));
  }

  getDescripcionQueHacerControls() {
    return (this.addCruceroForm.get('descripcionQueHacer') as FormArray).controls;
  }

  addTituloCamarotesButton() {
    (this.addCruceroForm.get('tituloCamarotes') as FormArray).push(new FormControl(''));
  }

  getTituloCamarotesControls() {
    return (this.addCruceroForm.get('tituloCamarotes') as FormArray).controls;
  }
  addDescripcionCamarotesButton() {
    (this.addCruceroForm.get('descripcionCamarotes') as FormArray).push(new FormControl(''));
  }

  getDescripcionCamarotesControls() {
    return (this.addCruceroForm.get('descripcionCamarotes') as FormArray).controls;
  }
  addImagenCamarotesButton() {
    (this.addCruceroForm.get('imagenCamarotes') as FormArray).push(new FormControl(''));
  }

  getImagenCamarotesControls() {
    return (this.addCruceroForm.get('imagenCamarotes') as FormArray).controls;
  }
  addPlanosButton() {
    (this.addCruceroForm.get('planos') as FormArray).push(new FormControl(''));
  }

  getPlanosControls() {
    return (this.addCruceroForm.get('planos') as FormArray).controls;
  }
  addLugaresButton() {
    (this.addCruceroForm.get('lugares') as FormArray).push(new FormControl(''));
  }

  getLugaresControls() {
    return (this.addCruceroForm.get('lugares') as FormArray).controls;
  }
  addPrecioLugaresButton() {
    (this.addCruceroForm.get('precioLugares') as FormArray).push(new FormControl(''));
  }

  getPrecioLugaresControls() {
    return (this.addCruceroForm.get('precioLugares') as FormArray).controls;
  }
  addPuertosButton() {
    (this.addCruceroForm.get('puertos') as FormArray).push(new FormControl(''));
  }

  getPuertosControls() {
    return (this.addCruceroForm.get('puertos') as FormArray).controls;
  }

  private createArray(size: number): FormControl[] {
    const array = [];
    for (let i = 0; i < size; i++) {
      array.push(new FormControl(''));
    }
    return array;
  }

  async onSubmit(){
    await this.crucerosService.guardarCrucero(
      this.crucerosService.idCrucero,
      this.addCruceroForm.value.name,
      this.addCruceroForm.value.subtitle,
      this.addCruceroForm.value.imagenCrucero,
      this.addCruceroForm.value.descripcion,
      this.addCruceroForm.value.imagenDescripcion,
      this.addCruceroForm.value.tituloQueHacer,
      this.addCruceroForm.value.imagenQueHacer,
      this.addCruceroForm.value.descripcionQueHacer,
      this.addCruceroForm.value.tituloCamarotes,
      this.addCruceroForm.value.descripcionCamarotes,
      this.addCruceroForm.value.imagenCamarotes,
      this.addCruceroForm.value.planos,
      this.addCruceroForm.value.lugares,
      this.addCruceroForm.value.precioLugares,
      this.addCruceroForm.value.puertos
    )
    this.alertaReserva();
  }

  async alertaReserva() {
    const alert = await this.alertController.create({
      header: '¡Crucero Añadido Con Éxito!',
      buttons: ['Aceptar'],
    });

    await alert.present();
  }

}

Even if we increment the number inside the function, the value will still remain 0 during the next iteration of the for loop. Hence you should use ngfor index to do the numbering.

You have to use the let i = index, i property and just add 1 to it. But since we just want to add the numbers and not the string, I wrap it inside brackets.

Instead of {{ ... }} I changed it to use property binding, so we can define javascript inside the quotes. So we can concatenating a string ('Título Que Hacer ') along with the index + 1 ((i + 1)).

The brackets are just to avoid bugs created when mixing string and numbers, since + can be used for numerical operations and string concatenation.

      <ion-input
        [label]="'Título Que Hacer ' + (i + 1)"
        [clearInput]="true"
        placeholder="Añade el titulo de Que Hacer"
        [formControlName]="i"
      ></ion-input>

Stackblitz Demo