How to access global variables assigned in one function in another function in angular

Question

I am new to angular.

I have form-control.component.ts file in that I have declared these 3 variables globally

 name1:any;
 pw :any';
 g :any;

these 3 variables I have used in one function

displayAccountInfo(account:Account)
{
 this.name1=account.name;
 this.pw=account.password;
 this.g=account.gender;
}

I want to display value of these 3 varible in ClickMe() function

result:string;

ClickMe():void {
  this.result =' *saved dataItems:  ' + this.name1 +this.pw +this.g ;
}

but I am getting these output

 *saved dataItems: undefined undefined undefined

I have to display values which get assigned to these variable in displayAccountInfo() function

I have called displayAccountInfo() in Save method

 Save():void{
 let account:Account=this.registerform.value;
 account.languages=this.checkedList;
 this.displayAccountInfo(account);

}

And these is entire file

import { Component, OnInit } from '@angular/core';
import {Account}  from './account.entity'
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';

 @Component({
 selector: 'app-form-control',
 templateUrl: './form-control.component.html',
 styleUrls: ['./form-control.component.css']
})
export class FormControlComponent implements OnInit {

genders:any;
languages:any;
registerform:FormGroup;
checkedList:string[];
certificates:any;

name1:any;
pw :any;
g :any;

constructor(
 private formbuilder:FormBuilder) {  }

 ngOnInit() {

      this.checkedList=[];

      this.certificates=[
        {value:'c1' ,display: 'Microsoft'},
        {value:'c2' ,display: 'Oracle'},
        {value:'c3' ,display: 'Angular'},
        {value:'c4' ,display: 'Java'},
      ];

      this.genders=[
        {value:'F' ,display:'Female'},
        {value:'M' ,display:'Male'}
      ];

      this.languages=[
        {id:'1' ,name:'C#'},
        {id:'2' ,name:'Java'},
        {id:'3' ,name:'typescript'},
        {id:'4' ,name:'Html'}
      ];

    this.registerform=this.formbuilder.group({
        name:'',
        password:'',
        gender:this.genders[0].value,
        languages:[],
        certificates:[]
    });


  }

Save():void{
 let account:Account=this.registerform.value;
 account.languages=this.checkedList;
 this.displayAccountInfo(account);

}

displayAccountInfo(account:Account)
{
 this.name1=account.name;
 this.pw=account.password;
 this.g=account.gender;

  for(var i=0; i< account.languages.length; i++)
  {
    var lang=account.languages[i];
  }

  for(var j=0; j< account.certificates.length; j++)
  {
    var cer=account.certificates[i];
  }

 }

 Checkboxchange(option,event)
{
if(event.target.checked)
{
  this.checkedList.push(option.id);
}
else
{
  for(var i=0;i<this.languages.length;i++)
  {
      if(this.checkedList[i]==option.id)
      {
        this.checkedList.splice(i,1);
      }
  }
} 
}


result:string;

ClickMe():void {
  this.result =' *saved dataItems:  ' + this.name1 +this.pw +this.g ;
 }


}

Answer 1

Just create formcontrol.ts as followed

export var formcontrol = {
  name1: 'name',
  pw: 'pw',
  g: 'gender',

And then you can simlpy import it and use it

import { formcontrol } from 'your/path/formcontrol';

displayAccountInfo(account:Account) {
 formcontrol.name1 = account.name;
 formcontrol.pw = account.password;
 formcontrol.g = account.gender;
}

I personally would not use it that way i would create a service that would serve this vars for me.
Here you can read more about angular services