Assign value to objects made using Interface?

Question

It's been hours since I am trying to figure out solution to create objects. can't find anything online. I am not able to access user1 outside of the constructor. Please help.

        import { Component, OnInit, Input } from '@angular/core';

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

      nameVar:string;
      passwordVar:string;
      @Input() test:string;



      constructor() {
        interface UserInface{
          name:string,
          password:string
        };
        var user1: UserInface;
       }


      ngOnInit() {

      }
      //function for button click
      submitBtn(){ 
          **//I am getting error here because i am trying to assign values to object.**
**//error "Property 'user1' does not exist on type "**
          this.user1.name = this.nameVar;
          this.user1.password = this.passwordVar


      }
    }

What is this in the submitBtn? Is it instance of FirstFolderComponent class? — Sharikov Vladislav
– Sharikov Vladislav, Commented Dec 3, 2019 at 7:26
you have defined user1 in constructor scope, thats why you can not access its value outside of scope. define user1 as a property in above constructor. so that, you can access value anywhere — Gaurang Dhorda
– Gaurang Dhorda, Commented Dec 3, 2019 at 7:26
An interface is just a contract you agree about the types of your variables. It doesn’t exist in the JavaScript generated. Define your interface / model outside your component class. You can define class constructors that use the interface (to enforce types in typescript) to do something similar to what you’re attempting. — Andrew Allen
– Andrew Allen, Commented Dec 3, 2019 at 7:28
Why do you want to use an interface instead of a class? If you want to create new objects anyway I would tend to use a class User. If you need a new user object/instance just create it with this.user = new User(); the user class can serve as kind of interface too. You can still use the object literal to create a new user object if you want: this.user = {name : 'thename', password: 'thepw'} — spierala
– spierala, Commented Dec 3, 2019 at 8:01

Surjeet Bhadauriya · Accepted Answer · 2019-12-03 07:46:29Z

2

Make your interface outside the class and export it and then use it inside the class. See below, I have made the interface outside the class and exported it.

Stackblitz demo

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-first-folder',
  templateUrl: './first-folder.component.html',
  styleUrls: ['./first-folder.component.css']
})

export class FirstFolderComponent implements OnInit {    
  nameVar:string;
  passwordVar:string;
  @Input() test:string;
  user1: UserInface;


   constructor() {
     this.user1 = {name: '', password: ''}; // You can remove this line if you don't want 
   }

   ngOnInit() {}

   submitBtn(){ 
     this.user1 = {name: 'Surjeet', password: 'Singh'};
    }
}

// paste this code at the end of the component
   export interface UserInface{
     name:string,
     password:string
   };

edited Dec 3, 2019 at 7:46

answered Dec 3, 2019 at 7:37

Surjeet Bhadauriya

7,2223 gold badges39 silver badges54 bronze badges

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

Comments

Sharikov Vladislav · Accepted Answer · 2019-12-03 07:29:33Z

1

 import { Component, OnInit, Input } from '@angular/core';

 export interface UserInface{
      name:string,
      password:string
 };

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

  nameVar:string;
  passwordVar:string;
  user1: UserInface;
  @Input() test:string;

  constructor() {
  }


  ngOnInit() {

  }
  //function for button click
  submitBtn(){ 
      **//I am getting error here because i am trying to assign values to object.**
       **//error "Property 'user1' does not exist on type "**
      this.user1.name = this.nameVar;
      this.user1.password = this.passwordVar

edited Dec 3, 2019 at 7:29

Sharikov Vladislav

7,2999 gold badges53 silver badges92 bronze badges

answered Dec 3, 2019 at 7:29

Gaurang Dhorda

3,4072 gold badges24 silver badges26 bronze badges

1 Comment

Sharikov Vladislav Over a year ago

user1 is undefined. Can you fix this please? If you try to assign any property of undefined type you get error.

Sharikov Vladislav · Accepted Answer · 2019-12-03 07:34:29Z

Why you solution does not work?

You defined var user1 in constructor and it is local variable for the constructor. You nave to create user1 as class member (class property). So you have to use it as this.user1 in constructor if you want it to be available in other methods of the class.

You need the following code:

    import { Component, OnInit, Input } from '@angular/core';

    interface UserInface{
      name:string,
      password:string
    };

    @Component({
      selector: 'app-first-folder',
      templateUrl: './first-folder.component.html',
      styleUrls: ['./first-folder.component.css']
    })
    export class FirstFolderComponent implements OnInit {
      user1: UserInface = {};
      nameVar:string;
      passwordVar:string;
      @Input() test:string;

      //function for button click
      submitBtn(){ 
          this.user1.name = this.nameVar;
          this.user1.password = this.passwordVar
      }
    }

Note, that assign empty object at the init of the user1. You also can do this in constructor like:

constructor() {
  this.user1 = {};
}

Collectives™ on Stack Overflow

Assign value to objects made using Interface?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related