What is causing the issue of undefined values when using a hardcoded string for property binding in a component?

Question

What is causing the issue of undefined values when using a hardcoded string for property binding in a component?

I am currently working with a component named "myComponent" which is essentially a drop down button. I want to utilize this component in two different areas of my project - first in the navigation bar and then in the side nav specifically for mobile view. However, I need to dynamically change the image inside the component based on where it is being displayed, either in the navigation or in the side nav.

Within the myComponent, I am using

@Input() imgName: string = "imageOne"

. In the HTML template of the component, I am interpolating the variable like so

<img ...src="../{imageOne}.png"

The issue arises when I render

<app-my-component [imgName]="imageTwo"></app-my-component>

from the navigation component and find that the value of imgName is undefined. Can anyone provide insight into why this might be happening?

https://i.sstatic.net/m4EPy.png

`export class MyComponent implements OnInit, AfterViewInit {
  @Input() public imgName: string = "img_one";  
  constructor() { }
  ngOnInit() {
    console.log("Inside ng on init");
  }
  ngAfterViewInit(){
    console.log("imgName value is: ${this.imgName}")
  }
}
`

This is how I am rendering my component:

<app-my-component [imgName]="imageTwo"></app-my-component>

angular typescript

Answer 1

Answer №1

The property value of this.imageTwo is being bound, but this property does not actually exist. Therefore, the value is undefined.

Avoid using square brackets when dealing with string constants.

<app-my-component imgName="imageTwo"></app-my-component>
                             ^^^ = should be a string literal

Answer 2

The property value of this.imageTwo is being bound, but this property does not actually exist. Therefore, the value is undefined.

Avoid using square brackets when dealing with string constants.

<app-my-component imgName="imageTwo"></app-my-component>
                             ^^^ = should be a string literal

Answer 3

Answer №2

Alongside cgTag's response:

It is advisable to establish your default value within the ngOnChanges lifecycle method as well.

class CustomComponent implements OnInit, AfterViewInit {
  // kept default value in a static property to prevent redundancy
  private static initialImgName: string = "img_one";

  @Input() public imgName: string = CustomComponent.initialImgName;  

  constructor() {
    // once TypeScript is transpiled to JavaScript,
    // the imgName property will be initialized here
  }

  ngOnChanges(values: SimpleChanges) {
    // note that ngOnChanges does not trigger
    // if the component is initiated without any bindings

    // this function runs every time imgName changes,
    // to execute only once, check with values.imgName.isFirstChange()
    if (values.imgName && values.imgName.currentValue === undefined) {
       this.imgName = CustomComponent.initialImgName;
    }
  }

  ngOnInit() {
    console.log("Executing ng on init");
  }

  ngAfterViewInit() {
    console.log(`The value of imgName is: ${this.imgName}`)
  }
}

Answer 4

Alongside cgTag's response:

It is advisable to establish your default value within the ngOnChanges lifecycle method as well.

class CustomComponent implements OnInit, AfterViewInit {
  // kept default value in a static property to prevent redundancy
  private static initialImgName: string = "img_one";

  @Input() public imgName: string = CustomComponent.initialImgName;  

  constructor() {
    // once TypeScript is transpiled to JavaScript,
    // the imgName property will be initialized here
  }

  ngOnChanges(values: SimpleChanges) {
    // note that ngOnChanges does not trigger
    // if the component is initiated without any bindings

    // this function runs every time imgName changes,
    // to execute only once, check with values.imgName.isFirstChange()
    if (values.imgName && values.imgName.currentValue === undefined) {
       this.imgName = CustomComponent.initialImgName;
    }
  }

  ngOnInit() {
    console.log("Executing ng on init");
  }

  ngAfterViewInit() {
    console.log(`The value of imgName is: ${this.imgName}`)
  }
}

What is causing the issue of undefined values when using a hardcoded string for property binding in a component?

Answer №1

Answer №2

Similar questions

The Angular framework is unable to locate a differ that supports the object '[object Object]' which is of type 'object'

Mysterious issue arises during deployment of Typescript-React application on Heroku

Is it feasible to replicate an error in TypeScript with certain modifications?

Is a no-cache directive required in Angular index.html?

Having trouble with uploading the profile image in Angular 2? The upload process doesn't

Angular Material calendar tool customization for designated input

Unable to transfer object from Angular service to controller

Creating personalized breakpoints in Material UI using TypeScript

The Cloudflare KV namespace remains unbound

Navigating user profile routes effectively involves understanding the structure of the application

Choosing the initial object in Angular2 using ngValue

Error encountered: ExpressionChangedAfterItHasBeenCheckedError when trying to load the loading indicator

Having trouble with the Angular Language Service extension in VS Code for Angular-16?

Unleashing the Potential of TypeScript Union Types

I find that the value is consistently undefined whenever I attempt to set it within a promise in Angular

Organizing data with JavaScript: Transforming a flat array into nested JSON structures

Incorporating yarn into your Vue3 project with Typescript

When the value of a Formcontrol is changed using valueAccessor.writeValue(), it remains unchanged

Incorporating responsive design with React and Typescript

Is there a way in TypeScript to prevent the modification of a class property and still trigger a runtime error if attempted?