0

I am new to Angular. I have created a simple UserComponent and in the class there is an Object named user which contains all the properties of a user like firstname , lastname , age ,email but when i try to access those properties in the class constructor and set their values i get an error in the console saying cannot set the property of firstname of undefined or cannot set property of lastname of undefined. i don't know what the problem is. Here's the code :

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

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css'],
})
export class UserComponent {
  user: {
    firstname: string;
    lastname: string;
    age: number;
    email: string;
  };

  constructor() {
    this.user.firstname = 'Muhammad';
    this.user.lastname = 'Shaeel';
    this.user.age = 23;
    this.user.email = '[email protected]';
  }
}
2
  • Replace user: with user =
    – yurzui
    Commented Oct 18, 2020 at 17:03
  • @yurzui still getting the error when i change user = i get a red squiggly line under all the types like string , number indicating compile time error. Commented Oct 18, 2020 at 17:09

4 Answers 4

2

You defined a type, but its value is still undefined

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

export class User {
    constructor(
        public firstname: string,
        public lastname: string,
        public age: number,
        public email: string,
    ) { }
}

@Component({
    selector: 'app-user',
    templateUrl: './user.component.html',
    styleUrls: ['./user.component.css'],
})
export class UserComponent {
    user: User;
    // Another option
    // user = new User('Muhammad', 'Shaeel', 23, '[email protected]');

    constructor() {
        this.user = new User('Muhammad', 'Shaeel', 23, '[email protected]');
    }
}

Stackblitz example

0

The user object is empty,

Try below

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

export interface IUser: {
    firstname: string;
    lastname: string;
    age: number;
    email: string;
  };

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css'],
})
export class UserComponent {
  user: IUser = {
    firstname: '',
    lastname: '',
    age: null,
    email: ''
  };

  constructor() {
    this.user.firstname = 'Muhammad';
    this.user.lastname = 'Shaeel';
    this.user.age = 23;
    this.user.email = '[email protected]';
  }
}
0

If you simply want to have user object inside UserComponent without declaring a separate class for it, you could do it like this also:

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

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent {
  user = {
    firstname: "",
    lastname: "",
    age: -1,
    email: ""
  };

  constructor() {
    this.user.firstname = 'Muhammad';
    this.user.lastname = 'Shaeel';
    this.user.age = 23;
    this.user.email = '[email protected]';
  }
}
0

this worked for me

export class UserComponent {
user = {
firstname: '',
lastname: '',
age: 0,
email: ''

};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.