fix: image re-rendering for movie details

projects/movies/src/app/pages/movie-detail-page/movie-detail-page.component.html

@@ -1,7 +1,7 @@
 <article class="movie-detail-wrapper">
  <ng-container *rxLet="movie$; let movie">
- <ui-detail-grid [style.opacity]="!!movie ? 1 : 0">
- <div detailGridMedia>
+ <ui-detail-grid [style.opacity]="!!movie ? 1 : 0" [rerenderDetailGridMedia]="movie.imgSrc">
+ <ng-template #detailGridMedia>
  <img
  class="aspectRatio-2-3 fit-cover"
  [ngSrc]="movie.imgSrc"
@@ -14,8 +14,8 @@
  [title]="movie.title"
  data-uf="hero-img"
  />
- </div>
- <div detailGridDescription>
+ </ng-template>
+ <ng-template #detailGridDescription>
  <header>
  <h1 data-uf="header-main">{{ movie.title }}</h1>
  <h2 data-uf="header-sub">{{ movie.tagline }}</h2>
@@ -166,7 +166,7 @@ <h3>The Cast</h3>
  >&nbsp;Back
  </button>
  </section>
- </div>
+ </ng-template>
  </ui-detail-grid>
  <div class="loader" *ngIf="!movie"></div>
  </ng-container>

projects/movies/src/app/pages/movie-detail-page/movie-detail-page.component.ts

