CODEWITHSUNDEEP
angularangular6
Archimede
Archimede

Reputation: 727

Angular selector tag

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?

Upvotes: 2

Views: 3931

Answers (1)

user184994
user184994

Reputation: 18281

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]',

Upvotes: 5

Related Questions