No artigo anterior, discutimos como configurar o ambiente para o projeto Angular. E também, criamos um novo projeto Angular. Se você perdeu, consulte o primeiro artigo usando o link abaixo.👇

Vamos continuar.

Este é o projeto Angular que criamos no artigo anterior.👇

Componentes em Angular

• Em um aplicativo Angular, os componentes são o bloco de construção principal.
• “App.component” é o componente padrão obtido durante a instalação do angular. Cada componente consiste em quatro arquivos.

1. Reutilização
2. Teste de unidade fácil
3. Fácil de ler.
4. De fácil manutenção.

• Para criar um novo componente, use um prompt de comando ou terminal no Visual Studio Code.

Clique em 'Terminal' na barra superior do Código VS e selecione 'Novo Terminal'.

• Para gerar um novo componente, digite no terminal como “ ng generate component <component-name> ”. (Ex: “ ng gerar componente newComp ”. 'NewComp' é o nome do componente.)
• Ele cria quatro arquivos e atualiza um arquivo.

• Depois de abrir o arquivo do componente criado, você pode ver os arquivos criados mencionados acima.

• Depois de abrir o arquivo 'app.module.ts', você pode ver que importou o novo componente. O motivo é que o Angular o atualiza automaticamente ao criar um componente. A declaração do componente criado também é declarada dentro do '@NgModule' automaticamente.

• Abra o arquivo 'new-comp.component.ts'.
• Selecione o valor de 'seletor' e copie-o para a área de transferência.

• Abra o arquivo 'app.component.html' e abra uma nova tag usando o valor do seletor conforme abaixo no arquivo 'app.component.html'.

• Abra seu navegador. Isso dá a você um resultado como abaixo.👇

• Considerando a saída do navegador, a mensagem “Hello world!” a mensagem vem de 'app.component.ts'. Ao abrir o arquivo 'app.component.html' no VS Code, podemos ver a mensagem “Hello world!” texto dentro da tag '<h1>'.

h1{
color : blue;
}

      

• “New-comp funciona!” mensagem vem de 'new-comp.component.ts'. ao abrir o 'new-comp.component.html' no VS Code, podemos ver o “new-comp funciona!” texto dentro da tag '<p>'.

p{
color : grey;
font-style : italic;
}

      

• Vamos adicionar um novo parágrafo ao 'app.component.html'. Abra o código do VS e digite como abaixo em 'app.component.html'.

<p>Welcome to the first Angular project </p>

       

• Para alterar os estilos de parágrafo em 'app.component.html', abra o arquivo 'app.component.css' no VS Code e digite como abaixo.

p{
color: red;
font-size: 20px;
}

       

Temos as mesmas tags '<p>' em ambos os componentes. Podemos escrever estilos personalizados para tudo e cada um. Portanto, não precisamos de IDs ou classes específicas para isso.

Se você gostou deste artigo ou o achou útil, clique no botão 👏 e siga-me para ver mais artigos como este.

Mais conteúdo em plainenglish.io