Angular selector tag

Question

In the official ng-book (p. 73) I read that is possible indicate an Angular 6 component tag in 2 different ways. Example from the official manual:

1. <inventory-app-root></inventory-app-root>

2. <div inventory-app-root></div>

but in my Angular application only the 1st way works.

<app-test-component></app-test-component>

(work)

<div app-test-component></div>

(doesn't work)

Why is this?

Answer 1

In your component code, there will be a decorator that looks like this:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

The selector property is what Angular will use to find your component. It's value can be any valid CSS selector, so by default, it expects a tag called my-app.

If you want to change it to an attribute, you can use:

selector: '[my-app]',