Does an Angular 2 '@Component' decorator always need an element name selector?

Question

In this example, from the official Angular 2 docs, the decorator looks like this:

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
})

Example: would prefer not not have my HTML code littered with non-standard elements, and would prefer something like (NB: ng-angular is only an example I would like to see):

import { Component } from '@angular/core';
@Component({
  template: '<h1>Wait! Bloody wait some more.</h1>'
})
export class ListComponent { }

and used something like this:

<div ng-component="List"</div>

Or is the a Component decorator like this used only when you want to create a new HTML element, and then stick to a plain Listcontroller for the div in my example above?

kit · Accepted Answer · 2016-09-23T21:29:34.767

5

A selector is not always needed eg. you have a top component of a module that is loaded by router and displayed in

selector is needed for any other type of component. otherwise angular wouldn't know what component it should render.

I haven't heard about attribute "ng-component"

[EDIT] kit effectively answered correctly in his/her first comment:

You have to create an element that would enclose your template however it doesn't have to be a new HTML element because selector can be a element, [attribute] or class, eg.

<div test>

could be an element for component with selector: '[test]'

edited Sep 23 '16 at 21:29

answered Sep 23 '16 at 19:51

kit

4,890
3
24
23

I don't want to know if a component needs a selector or not. I re-iterate that I want to know if creating a new component always results in a new HTML element, or is there some way to link a component to a standard element like a `div`. I said I would "prefer to see something like" an `ng-component` attribute. That is purely an example.. – ProfK Sep 23 '16 at 20:18
1

You have to create an element that would enclose your template however it doesn't have to be a new HTML element because selector can be a element, [attribute] or class, eg.
could be an element for component with selector: '[test]'
– kit Sep 23 '16 at 20:27
Oh! Wonderful, thank you. I am still in the overviews examples stage, and have not seen one, out of a great many, Continent with anything but an element selector. You deserve more points for this than I can give you now. Please be patient. – ProfK Sep 23 '16 at 21:07

score 1 · Answer 2 · answered Sep 23 '16 at 20:47

A component is a new HTML element, something like <my-component>Hello</my-component>.

I think what you want is a directive.

An Attribute directive changes the appearance or behavior of a DOM element.

So you can do something like <div makeItBlue>Blue stuff</div>

score 1 · Answer 3 · answered Feb 09 '17 at 12:32

Just to elaborate: The selector can be a standard CSS-selector, so your HTML can be non-angular-centric.

Example:

    @Component({
        selector: 'div.player-list',
        ...
    })
    export class PlayerList {
    }

will match <div class="player-list and-possibly-some-other-classes">...</div> (i.e. replacing the div with your angular template)

Does an Angular 2 '@Component' decorator always need an element name selector?

3 Answers3