CODEWITHSUNDEEP
angular
Srikanth Reddy
Srikanth Reddy

Reputation: 545

@Input() variable saying object is possibly undefined in Angular

I'm trying to print the object properties data in html. Unfortunately I'm facing the issue saying as like "object is possibly undefined in Angular". My component ts file :

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

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

  constructor() {  }
  @Input() selected? : Bike;
  ngOnInit(): void {
  }

}

My component html code :

<div class="row">
    <div class="col-md-12">

        {{selected | json}}  // Able to see the Json data.

        <h2>Bike Name : {{selected.name}}</h2>   //object is possibly undefined in Angular
        <h3>Bike Company : {{selected.Company}}</h3>  ////object is possibly undefined in Angular
        <h4>Top Speed : {{selected.topspeed}}</h4> //object is possibly undefined in Angular
        <h4>Description : {{selected.name}}</h4>  //object is possibly undefined in Angular
    </div>
</div>

Not getting the reasons why I'm getting the JSON data when I use {{selected | json}} & facing issue when I use it's properties {{selected.name}}.

What I tried : I tried by making the "selected" property as like "undefined" and nullable(!) type and even by initializing in constructor...

Upvotes: 0

Views: 2060

Answers (2)

Barremian
Barremian

Reputation: 31105

Try using a setter for the @Input variable.

export class BikedetailsComponent implements OnInit {
  public selected: Bike;

  @Input() set selected(bike: Bike) {
    this.selected = bike;
  }

  constructor() {  }

  ngOnInit(): void {
  }
}

And use *ngIf in the template to use the selected only if it's defined

<div *ngIf="!!selected" class="row">
  <div class="col-md-12">
    <h2>Bike Name : {{selected.name}}</h2>
    <h3>Bike Company : {{selected.Company}}</h3>
    <h4>Top Speed : {{selected.topspeed}}</h4>
    <h4>Description : {{selected.name}}</h4>
  </div>
</div>

Upvotes: 0

Philipp Meissner
Philipp Meissner

Reputation: 5482

You specifically defined the input variable to be possibly undefined.

@Input() selected? : Bike;

The questionmark (?) is just a shorthand for undefined, as in

@Input() selected: Bike | undefined;

Most likely that's also what you want, as possibly the input value may be undefined on the outside. If you are 100% sure the component is only initialized with an actual input value, you may change your signature to

@Input() selected: Bike;

but for the sake of type-safety, you can keep it possibly undefined and instead catch the undefined case in your template

<div class="row" ngIf="selected">
    <div class="col-md-12">

        {{selected | json}}  // Able to see the Json data.

        <h2>Bike Name : {{selected.name}}</h2>   //object is possibly undefined in Angular
        <h3>Bike Company : {{selected.Company}}</h3>  ////object is possibly undefined in Angular
        <h4>Top Speed : {{selected.topspeed}}</h4> //object is possibly undefined in Angular
        <h4>Description : {{selected.name}}</h4>  //object is possibly undefined in Angular
    </div>
</div>

or use the elvis operator like so

<h2>Bike Name : {{selected?.name}}</h2>

Upvotes: 4

Related Questions