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.


NEW online workshop: WebStandards Igniter (online)

Airport MUC workshops: Java EE 7: Bootstrap, Effective, Architectures, Web, React and Angular, Testing and Microservices

Podcast: airhacks.fm and newsletter: airhacks.news

A book about rethinking Java EE Patterns

Comments:

Post a Comment:
  • HTML Syntax: NOT allowed
realworldpatterns.com
Online Workshops
...the last 150 posts
...the last 10 comments
License