ng-bind-html / $sce en Angular moderno

ng-bind-html pasa a ser un binding a [innerHTML], que sanitiza el contenido por defecto. $sce pasa a ser DomSanitizer, que se usa solo cuando necesitas saltarte esa sanitización.

// controller
vm.body = $sce.trustAsHtml(article.bodyHtml);
vm.videoUrl = $sce.trustAsResourceUrl(article.videoUrl);

<!-- template -->
<div ng-bind-html="vm.body"></div>
<iframe ng-src="{{ vm.videoUrl }}"></iframe>

private sanitizer = inject(DomSanitizer);
article = input.required<Article>();

videoUrl = computed(() =>
  this.sanitizer.bypassSecurityTrustResourceUrl(this.article().videoUrl));

<!-- template -->
<div [innerHTML]="article().bodyHtml"></div>
<iframe [src]="videoUrl()"></iframe>

Qué cambia

• [innerHTML] elimina scripts y atributos de eventos por su cuenta; no hay un módulo ngSanitize que instalar.
• $sce.trustAsHtml pasa a ser bypassSecurityTrustHtml, para contenido que controlas por completo.
• Las URL de iframes y elementos similares necesitan bypassSecurityTrustResourceUrl, igual que antes con trustAsResourceUrl.

Relacionado

• $location
• $compile
• ng-include
• ng-options