Menu
What does @Component.host property stand for?
According to Angular2 documentation it stands for:
host - map of class property to host element bindings for events, properties and attributes.
I don't quite figure out what's it for?
I'm posing this in order to understand a stuff code I've stuck last days.
The code is:
@Component({ selector: 'layout', encapsulation: ViewEncapsulation.None, templateUrl: './layout.template.html', host: { '[class.nav-static]' : 'config.state["nav-static"]', '[class.chat-sidebar-opened]' : 'chatOpened', '[class.app]' : 'true', id: 'app' } }) export class Layout { 
359
Every component is associated within an element that matches the component's selector. This element, into which the template is rendered, is called the host element. The :host pseudo-class selector may be used to create styles that target the host element itself, as opposed to targeting elements inside the host.
The host property is used to bind properties, attributes, and events to that particular class component, using a set of key-value pairs. host: { [key: string]: string; } Angular automatically checks host property bindings during change detection. If a binding changes, Angular updates the directive's host element.
The @Host property searches for the dependency inside the component's template only. It starts with the current Injector and continues to search in the Injector hierarchy until it reaches the host element of the current component. It does not search for the dependency in the Providers of the host element.
The host property, as mentioned in the documentation. Maps class properties to host element bindings for properties, attributes, and events, using a set of key-value pairs. where the host element is the element/component you have attached your directive to.
I have added class to host tag.
Like following:
Component
@Component({ selector: 'mytag', templateUrl: './layout.template.html', host: { 'class' : 'myclass1 myclass2 myclass3' } }) export class MyTagComponent { View code
<mytag></mytag>
Result
<mytag class="myclass1 myclass2 myclass3"></mytag>
53
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