Display an alert box when loading the page

Question

I am working with Angular and I need to display an alert box when loading the html of a component, but I can only do this from a button click, but I need the alert to open as soon as the page is loaded, with no need for interaction with any object. Follow my html code:

<form #entryForm="ngForm" class="form">
 <mat-card class="caixa fadeIn animated">
  <div class="container">

        <audio class="audio" id="voz" controls="controls">
            <source src="assets/voz1WAV.wav" type="audio/wav" />
            <source src="assets/voz1.mp3" type="audio/mp3" />
          Your browser does not support the audio element.
          </audio>
        <br><br><br><br><br>

      <label class="G"> G <label class="fonteQuestionario">(Grau global da disfonia)</label> </label>

        <mat-radio-group class="posicaoG" name="G">
            <mat-radio-button class="margem" value="0" disabled>0</mat-radio-button>
            <mat-radio-button class="margem" value="1" disabled>1</mat-radio-button>
            <mat-radio-button class="margem" value="2" disabled>2</mat-radio-button>
            <mat-radio-button class="margem" value="3" disabled>3</mat-radio-button>
    </mat-radio-group>
    <br>

      <label class="G"> R <label class="fonteQuestionario">(Rugosidade)  </label> </label>
      <mat-radio-group class="posicaoR" name="R">
        <mat-radio-button class="margem" value="0">0</mat-radio-button>
        <mat-radio-button class="margem" value="1">1</mat-radio-button>
        <mat-radio-button class="margem" value="2">2</mat-radio-button>
        <mat-radio-button class="margem" value="3">3</mat-radio-button>
</mat-radio-group>
    <br>

    <label class="G"> B <label class="fonteQuestionario">(Soprosidade)  </label> </label>
    <mat-radio-group class="posicaoB" name="B">
        <mat-radio-button class="margem" value="0">0</mat-radio-button>
        <mat-radio-button class="margem" value="1">1</mat-radio-button>
        <mat-radio-button class="margem" value="2">2</mat-radio-button>
        <mat-radio-button class="margem" value="3">3</mat-radio-button>
</mat-radio-group>
    <br>
        <label class="G"> A <label class="fonteQuestionario">(Astenia)  </label> </label>
        <mat-radio-group class="posicaoA" name="A">
            <mat-radio-button class="margem" value="0">0</mat-radio-button>
            <mat-radio-button class="margem" value="1">1</mat-radio-button>
            <mat-radio-button class="margem" value="2">2</mat-radio-button>
            <mat-radio-button class="margem" value="3">3</mat-radio-button>
    </mat-radio-group>
        <br>
         <label class="G"> S <label class="fonteQuestionario">(Tensão)  </label> </label>
         <mat-radio-group class="posicaoS" name="S">
            <mat-radio-button class="margem" value="0">0</mat-radio-button>
            <mat-radio-button class="margem" value="1">1</mat-radio-button>
            <mat-radio-button class="margem" value="2">2</mat-radio-button>
            <mat-radio-button class="margem" value="3">3</mat-radio-button>
    </mat-radio-group>
        <br>
         <label class="G"> I <label class="fonteQuestionario">(Instabilidade)  </label> </label>
         <mat-radio-group class="posicaoI" name="I">
            <mat-radio-button class="margem" value="0">0</mat-radio-button>
            <mat-radio-button class="margem" value="1">1</mat-radio-button>
            <mat-radio-button class="margem" value="2">2</mat-radio-button>
            <mat-radio-button class="margem" value="3">3</mat-radio-button>
    </mat-radio-group>
  </div>
  <div><br><br><br><br><br></div>

  <button class="previous"mat-mini-fab color="accent"> 
    <mat-icon>keyboard_backspace</mat-icon>
</button>

  <button class="next"mat-mini-fab color="accent"> 
    <mat-icon>check</mat-icon>
</button>    

    </mat-card>

I need that as soon as this form is called, be displayed an alert box on the screen, so that I can pass certain information.

Answer 1

Good morning, all right?

I’m sorry if I’m wrong, but I believe it’s using the ngOnInit, you can do it this way;

Go to the file ts of its component and add ngOnInit method

ngOnInit () {
  alert ('Componente Iniciado') // Seu código aqui
}

You can see more in the library of Angular