How to pass a parameter from html page to angular custom element

Question

I've created an angular custom element from an angular component that I want call from a normal html page.

The component requires a parameter, which works when it's called as a component from within an angular project, but I cannot figure out how to pass the parameter from the html tag to the custom element.

Current I'm trying to use:

  @Input() crs: string

in the component and:

<station-info crs="btn"></station-info>

in the html tag, but the crs never makes it into the component.

What I'd like to know is the correct way to pass the parameter from the html tag to the component after it has been converted to a custom element?

Answer 1

You can use property binding to pass data from parent to child.

Like so, Use property binding to bind the item property in the child to the currentItem property of the parent.

<app-item-detail [item]="currentItem"></app-item-detail>

In the parent component class, designate a value for currentItem:

export class AppComponent {
  currentItem = 'Television';
}

Link to angular docs: https://angular.io/guide/inputs-outputs