Условный класс CSS в Angular не применяется при первом рендеринге ⇐ CSS

[Anonymous]

В Angular у меня есть два равных компонента, но один имеет зеленый фон:
html компонента home-options:

Код: Выделить всё

HTML-компонент home-option (неисправный):

Код: Выделить всё

{{ title() }}
{{ text() }}
{{ color() }}

Чтобы выбрать, какой из них получит класс scss home-option-green (таким образом, получая зеленый фон), я использую ввод (home-option.ts):

Код: Выделить всё

@Component({
selector: 'home-option',
imports: [],
templateUrl: './home-option.html',
styleUrl: './home-option.scss',
})
export class HomeOption {
title = input.required();
text = input.required();
imageSrc = input.required();
color = input.required();
}

Мой вопрос заключается в том, почему условный класс scss home-option-green не применяется при первом рендеринге, но когда я меняю размер окна, он работает.
Это происходит только тогда, когда window.innerWidth меньше 1400 пикселей. В представлении на компьютере все работает сразу при первом рендеринге.
Задействованные правила Scss:

Код: Выделить всё

@use '../../../../generalStyles/fonts' as fonts;
@use '../../../../generalStyles/_mixins' as mixins;

:host {
display: block;
}

.home-option {
display: grid;
grid-template-columns: auto 1fr;
background-color: #1ba2ba;
border-radius: 8px;
padding: 20px 20px 15px;
margin-right: 5%;
cursor: pointer;

&.home-option-green {
background-color: green;
}

@include mixins.change-layout(phone) {
grid-template-columns: 1fr;
}
}

div.home-option-text {
padding-left: 35px;
padding-right: 30px;
line-height: fonts.$paragraph-line-height;

display: flex;
flex-direction: column;
gap: 10px;

color: #fff;

h3 {
margin: 0px;
font-size: 31px;
}

@include mixins.change-layout(phone) {
margin-top: 10px;
padding-left: 10px;
padding-right: 10px;
}
}

Миксин изменения макета:

Код: Выделить всё

@mixin change-layout ($screen-size) {
/*
$screen-breakpoints: (
tablet: 1400px,
phone: 700px
)
*/
$breakpoint: map.get(variables.$screen-breakpoints, $screen-size);

@if $breakpoint {
@media screen and (max-width: $breakpoint) {
@content
}
}
@else {
@warn "El breakpoint `#{$size}` no está definido.";
}
}

В чем может быть проблема? Я использую Angular 20
(Я открыт для предложений других способов достижения той же цели)

Подробнее здесь: https://stackoverflow.com/questions/798 ... rst-render