Cannot set width of component-CodePudding

I have a simple hello world component for which I want to set a border. It seems the host element has a width of 0 px which I am unable to change. (I can make a border around the h1 element, but not around the containing angular component.)

Here's my stackblitz: https://stackblitz.com/edit/angular-ivy-jbjcdt?file=src/app/app.component.html

This is the component:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1>Hello World!</h1>`,
  styles: [`h1 { font-family: Lato; }`],
})
export class HelloComponent {
  @Input() name: string;
}

And this is app.component.html:

<hello style="width:500px; background-color:red; border:dashed blue"></hello>

CodePudding user response：

Angular's default behaviour is to set display:inline for components. This means the component will take as much width as its content. In order to set a width on the component itself, you should define it's display property as

display: inline-block;

display: block;