@Input value returns object. Can't access those objects on neighbour property - Angular 4

Question

Here I'm passing my input value through property binding.

<app-likes [user-details]="likesObj"></app-likes>

Here is my component class. I'm getting my input values in "userdetailsInput". I'm getting username as input. I want to assign that username to my "username :string" property. But It throws undefine.

But on ngOnInit() method I'm getting values.

export class LikesComponent implements OnInit {
    //'userdetailsInput' returns some object like this.{userName: "abc", emailId: "abc@gmail.com", likeCount: 0, likeStatus: false, isActive: false}.
      @Input('user-details') userdetailsInput: likedUserDetails;

    // I want to access values of above objects below. But all the below properties returns undefined
      username :string = this.userdetailsInput.userName;
      emailid :string = this.userdetailsInput.emailId;
      likeCount:number = this.userdetailsInput.likeCount;
      likeStatus:boolean = this.userdetailsInput.likeStatus;
      isActive :boolean = this.userdetailsInput.isActive;

      ngOnInit () {
        console.log(this.userdetailsInput); //this returns successful result.{userName: "abc", emailId: "abc@gmail.com", likeCount: 0, likeStatus: false, isActive: false}
      }

      likeImage (element) { 
        if(this.likeStatus) {
          this.likeCount = this.likeCount - 1;
          this.likeStatus = !this.likeStatus;
          this.isActive = !this.isActive;
        } else {
          this.likeCount = this.likeCount + 1;
          this.likeStatus = !this.likeStatus;
          this.isActive = !this.isActive;
        }

        console.log(`Like Count after changes: ${this.likeCount}`);
        console.log(`Like Status after changes: ${this.likeStatus}`);
      }

    }    

can anyone help me why it is not accessible. I'm new to angular 4.

Here I included error image. Please refer.