¿Angular no renderiza HTML extraído del componente?

Question

Estoy usando una serie de videos para familiarizarme con Angular, codewithmosh. Utiliza glyphicons en uno de sus ejercicios, pero el video es de 2018. El soporte de Glyphicon parece haber sido descontinuado en bootstrap desde entonces, pero el sitio de bootstrap aún incluye el html para sus íconos. Pensé que vería si podía hacer lo mismo empujando html sin formato.

El problema es que el html extraído de component.ts no se muestra y, en cambio, solo muestra el código html en la página. Ese mismo html en el component.html ES renderizado.

Soy realmente nuevo aquí, por lo que podría haber una falla obvia en mi código. Probablemente no sea bonito, pero PARECE sonar, y no puedo entender por qué no funciona. Idealmente, esto debería representarse como una estrella vacía, que cuando se hace clic cambia a la estrella completa.

¡Gracias de antemano por cualquier ayuda!

aquí está el app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-star',
  templateUrl: './star.component.html',
  
 })

export class StarComponent {
  isClicked: boolean;

  
  fullStar: string = `
  <svg (click)="onClick()" width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-star-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
  </svg>
  `;

  emptyStar: string = `
  <svg (click)="onClick()" width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-star-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
  </svg>
  `;

  currentSymbol: string = this.emptyStar;
  
  onClick() {
    this.isClicked = !this.isClicked;

    this.currentSymbol = this.isClicked ? this.fullStar : this.emptyStar;
    
  }
}

Aquí está el star.component.html:

{{currentSymbol}}
-------
    <svg (click)="onClick()" width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-star-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
    </svg>

Aquí está el app.component.html, super básico:

<app-star></app-star>

Y aquí está la salida html.

Answer 1

Ambos svgs que proporcionó están llenos, pero le hice un ejemplo usando una estrella normal y una estrella pequeña.

Simplemente reemplace la estrella pequeña con una estrella vacía y funcionará.
lo que hice básicamente fue poner un ngIf en ambos svgs, uno con la condición isClickedy el otro con la condición opuesta, entonces !isClicked.
su función para cambiar la condición onClick()está funcionando bien.

Editar: (con más explicación)

Para simplificar su texto mecanografiado, solo necesita la propiedad isClicked y la función onClick:

export class AppComponent {
  isClicked: boolean;

  onClick() {
    this.isClicked = !this.isClicked;
  }
}

y en su plantilla puede agregar los dos svgs entre los que desea cambiar, con un ngIf en cada uno de ellos:

<!-- big star -->
<svg *ngIf="isClicked" (click)="onClick()" width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-star-fill" fill="currentColor"
    xmlns="http://www.w3.org/2000/svg">
    <path
        d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>

<!-- small star -->
<svg *ngIf="!isClicked" (click)="onClick()" width="2em" height="2em" viewBox="0 0 16 24" class="bi bi-star-fill" fill="currentColor"
    xmlns="http://www.w3.org/2000/svg">
    <path
        d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>