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?

Answer 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>