Menu
Are there any downsides of using the <body> tag instead of some <my-app> tag for the root component?
import 'package:angular2/angular2.dart';
@Component(
selector: 'body',
template: '''
<h1>My First Angular 2 App</h1>
<div>{{greet}}</div>
''',
styles: const ['''
:host {
height: 100vh;
}
h1 {
color: red;
}
'''])
class AppComponent {
String greet = 'Hello world';
}
(The code here is Dart, but I hope it is close enough to ES6, typescript for other people to understand.)
I don't see this often, so I guess there is a good reason for it, but this seems nice to me, otherwise you basically have two root components, body, and my-app.
685
With , separated multiple selectors can be used where the component is added to elements where one of these matches. Many of Angulars built-in directives use a list of selectors.
html file you must specify the root component using it's selector (usually app-root ).
The root app module is just the beginning. It is a necessary part of any Angular app, but it is also just the entry point to the rest of your app's feature modules. A healthy Angular app imports only exactly what is needed within the root AppModule because all of the JavaScript within this module is eagerly loaded.
A bootstrapped component is an entry component that Angular loads into the DOM during the bootstrap process (application launch). Other entry components are loaded dynamically by other means, such as with the router. Angular loads a root AppComponent dynamically because it's listed by type in @NgModule. bootstrap .
If you want Angular to control the whole page just use body as selector.
See also How do I change the body class via a typescript class (angular2)
91
If you use 'body' as the selector for your app, it'll work, but there are some problems:
The Web Component specification say to use custom elements or custom attributes and it doesn't use official html elements.
The official style guide suggests to use 'custom prefix' for your components like 'myComponent'. Also if you want to use some linter like tslint with the 'component-selector-prefix' config in order to check that, it'll throw a warning for use 'body' selector without prefix.
If inside the selector (body) there are some elements, they'll be hidden for angular, maybe you'll want to put some 'scripts' inside the body or another component, for example 'webpack' put the scripts in the bottom of the body, and maybe it'll work but not as expected ...
Best.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
