How To Create Getter Setter In Angular

Question

I'm using Angular 7. I want to get and set variable in typescript

My Code login.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LoginService {
  public username:string;
  public token:string;
  public fullname:string;
  constructor() { }
  set setUser(val: string){
    this.username = val;
  }
  set setToken(val:string){
    this.token=val;
  }
  set setFullName(val:string){
    this.fullname=val;
  }
  get getUser():string{
    return this.username;
  }
  get getToken():string{
    return this.token;
  }
  get getFullName():string{
    return this.fullname;
  }
}

And My Code In Login.Component.ts

fLogin(user, pass) {
    this.users.setUser=user;
}

And My Code In Customer.Component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Http, Headers } from "@angular/http";
import {LoginService} from "../login.service"
import { NgLocalization } from '@angular/common';
@Component({
  selector: 'app-customers',
  templateUrl: './customers.component.html',
  styleUrls: ['./customers.component.css']
})
export class CustomersComponent implements OnInit {
  constructor(public user:LoginService) {

  }
  loadData() {
    console.log(this.user.getUser)
  }
    ngOnInit() {
    this.loadData();
  }
}

I expect Set Value In Login.Component.ts And Get Value in Customer.Component.ts

How to it working or the other it working?

Answer 1

1) Ensure your login.component.ts file also injects the service.

constructor(public user:LoginService)

2) Ensure that no module or component has a providers array containing your service.

If you register the service using the providedIn: 'root' as you have, and don't register the service again in any providers array, then the service should be a singleton and work as you expect.

Also, the naming of your getters and setters is incorrect. The getter and setter should have the same name, as they are just another way to define a property:

  get user():string{
    return this.username;
  }
  set user(val: string){
    this.username = val;
  }
  get token():string{
    return this.token;
  }
  set token(val:string){
    this.token=val;
  }
  get fullName():string{
    return this.fullname;
  }
  set fullName(val:string){
    this.fullname=val;
  }

You then access those getter/setter properties just like any other declared properties.

 this.fullName = "Joe Smith"; // to set the value and call the setter

 console.log(this.fullName); // to reference the value.

In your customer component:

  constructor(public loginService:LoginService) {

  }
  loadData() {
    console.log(this.loginService.user)
  }

NOTE: I renamed your constructor parameter to better identify it.

In your login component:

  constructor(public loginService:LoginService) {

  }

  fLogin(user, pass) {
     this.loginService.user = user;
  }