1
resposta

[Dúvida] Funcionamento dos Components

Fiquei com uma duvida da possibilidade de criarmos um componente ao criarmos os modelos dos Cards dos pensamentos.

No Angular criamos componentes para nos ajudar a lidar com a duplicidade de codigo, não poderiamos termos criado 1 componente para o trecho de codigo a baixo, e passar algum paramentro informando as diferenças dos modelos, ao inves de repetirmos 3 vezes o codigo.

  <label for="modelo">Selecione o modelo do card</label>
  <div class="container-radio">
    <div class="radio-modelo">
      <label for="modelo1">
        <input type="radio" id="modelo1" value="modelo1" name="modelo-card">
        <div class="custom-radio">
          <span></span>
        </div>
        <span>Modelo 1</span>
      </label>
      Previa:
      <div class="modelo modelo1 ff-roboto-mono">
        <img src="../../../../assets/image/modelo1.png" alt="Aspas Azuis">
        <p class="conteudo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt qui cum consequatur necessitatibus accusamus! Illum eius atque placeat ipsum neque nulla aliquid veritatis doloremque porro, iste perspiciatis ab, quo cupiditate.</p>
        <p class="autoria"><b>Lorem ipsum dolor</b> </p>
      </div>
1 resposta

Olá, Gabriel! Tudo bem?

Você pode sim usar um componente para evitar a duplicação de código. No Angular, criar componentes reutilizáveis é uma ótima prática. No seu caso, é possível criar um componente chamado, por exemplo, de card-modelo que receberá como parâmetros (@Input) os dados de cada modelo, como imagem das aspas, conteúdo e autoria, tornando o código mais limpo e dinâmico.

Acredito que o código foi feito diretamente no formulário por conta da simplicidade (apenas 3 modelos), então talvez não compensasse criar outro componente só para esses cards. Mas as próximas aulas do curso vão te mostrar como tornar esse trecho mais dinâmico com diretivas, o que pode agregar no seu aprendizado.

Continue praticando e explorando diferentes abordagens para escolher a que faz mais sentido para cada projeto. Parabéns pela iniciativa!

Espero ter ajudado com sua dúvida. Conte sempre com o apoio do fórum!

Um abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!