Input binding not working on custom made angular library

Question

I've built an Angular library that I can import into outside applications. Withing my library exists a component called 'MainComponent' that has a single @Input variable for 'objectId'.

import { Component, Input } from "@angular/core";
import { Router } from "@angular/router";

@Component({
  selector: "main-component",
  templateUrl: "../templates/app.html",
  styleUrls: ["../styles/app.css"],
  providers: []
})

export class MainComponent {

  @Input() objectId: string;

  constructor() {
    console.log("MainComponent constructor running!! objectId: " + this.objectId);
    // 'objectId' is undefined in the constructor
  }
}

When I import the library into another project, I use the MainComponent like this:

<main-component [objectId]="123456"></main-component>

However, objectId is always undefined. I'm not sure what I'm doing wrong - is there something different I must do since this is a custom made Angular library?

Is it also undefined in ngOnInit and/or other lifecycle hooks? — Alexander Staroselsky
– Alexander Staroselsky, Commented Nov 7, 2019 at 19:08
You can check this stackblitz and try to find what you are doing differently. — Martin Parenteau
– Martin Parenteau, Commented Nov 7, 2019 at 19:34
Also, please note that using [objectId]="abcdef" will give undefined. We assume that you actually pass [objectId]="123456". — Martin Parenteau
– Martin Parenteau, Commented Nov 7, 2019 at 19:45
No, because the square brackets tell Angular that it should evaluate the expression abcdef, which is undefined (unless you define the property abcdef in your component class). To bind a literal string, you can use objectId="abcdef" or [objectId]="'abcdef'". — Martin Parenteau
– Martin Parenteau, Commented Nov 7, 2019 at 19:52

christian · Accepted Answer · 2019-11-07 19:58:50Z

2

objectId is a string, and as in input you can pass as either:

<!-- use non-bracket notation to pass as string -->
<main-component objectId="123456"></main-component>

or

<!-- use bracket notation with single quotes to pass as string -->
<main-component [objectId]="'123456'"></main-component>

edited Nov 7, 2019 at 19:58

answered Nov 7, 2019 at 19:50

christian

1,7852 gold badges13 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Martin Parenteau Over a year ago

I don't think that it would look for a variable with the name 123456. It would evaluate the expression 123456, which would result in the corresponding number. That is why the original code should work with 123456 but not with abcdef.

Vlad Vidac · Accepted Answer · 2019-11-07 19:08:53Z

2

objectId is undefined when queried in the constructor but should be defined if you were to implement the OnInit interface and look at it in ngOnInit(). Input passing doesn't happen when the component class is constructed, it's somewhere further down the lifecycle.

answered Nov 7, 2019 at 19:08

Vlad Vidac

9981 gold badge10 silver badges28 bronze badges

2 Comments

Roka545 Over a year ago

Thanks for the suggestion but it is still undefined.

Vlad Vidac Over a year ago

Are you initially passing the input as undefined and switching it later? If so you might need to implement OnChanges and check new values in ngOnChanges()

Collectives™ on Stack Overflow

Input binding not working on custom made angular library

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related