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?

DeborahK · Accepted Answer · 2019-02-14 01:56:23Z

29

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;
  }

edited Feb 14, 2019 at 1:56

answered Feb 14, 2019 at 1:46

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DeborahK Over a year ago

Which part is returning undefined? Consider adding an update to your original question that shows your updated code and current issue.

kumar chandraketu Over a year ago

Thank you for your angular fundamental course at Plural sight.

Me Sa · Accepted Answer · 2019-12-13 17:11:36Z

2

you need only have 2 same functions, one with prefix set and another else with prefix get:

****in the Service User

private name: string;

public get info() {
  return name;
}

public set info(val) {
  this.name = val;
}


************ usage in other components or services
this.User.info = 'your name'; // for set

const yourName = this.User.info; // for get

answered Dec 13, 2019 at 17:11

Me Sa

1,10412 silver badges14 bronze badges

Collectives™ on Stack Overflow

How To Create Getter Setter In Angular

My Code login.service.ts

And My Code In Login.Component.ts

And My Code In Customer.Component.ts

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

My Code login.service.ts

And My Code In Login.Component.ts

And My Code In Customer.Component.ts

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related