ERROR TypeError: Cannot set property 'firstname' of undefined at new UserComponent

0
votes

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]';
  }
}
3
javascriptangulartypescript
Replace user: with user = - yurzui
@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. - Muhammad Shaeel

3 Answers

2
votes

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
votes

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
votes

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