Issues Styling :host in Angular 2

Question

[Edited to better describe the problem]

I'm having difficulty applying various styles to :host in Angular 2. The simple plunker below demonstrates the problem. At first I thought that certain styles such as margin/padding weren't getting applied, but it seems that the issue is that the host element isn't behaving like a normal element. Notice that I've added a border and padding. The border looks really odd and the padding doesn't move the content inside the element at all (although it does appear to affect the way the border looks. This is the style I'm applying:

:host {padding:10px; border:1px solid red;}

The rendered code looks like this:

<sample-component _nghost-cxm-2="">
  <div _ngcontent-cxm-2="">
    <h3 _ngcontent-cxm-2="">Sample Component</h3>
  </div>
</sample-component>

I can see in dev tools that the styles are being applied to the <sample-component> element, but this is what the page looks like rendered:

I would expect the border to wrap the content inside the component but it is behaving oddly. Here is a sample plunker: https://plnkr.co/edit/k7LJcmVlhJINmakBJAau?p=preview

What am I missing?

its working as expected. I don't think so any problem. plnkr.co/edit/Fs2Igm0N2eMTE1dyMsdF?p=preview change value(px) and it will react accordingly. — micronyks
– micronyks, Commented Oct 8, 2016 at 7:01
Strange even your plnkr isn't working for me. What browser are you using? I've tried Firefox 49.0.1 and chrome 53.0.2785.143. Changing the 100px to any other value doesn't change anything. — Jim Cooper
– Jim Cooper, Commented Oct 8, 2016 at 15:10
I think you are looking for margin property. Padding is just working fine in chrome(latest version). try to add border:1px solid then change padding value and you'll see according behavior. — micronyks
– micronyks, Commented Oct 8, 2016 at 15:44

Jim Cooper · Accepted Answer · 2016-10-09 04:09:11Z

21

I just realized what the problem is. Host elements are set to display:inline. Changing the element to display:block fixes the problem. Not sure how I missed this before.

answered Oct 9, 2016 at 4:09

Jim Cooper

5,0275 gold badges32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

f.khantsis Over a year ago

I know the rules say not to do +1 comments, but they say nothing about +5 :heart:

micronyks · Accepted Answer · 2016-10-08 17:19:03Z

2

I already showed you that your plunker is working. Other than that you can use host metaproperty to apply style to host element as shown below,

https://plnkr.co/edit/7JquAioc6lUx9bUrPCiZ?p=preview

@Component({
  selector: 'sample-component',
  template: `
    <div>
      <h3>Sample Component</h3>
    </div>
  `,
  host:{
        'style': 'color:red;padding:50px',
       }
})
export class SampleComponent {}

UPDATE after your edit:

I may not give you an exact answer but there is some problem with <sample-component> element/tag which gets created in DOM. Maybe I understand what you're trying to achieve. I have a workaround for the same.

look at here - https://plnkr.co/edit/yLLsZABJWCrvE0CWHgFy?p=preview

edited Oct 8, 2016 at 17:19

answered Oct 8, 2016 at 7:13

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

1 Comment

Jan Dolejsi Over a year ago

As of Angular 16, the use of the host property in the @Component decorator is seems discouraged: Use @HostBinding or @HostListener rather than the host metadata property (angular.io/styleguide#style-06-03)

Collectives™ on Stack Overflow

Issues Styling :host in Angular 2

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related