title: How to fix the undefined variable when submitting in Angular
body: <p>I'm trying to make an app using angular and node, when I make a new register I need to show a message, in this case a snackbar because I'm using materialize for angular.</p>
  
  <p>I've declared a variable on my class and I give it value after I click submit, but when it calls the service and received its response, it doesn't set the value, the console keeps saying that the variable it's undefined. Here's the full code of that component.</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormControl, Validators } from '@angular/forms';
  import { Clase } from 'src/app/models/clase';
  import { ClaseService } from 'src/app/services/clase.service';
  import { Catalogo } from 'src/app/models/catalogo';
  import { MatSnackBar } from '@angular/material';
  
  @Component({
    selector: 'app-crear-cuenta',
    templateUrl: './crear-cuenta.component.html',
    styleUrls: ['./crear-cuenta.component.css'],
    providers: [ClaseService]
  })
  
  export class CreateCuentaComponent implements OnInit {
    public title = 'Nueva Cuenta'
    public register_catalogo: Catalogo;
    public register_clase: Clase;
    public alertMessage: string;
  
    constructor(
      public snackBar: MatSnackBar,
      private _claseService: ClaseService,
    ){
      this.register_catalogo = new Catalogo('', '', null);
      this.register_clase = new Clase('', '' ,'' , null);
    }
  
    ngOnInit(){
      //console.log(this.alertMessage)
    }
  
    public onSubmit() {
      let option = this.register_catalogo.codigo.length;
      switch(option) {
        case 1:
          this.CreateClase();
          //this.alertMessage = 'Hola Mundo'
          console.log(this.alertMessage)
          //Pop-up de alerta en la parte inferior
          this.openSnackBar(this.alertMessage, 'Cerrar')
        break;
      }
    }
  
    CreateClase() {
      //Enviar valores al modelo Clase
      this.register_clase.codigo = this.register_catalogo.codigo;
      this.register_clase.clase =  this.register_catalogo.cuenta;
      this.register_clase.saldo = this.register_catalogo.saldo;
      this._claseService.createClase(this.register_clase).subscribe(
        response =&gt; {
          //Crear la nueva clase
          let clase = response.claseStored;
          this.register_clase = clase;
  
          if(!clase._id) {
            this.alertMessage = 'Error al registrar la clase';
          } else {
            this.alertMessage = 'La clase se ha registrado con éxito';
            this.register_catalogo = new Catalogo('', '', null);
            this.register_clase = new Clase('', '' ,'' , null);   
          }
        },
        error =&gt; {
          var alertMessage = &lt;any&gt;error;
          if(alertMessage != null){
            var body = JSON.parse(error.body);
            this.alertMessage = body.message;
            this.register_catalogo = new Catalogo('', '', null);
            this.register_clase = new Clase('', '' ,'' , null);  
          }
        }
      )
    }
  
    openSnackBar(message: string, action: string) {
      this.snackBar.open(message, action, {
        duration: 2000,
      });
    }
  }
  </code></pre>
  
  <p>In order to have a result from calling my service, I expect to give a string value to alertMessage and show it on the snackbar.</p>