如何在用作属性的Angular组件中输入值

Question

I'm trying to create a component and I want to use it as an attribute on a div to remove the component tag, but this component requires inputs. My question is how to inject those inputs.

Using a component tag:

<app-comp [item]="item"></app-comp>

What I want to achieve is:

<div app-comp [item]="item"></div>

Answer 1

A component can have an attribute selector, in your component definition use:

@Component({
  selector: 'div[app-comp]'
...

Or simply

@Component({
  selector: '[app-comp]'
...

If you want to use it both as a tag or as an attribute, use:

@Component({
  selector: 'app-comp, [app-comp]'
...

The documentation reference for this is here: https://angular.io/api/core/Directive#selector