将组件样式应用于页面中的最后一次出现

Question

I have a custom component and it's formatting itself using the accompanying style file. In the containing component, I generate a series of the custom ones. I'd like the last element to have a slightly different style but I'd prefer to control it from within the component itself. Is it possible at all?

I asked this question earlier but got answers based on direct application of CSS while I'm looking for an Angular component encapsulating the style.

The closest I got was applying :host(:last-child) but didn't really got it working.

div.lower{ border-top: 1px solid gold; ... }
div.lower:host(:last-child){ border-top: 1px solid olive; ... }

I prepared a Blitzy to laborate with. The aim is to make the last element not to have a golden divider in the middle.

Answer 1

Since the div is a descendant of the component host element, you can use the following selectors:

:host(:last-child) div.lower      // Applies the style on the last component instance
:host:not(:last-child) div.lower  // Applies the style except on the last component instance

To avoid the golden separator on the last component instance, try these styles:

div.lower {
  display: flex;
  justify-content: center;
  min-width: 300px;
}

:host:not(:last-child) div.lower {
  border-top: 1px solid gold;
}

See this stackblitz for a demo.