'Input binding not working on custom made angular library

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?

htmlangularinputangular7


Solution 1:[1]

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>

Solution 2:[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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Vlad Vidac

Related Questions