Display an alert box when loading page

0

I'm working with Angular and need to display an alert box when loading a component's html, however I can only do this from a button click, however I need the alert to open as soon as the page loads , without the need for interaction with any object. Here is 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 as soon as this form is called, an alert box is displayed on the screen, so I can pass on certain information.

    
asked by anonymous 05.11.2018 / 12:17

1 answer

2
Good morning, how are you?

I'm sorry if I'm wrong, but I believe it's using ngOnInit , you can do it as follows;

Go to the ts file of your component and add the ngOnInit

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

You can see more in the Angular library

    
05.11.2018 / 12:26