Question

Desenvolver aplicações em Angular envolve conhecer vários assuntos, como, por exemplo, mostrar dados, criar entradas de dados interativos com o usuário, trabalhar com estilos e aplicar em páginas HTML para torná-las mais interativas e usáveis. Uma dessas formas é criar diretivas e aplicá-las em elementos HTML.
Por meio de diretivas, e um pouco de pesquisa na documentação do Angular, é possível customizar uma caixa de entrada (input) em HTML, de forma que à medida que o usuário digitar um número de cartão de crédito, a diretiva mostre uma imagem da bandeira Blastercard, Vista ou Brazilian Express, dependendo da entrada de dados. O seu Desafio é criar essa diretiva e aplicá-la em um formulário de entrada de dados.
Desenvolva um pequeno script contendo uma diretiva chamada “logoCC” para customizar uma entrada de dados do tipo texto (input type="text") de acordo com o que foi especificado.
Para resolver a atividade, você vai precisar de algumas dicas:
– Os cartões da Brazilian Express sempre começam com 37.
– Os cartões da Vista começam sempre com o número 4.
– Os cartões da Blastercard sempre começam com 5.
Para padronizar, salve as imagens em uma pasta dentro da pasta do seu projeto no seguinte path: "my-app\src\assets\img\". Cada bandeira de cartão de crédito tem uma imagem diferente. Veja a imagem a seguir como exemplo:

Answer 1

Resposta:

Segue anexo.

Explicação: