Angular input data-binding constants from index.html-CodePudding

I really just want to pass some constants to an Angular Web Component.

This is my index.html:

<body>
  <cast-catalog nVisible="4" [someValue]="'ccccc'"></cast-catalog>
</body>

cast-catalog-component.ts

export class CastCatalogComponent implements OnInit {

  @Input('nVisible') numVisible : number = 6;
  @Input('someValue') someValue : string ;

<some other code>

I'm still getting 6 for numVisible instead of 4 and a blank value for someValue. I don't have this problem if it's passing data from one component to another but if I do it from index.html, it doesn't work.

CodePudding user response：

If we have inputs inside web component, the naming pattern changes when we use it. We use camelCase in our Angular component, but to access that input from another HTML file, we would have to use kebab-case:so try this

<cast-catalog n-visible="4" some-value="'ccccc'"></cast-catalog>

for more https://indepth.dev/posts/1116/angular-web-components-a-complete-guide