@@ -1,5 +1,5 @@
-import {select, selectSlice} from '@rx-angular/state/selections';
-import {Location, NgFor, NgIf, NgOptimizedImage} from '@angular/common';
+import { select, selectSlice } from '@rx-angular/state/selections';
+import { Location, NgFor, NgIf, NgOptimizedImage } from '@angular/common';
 import {
  ChangeDetectionStrategy,
  Component,
@@ -9,21 +9,20 @@ import {
  ViewChild,
  ViewEncapsulation,
 } from '@angular/core';
-import {filter, map, mergeWith, tap} from 'rxjs';
-import {TMDBMovieGenreModel} from '../../data-access/api/model/movie-genre.model';
-
-import {MovieCast, MovieDetailAdapter} from './movie-detail-page.adapter';
-import {RxActionFactory} from '@rx-angular/state/actions';
-import {RxEffects} from '@rx-angular/state/effects';
-import {DetailGridComponent} from '../../ui/component/detail-grid/detail-grid.component';
-import {StarRatingComponent} from '../../ui/pattern/star-rating/star-rating.component';
-import {MovieListComponent} from '../../ui/pattern/movie-list/movie-list.component';
-import {RxLet} from '@rx-angular/template/let';
-import {BypassSrcDirective} from '../../shared/cdk/bypass-src.directive';
-import {RxFor} from '@rx-angular/template/for';
-import {FastSvgComponent} from '@push-based/ngx-fast-svg';
-import {RxIf} from '@rx-angular/template/if';
-import {RouterLink} from '@angular/router';
+import { filter, map, mergeWith, tap } from 'rxjs';
+import { TMDBMovieGenreModel } from '../../data-access/api/model/movie-genre.model';
+import { MovieCast, MovieDetailAdapter } from './movie-detail-page.adapter';
+import { RxActionFactory } from '@rx-angular/state/actions';
+import { RxEffects } from '@rx-angular/state/effects';
+import { DetailGridComponent } from '../../ui/component/detail-grid/detail-grid.component';
+import { StarRatingComponent } from '../../ui/pattern/star-rating/star-rating.component';
+import { MovieListComponent } from '../../ui/pattern/movie-list/movie-list.component';
+import { RxLet } from '@rx-angular/template/let';
+import { BypassSrcDirective } from '../../shared/cdk/bypass-src.directive';
+import { RxFor } from '@rx-angular/template/for';
+import { FastSvgComponent } from '@push-based/ngx-fast-svg';
+import { RxIf } from '@rx-angular/template/if';
+import { RouterLink } from '@angular/router';
 
 @Component({
  standalone: true,
@@ -87,7 +86,10 @@ export default class MovieDetailPageComponent {
  }>
  ) {
  this.effects.register(
- this.ui.dialog$.pipe(map((v) => v === 'show'), tap(console.log)),
+ this.ui.dialog$.pipe(
+ map((v) => v === 'show'),
+ tap(console.log)
+ ),
  (openDialog) =>
  openDialog
  ? this.trailerDialog?.nativeElement?.showModal()

projects/movies/src/app/pages/person-detail-page/person-detail-page.component.html

@@ -1,7 +1,7 @@
 <article *rxLet="personCtx$; let personCtx">
  <ng-container *ngIf="personCtx?.value as person; else loading">
  <ui-detail-grid>
- <div detailGridMedia>
+ <ng-template #detailGridMedia>
  <img
  class="aspectRatio-2-3 fit-cover"
  [ngSrc]="person.imgSrc"
@@ -14,8 +14,8 @@
  [title]="person?.name"
  data-uf="hero-img"
  />
- </div>
- <div detailGridDescription>
+ </ng-template>
+ <ng-template #detailGridDescription>
  <header>
  <h1>{{ person.name }}</h1>
  <h2>{{ person.birthday }}</h2>
@@ -39,7 +39,7 @@ <h3>The Biography</h3>
  <fast-svg name="back" size="1em"></fast-svg>&nbsp; Back
  </button>
  </section>
- </div>
+ </ng-template>
  </ui-detail-grid>
  </ng-container>
  <ng-template #loading>

projects/movies/src/app/ui/component/detail-grid/detail-grid.component.ts

@@ -1,22 +1,65 @@
 import {
  ChangeDetectionStrategy,
  Component,
+ ContentChild,
+ Input,
+ OnChanges,
+ SimpleChanges,
+ TemplateRef,
+ ViewChild,
+ ViewContainerRef,
  ViewEncapsulation,
 } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
 
 @Component({
  standalone: true,
  selector: 'ui-detail-grid',
  template: `
  <div class="grid--item gradient">
- <ng-content select="[detailGridMedia]"></ng-content>
+ <ng-container
+ #detailGridMediaOutlet
+ [ngTemplateOutlet]="detailGridMediaRef"
+ ></ng-container>
  </div>
  <div class="grid--item media">
- <ng-content select="[detailGridDescription]"></ng-content>
+ <ng-container [ngTemplateOutlet]="detailGridDescription"></ng-container>
  </div>
  `,
  styleUrls: ['./detail-grid.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.Emulated,
+ imports: [NgTemplateOutlet],
 })
-export class DetailGridComponent {}
+export class DetailGridComponent implements OnChanges {
+ @ContentChild('detailGridMedia', { read: TemplateRef })
+ detailGridMediaRef!: TemplateRef<unknown>;
+ @ContentChild('detailGridDescription', { read: TemplateRef })
+ detailGridDescription!: TemplateRef<unknown>;
+
+ /**
+ * Each time a new value is set to the input rerenderDetailGridMedia (any type), rerender the block `detailGridMedia` (usually the img)
+ * Hacky way to solve issue https://github.com/angular/angular/issues/47813
+ */
+ @Input() rerenderDetailGridMedia: unknown;
+ @ViewChild('detailGridMediaOutlet', { read: ViewContainerRef })
+ outletRef!: ViewContainerRef;
+
+ ngOnChanges(changes: SimpleChanges): void {
+ if (
+ changes['rerenderDetailGridMedia'] &&
+ !changes['rerenderDetailGridMedia'].isFirstChange()
+ ) {
+ this.doRerenderDetailGridMedia();
+ }
+ }
+
+ private doRerenderDetailGridMedia(): void {
+ if (!this.outletRef) {
+ return;
+ }
+
+ this.outletRef.clear();
+ this.outletRef.createEmbeddedView(this.detailGridMediaRef);
+ }
+}