Angular component to apply parent specified styles

Question

I know how to use ::ng-deep to apply styles to specific component's internal parts, but I'm looking for a more correct solution that does not require the parent to know about the components parts, and specifically to set dimensions of the component (width and hight).

Here's the full scenario:

@Component({
  selector: 'app-root',
  template: '<h1>Hello World!<h1><app-green-box></app-green-box>',
  styles: [ 'app-green-box { width: 50%; }' ],
})
export class AppComponent {
}

@Component({
  selector: 'app-green-box',
  template: '<div class="green-box">Bye</div>',
  styles: [ '.green-box { border: solid black 1px; background: green; }' ],
})
export class GreenBoxComponent {
}

As you can see, AppComponent would like a green box that is 50% wide. GreenBoxComponent does not have a way to know that (another parent might want it at 70% or at 10%).

Unfortunately, the above code doesn't work (I'm not exactly sure why - the custom element doesn't actually take up space as it has no visual presentation by itself, and so it can't be a bounding box for the content?).

Using ::ng-deep requires the parent component to know that GreenBoxComponent uses a <div> for its internal box implementation, but is there a way to have the component just "copy" the styles from the host to whatever internal part it needs to apply these to?

Answer 1

Actually, after trying to explain to myself the reason that the custom element isn't a bounding box (in the question), I figured out the problem: the default display for the custome element is inline so it doesn't obey the size restrictions of the parent.

The solution is for GreenBoxComponent to understand that it represents a box and not an inline element and that parents would like to treat it as a box - so it should force its host element to have display: block , like so:

@Component({
  selector: 'app-green-box',
  template: '<div class="green-box">Bye</div>',
  styles: [ 
    ':host { display: block; }',
    '.green-box { border: solid black 1px; background: green; }',
  ],
})
export class GreenBoxComponent {
}