Angular Elements: @Input decorator not working wit

Question

I have several separated web components, made with angular elements, that I import in a main one, which has a router and is the base application. Routes are pretty simple:

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

@Component({
    selector: 'example',
    template: '<component-one [variable]="toPass" (callback)="onCallback($event)"></component-one>',
    styles: []
})
export class ExampleComponent {
    public toPass: string = "Hello World!";

    constructor(private router: Router) {}

    onCallback(event) {
        console.log(event);
        this.router.navigate(['example-two']);
    }
}

And the components do the things they are supposed to do.

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

@Component({
    selector: "component-one",
    templateUrl: "./component-one.html",
    styleUrls: ["./component-one.scss"],
    encapsulation: ViewEncapsulation.Emulated,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ComponentOne implements OnInit {
    @Input() variable: string;
    @Output() callback = new EventEmitter<any>();

    constructor() {}

    ngOnInit() {
        console.log("Variable: ", this.variable);
    }

    someRandomButtonClicked() {
        callback.emit({ data: "Callback Called" });
    }
}

Now when I launch the main app, everything shows as expected, the callback works fine but the variable is undefined. Am I missing something in the @Input declaration in my webcomponents ?

Answer 1

You can just initiate the variable in ComponentOne. Then it should work

@Input() variable:String = “”;

Answer 2

In your code, change String to string in all the places shown in the question. And see if it works.

String is a constructor for type string. More info here

See distinction between string and String.

UPDATE:

I have a feeling, it has to do with the inline template format you used.

Change this

@Component({
    selector: 'example',
    template: '<component-one [variable]="toPass" (callback)="onCallback($event)"></component-one>',
    styles: []
})

to this,

@Component({
    selector: 'example',
    template: `<component-one [variable]="toPass" (callback)="onCallback($event)"></component-one>`,
    styles: []
})

See, I changed the template: '' to this

template: ``

Otherwise, the parsing of the inline template string might be messed up.

See if that works.

Answer 3

Since you are using angular elements, make sure your variable name is in smallcaps like so @Input() myvariable: string and not @Input() myVariable: string check here https://github.com/angular/angular/issues/24871

Answer 4

I think you just miss understand the new syntax :)

When you use [] around a input name you tell angular that you give him a variable. If you don't use it you ask angular to take it as a primitive.

So :

<component-one [variable]="myVar"   

A var called "myVar" must be define in the component

Without

<component-one variable="myVar" 

Angular will take "myVar" as a string value

Useless but working :

<component-one [variable]="'myVar'"

You give a new string as variable