Find an issue and propose decision

container.component.html

<button (click)="config.expanded = !config.expanded">{{ config?.expanded ? 'Collapse' : 'Expand' }}</button>
<hrh-expandable-info [config]="config"></hrh-expandable-info>

container.component.ts

import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { ExpandableConfig } from '../expandable-info/expandable-info.component';

@Component({
  selector: 'hrh-container',
  templateUrl: './container.component.html',
  styleUrls: ['./container.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ContainerComponent implements OnInit {
  config: ExpandableConfig = {
    title: 'Harry Potter',
    description: 'The Boy Who Lived',
    expanded: false
  };

  constructor() {}

  ngOnInit(): void {}
}

expandable-info.component.html

<div class="title">{{ config?.title }}</div>
<div *ngIf="config?.expanded" class="description">{{ config?.description }}</div>

expandable-info.component.ts

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

export interface ExpandableConfig {
  title: string;
  description: string;
  expanded: boolean;
}

@Component({
  selector: 'hrh-expandable-info',
  templateUrl: './expandable-info.component.html',
  styleUrls: ['./expandable-info.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExpandableInfoComponent implements OnInit {
  @Input() config?: ExpandableConfig;

  constructor() {}

  ngOnInit(): void {}
}