# Angular 2: Styling The Generated Host Tag

Angular 2 replaces / generates a "synthetic" tag for each component without any styling with the name specified in the selector


The component below:



import { Component } from '@angular/core';
@Component({
  selector: 'hello-app',
  template: '<h1>Styling the host component</h1>',
})
export class AppComponent { }


generates the following markup:


<hello-app>
 <h1>Styling the host component</h1>
</hello-app>



Additional styling of the "host" tag can be added with the host object:



import { Component } from '@angular/core';
@Component({
  selector: 'hello-app',
  template: '<h1>Styling the host component</h1>',
  host: {"class":"nice"}
})
export class AppComponent { }


which generates the following output:


<hello-app class="nice">
	<h1>Styling the host component</h1>
</hello-app>



Putting the selector into angle brackets:  selector: '[hello-app]' searches for an attribute, not a tag, with the name of the selector, e.g.:



<div hello-app></div>



See you at Java EE Workshops at Munich Airport, Terminal 2 and particularly at Building Angular 2 Applications and 
Building React Applications.