CODEWITHSUNDEEP
angulartypescript
user11586200
user11586200

Reputation:

Assign value to objects made using Interface?

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


      }
    }

Upvotes: 1

Views: 1360

Answers (3)

Surjeet Bhadauriya
Surjeet Bhadauriya

Reputation: 7156

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

Upvotes: 2

Sharikov Vladislav
Sharikov Vladislav

Reputation: 7269

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

Upvotes: 1

Gaurang Dhorda
Gaurang Dhorda

Reputation: 3387

 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

Upvotes: 1

Related Questions