Fala galera beleza aqui quem fala é cristec e no vídeo de hoje nós vamos estar Iniciando um curso de angular nesse curso nós vamos abordar diversos conceitos básicos da linguagem e ao final vamos estar desenvolvendo um projeto completo utilizando cada um dos conceitos que foram abordados nessa primeira aula o nosso objetivo é entender como que nós conseguimos estar instalando ângul no nosso computador Iniciando um projeto e tendo noção da estrutura de pastas que é criada a partir do momento que Nós criamos um projeto em ângulo tendo noção de para que cada uma das pastas serve e qual a funcionalidade de cada um dos arquivos a gente vai estar perfeitamente preparado para iniciar o desenvolvimento e o início do aprendizado de cada um dos conceitos sejam eles referentes a componentes referentes as diretivas compartilhamento de dados e de componentes entre outras funcionalidades que nós vamos estar entendendo aqui durante esse curso e daí ao final vamos estar aptos a criar um projeto completo utilizando a lingu então sem mais delongas Vamos iniciar essa primeira aula eu tô aqui com uma pasta aberta e nessa pasta é a pasta onde eu vou estar criando o meu primeiro projeto em angular então você pode est abrindo qualquer pasta aí no seu computador aonde você deseja estar salvando os seus projetos então eu abri essa pasta aqui e agora eu quero abrir o meu prompt de comando dentro dessa pasta porque é a partir de códigos de comando que nós vamos estar instalando o nosso angular e logo após cri and um novo projeto então o que que a gente precisa fazer estando com a pasta aberta aqui na parte de cima onde ficam todos os diretórios aonde eu estou eu posso estar clicando e vou escrever a palavra CMD escrevendo CMD e dando um enter o meu prompt de comando é aberto dentro da pasta onde eu estou e é basicamente aqui aonde eu preciso colocar códigos aonde com esses códigos eu consigo estar instalando o meu angular o código que a gente precisa estar colocando aqui para est instalando o ular no nosso computador instalando a versão mais recente que nós vamos estar utilizando é basicamente o npm install tracinho G para instalar de forma global e o que a gente vai instalar é o @angular bar C então a gente pode dar um enter e o nosso angular vai iniciar a ser instalado dentro da nossa máquina então basicamente com essa diretiva com esse código a gente instala o angular Agora resta você esperar Vai demorar um pouquinho para esse processo ser realizado Então a partir do momento que ele for eu volto aqui com vocês novamente beleza nosso angular ele foi instalado perceba que tudo ocorreu da melhor forma possível Lembrando que para instalar o angular Você também precisa ter instalado no seu computador o node porque é a partir do node que nós vamos conseguir ter acesso a esses comandos de npm então você pode vir no seu Google e aqui eu vou estar deixando o link para que você consiga estar instalando o node JS você vai basicamente instalar o node mais recente aí na sua máquina e a partir do momento que você baixa o node JS vai ser possível você rodar cada um dos códigos que nós estamos rodando aqui perfeito eu vou estar deixando na descrição o link do node JS como também vou estar deixando para vocês o link do site do angular aonde você consegue est pegando aqui nas documentações os seus códigos para você tanto instalar o angular no seu computador como também códigos mais para frente que nós vamos estar verificando para conseguir rodar o projeto conseguir iniciar um projeto e assim por diante dentro da nossa aplicação então perfeito aqui no nosso código de comando nós Já conseguimos instalar o angular no computador agora que o nosso angular já está instalado nós podemos estar verificando a versão do angular que foi instalada no nosso computador e para verificar isso a gente só precisa dar o comando NG version com ngg version vai aparecer aqui a versão do angular a versão do node que temos instaladas no nosso ador Então esse curso aqui vai ser pautado na versão de angular 17 que é a versão mais recente lançada neste momento é essa versão que nós vamos estar trabalhando e vamos estar verificando os conceitos recomendo que você esteja utilizando a versão do angular da mesma versão para que você consiga ter o maior aproveitamento aqui desse curso perfeito Então beleza estamos aqui com o nosso angular instalado isso daqui comprova que ele fo foi instalado na nossa máquina e agora a gente consegue estar criando um novo projeto para criar um novo projeto em angular basta a gente escrever ng1 para criar um novo projeto e logo após o nome que nós queremos dar para esse projeto então eu vou colocar angular curso aula um vai ser o nome do aula eu vou colocar angular curso aula vai ser o nome do nosso projeto então eu posso estar criando basicamente dessa forma diretiva NG New e logo após o nome do projeto que eu tô querendo Criar e eu posso dar um enter que agora o nosso projeto ele vai começar a ser criado tem algumas questões que eles vão nos perguntar como por exemplo qual vai ser o formato da folha de estilos que nós vamos estar utilizando então para est estilizando o nosso projeto se a gente vai utilizar o CSS padrão Ou se nós vamos estar utilizando outras ferramentas como SAS por exemplo no nosso caso nós vamos estar utilizando CSS padrão para est utilizando aí o angular então a gente pode estar movimentando através das setinhas a gente seleciona o CSS e vamos estar dando um enter dessa forma a gente consegue estar realizando a seleção de que a gente quer a folha de estilo CSS temos uma nova pergunta aqui que é basicamente questionando se nós queremos estar habilitando o server Side rendering dentro do nosso projeto a gente vai entender mais paraa frente o que significa isso mas por enquanto vocês podem estar habilitando o y dizendo que sim nós queremos estar habilitando mas paraa frente a gente vai entender o que isso significa E como que funciona isso dentro do nosso código agora todas os nossos arquivos estão sendo criados esse processo tende a demorar um pouquinho então assim que ele finalizar eu volto aqui com vocês beleza nosso projeto foi criado perceba aqui na nossa pasta que agora nós temos uma outra pasta que é a pasta do angular curso aula e agora o que nós precisamos é abrir essa pasta utilizando o nosso visual Studio code para isso a gente pode fazer até pelo próprio CMD o que a gente precisa Então é entrar dentro dessa pasta que foi criada essa nossa pasta que tem o nome do projeto que nós colocamos quando dermos o NG New então a gente pode colocar CD para entrar dentro da pasta e logo depois o nome da pasta no nosso caso ular curso aula só dar um mais um enter dando um enter agora perceba que o nome da a direção em que nós estamos dentro agora é o angular curso aula estando dentro da pasta do angular curso aula a gente pode dar um code espaço ponto para abrirmos o visual Studio code dentro dessa pasta em específico então agora o nosso visual estúdio ele é aberto aqui dentro do nosso projeto perceba que várias pastas e vários arquivos padrões já foram criados aqui no nosso projeto E são essas pastas que nós vamos entender a usabilidade de cada uma para entender para que cada uma serve e basicamente no momento do nosso desenvolvimento a gente não fique perdido então aqui a gente tem diversas pastas aqui primeira pasta pvs code esse pon vs code é uma pasta criada por conta do visual Studio code certo então ela não tem muito muita relação exatamente com o nosso angular então é basicamente aqui algumas configurações do nosso visual Studio pra gente tá rodando logo abaixo nós temos a node modules aqui nós vamos ter todos os módulos que vão ser utilizados dentro do nosso projeto Então são vários pacotes basicamente que nós precisamos estar utilizando para rodar o nosso angular perfeitamente bem então sempre que a gente roda um novo projeto angular nós tendemos ali no nosso terminal com colocar npm instal para que a gente consiga instalar o node módulos novamente com todos os pacotes necessários então o angular ele já vem com vários pacotes que a gente pode estar utilizando então pacotes relacionado a testes pacotes relacionados aos comandos que nós vamos utilizar dentro do nosso terminal para criar novos componentes novos serviços novas diretivas e assim por diante então ele já vem com bastante coisa colocada para que a gente não precise instalar coisas externas então a gente Até em alguns momentos necessita essa instalação de questões externas mas na maioria das vezes não porque nós já temos no nosso projeto e tá tudo dentro dessa node modules então é basicamente isso nós temos a pasta src Aonde está a parte principal aqui digamos do nosso projeto aonde nós vamos estar utilizando a maior parte das coisas então maior parte dos arquivos e assim por diante para est desenvolvendo o nosso projeto então eu vou estar deixando para explicar ela por último porque a gente vai se aprofundar um pouquinho mais nessa daqui agora nós temos algum outros códigos aonde nós alguns outros arquivos que nós não utilizamos tanto mas que eles têm no nosso projeto para que a gente consiga realizar algumas funcionalidades Então a gente tem esse editor config que é basicamente a edição que nós estamos utilizando no nosso código basicamente ah quando eu quero dar um espaço Qual é o tamanho da identação e assim por diante aqui embaixo eu tenho Git ignor para que quando a gente faça o coloque o nosso projeto dentro ali do github por exemplo quais são os arquivos que vão ser ignorados para que eles não subam no nosso repositório um deles é a pasta node mods justamente porque como ela é muito pesada por ter todos os módulos todos os pacotes ali do nosso projeto Ela não é uma pasta que precisa subir então quando a gente clona um projeto em angular a partir do momento que a gente clonou o projeto a gente precisa dar o código npm instal pra gente criar essa pasta no de modos visto que ela não vai vai para dentro do nosso repositório e consequentemente no momento em que nós clon o repositório ela também não vem junto perfeito Então aqui estão basicamente os arquivos que a gente ignora nós temos o angular P Jon aonde nós temos algumas configurações referentes ao nosso projeto de angular dificilmente você vai precisar mexer em alguma coisa aqui mas caso seja necessário é essa pasta que você utiliza então basicamente Aqui nós temos já colocados quais são as nossas pastas sets qual o caminho das nossas pastas ests qual o caminho das nossas pastas de estilos e assim por diante então esses caminhos de diretório se você pretende estar mudando você pode estar mudando aqui no nosso angular PJ on logo abaixo nós temos as nossas arquivos de pacotes Então são arquivos aonde ficam os pacotes que nós estamos utilizando os pacotes e seus suas expectivas versões então no PAT Jon a gente tem aqui diversos pacotes e aqui logo ao lado a gente consegue ver a versão desse pacote que nós temos instalado assim a gente consegue ter uma noção para saber ah não tal pacote eu tô na versão tal então eu preciso manter Nessa versão ou preciso evoluir Nessa versão e assim por diante então é aqui no angular no pack de. jon que a gente consegue realizar esse processo nós temos também o ridm esse ridm aqui é quando a gente sobe o nosso projeto lá para dentro do nosso repositório esse é o ridm que vai aparecer Ali pras pessoas que abrem o nosso repositório aqui de início ele já é criado com alguns códigos padrões como por exemplo os códigos pra gente rodar o nosso projeto o código pra gente criar ali um novo componente pra gente buildar o nosso projeto pra gente iniciar os testes e assim por diante então a gente já tem alguns comandos basicamente aqui padrões nos localizando do que a gente pode estar realizando dentro de um projeto angular nós temos a parte relacionado ao nosso servidor então todo o nosso projeto aqui ele é iniciado a rodar dentro desse service. ts então o Run do nosso projeto para ele buildar efetivamente é feito tudo aqui e daí logo depois todas as outras pastas são rodadas e são as outras pastas aonde a gente vai colocar efetivo conteúdo dentro delas e aqui embaixo nós temos os nossos TS configs são as nossas configurações configurações referentes a testes configurações referentes ao nosso código especificamente Então tudo tá aqui Essas são basicamente os arquivos que a gente não mexe tanto mas que são necessários a gente saber basicamente para que que eles funcionam isso por qu Ah eu quero criar um IDM melhor ali no meu repositório você já sabe que é esse arquivo aqui eu quero mexer em algo antes do meu projeto ter rodado é no service.
ts quero verificar versões de pacotes que eu tenho instalado no meu projeto é no pack de. jon então assim a gente consegue se localizar e não fica perdido quando a gente quiser encontrar questões específicas dentro do nosso código então agora a gente vai mexer nos arquivos que efetivamente são os mais utilizados que é dentro dessa Nossa pasta src então clicando aqui na pasta rcrc nós temos algumas outras pastas nós temos a nossa pasta app temos a pasta ests é na pasta SS aonde geralmente nós colocamos aqui arquivos de imagens e assim por diante que nós vamos precisar precisar acessar dentro do nosso projeto então eu posso colocar uma pasta de imagens caso eu tenha um sistema de imagens na minha no meu projeto ou salve imagens de alguma coisa imagens de produtos por exemplo eu posso estar deixando essas imagens aqui no assets imagens relacionadas ao nosso five icon também que é imagenzinha que aparece ali em cima na abinha do nosso navegador a gente já vai ver mais paraa frente nós temos o nosso índex geral Então esse índex ele é carregado em cada um dos componentes que nós tivermos então aqui eu tenho o meu Reid que seriam as partes dos meus metadados dentro do meu HTML eu tenho o meu Body e dentro desse app tracinho Rot é onde vai ser rodado o meu componente que é o componente que nós vamos estar mexendo então aqui é o início basicamente do nosso index HTML nós temos aqui a parte inicial do nosso servidor tanto Main como Main servers e temos aqui o nosso Styles CSS o style. css que fica dentro do src é como se fosse um Style CSS Global então todos os estilos que eu colocar dentro do styles.
css que está dentro do meu src vão ser colocados e vão ser recebidos por todos os componentes que eu tiver dentro do nosso projeto o nosso angular ele é dividido em Componentes então eu posso ter diversos componentes com diversas funcionalidades diferentes porém para estilizar todos eles de uma vez só eu posso estar usando esse arquivo Style CSS porque ao colocar o estilo dentro dele todos os componentes vão estar recebendo esse estilo então é basicamente isso que acontece nesse Styles que nós chamamos de Styles CSS Global perfeito então ele é global e ele atinge todos os componentes que nós temos dentro do nosso projeto Aqui nós temos também a nossa pesta App dentro da pasta app nós temos efetivamente os arquivos que a gente vai mexer bastante primeiro arquivo que a gente vai mexer bastante é o app. houts é nele que nós vamos criar o roteamento as rotas do nosso projeto é basicamente no app. houts PTS então aqui a gente cria rotas nós vamos entender como criar rotas mais paraa frente nós temos os nosso app configs aonde a gente pode colocar o recebimento de alguns pacotes então a gente pode colocar aqui um provide por exemplo se a gente quiser realizar conexões com algum servidor com alguma api a gente precisa colocar um provide http client aqui para incluir o http client ao nosso projeto e aqui a gente coloca vários provides pra gente estar recebendo algumas ferramentas a mais no nosso código a gente vai entender e vai utilizar isso daqui quando a gente estiver realizando o nosso projeto Então a gente tem daí também a nosso o nosso grupo de arquivos que é criado sempre Que Nós criamos a algum tipo de componente Então se a gente cria um componente por padrão ele vai ter criado esses quatro arquivos aqui é o arquivo CSS o arquivo HTML o arquivo spect PTS que seria o arquivo de testes e o arquivo TS Qual é o relacionamento entre eles primeiro deles o app.
component. css esse daqui é basicamente um componente esse componente se chama app é o nosso App component e esse componente tem os quatro arquivos necessários o primeiro arquivo deles é o arquivo CSS nós já vios que nós temos um Style CSS Global aonde eu coloco o estilo e ao colocar o estilo ele afeta todos os componentes do nosso código porém dentro de cada um dos nossos componentes Nós também temos um componente que ele é scoped ele tem um escopo então se eu movimento se eu modifico e coloco algum estilo dentro desse appcomponent pcss que é o nosso estilo do componente App ele vai atingir apenas o componente App ele não vai estar não vai respingar nos outros componentes que eu tenho dentro do meu código ele vai ser utilizado apenas efetivamente no componente app então ele é scoped diferente do global que atinge todo mundo o scoped atinge apenas o componente e aqui que eu coloco esses estilos eu tenho também a parte do meu HTML por padrão ele já inicia com alguns códigos HTML aqui a gente daqui a pouco já vai ver o que que esses códigos htmls constróem dentro da nossa página mas é aqui que eu vou colocar toda a estrutura do nosso projeto todo o esqueleto eu coloco o esqueleto do nosso projeto aqui estilizo o esqueleto do nosso componente aqui no nosso scoped no nosso CSS scoped e assim eu tenho a nossa página construída outra ponta que eu tenho aqui é o nosso spec. ts nós não vamos estar trabalhando nele muito nesse projeto mas ele é basicamente o nosso arquivo de testes para nós criarmos testes unitários aqui dentro do nosso angular e esses textes unitários daí referentes ao nosso componente porque cada componente tem esse arquivo de testes então é básicamente o artivo o arquivo de testes que é criado a partir do momento que Nós criamos algum projeto algum componente aqui dentro do nosso ular e por último mas não menos importante que nós utilizamos bastante também nós temos o nosso app.
component. ts ela esse arquivo aqui é responsável pela lógica completa do nosso componente então é aqui que a gente vai poder realizar comunicação com api aqui que a gente coloca a nossa lógica a nossa lógica de trabalho dentro do nosso componente as nossas regras de negócio modifica variáveis cria métodos e assim por diante é tudo dentro do nosso app. component.
ts então nós temos o CSS para estilização o o HTML para criar estruturas o spec. ts para criar testes e o app component. ts para criar toda a lógica do nosso projeto então agora a gente já passou por todas as pastas que nós temos já entendemos como elas funcionam na parte da teoria porém agora o que a gente pode estar fazendo é rodando o nosso projeto para est entendendo o que que essa pasta Epic component P HTML constrói quando nós iniciamos o projeto então para rodar o projeto O que que a gente tem que fazer eu posso vir aqui em cima em terminal novo terminal e a gente vai utilizar o nosso angular C A nossa interface de comandos do angular pra gente est criando tá criando o projeto não a gente já criou o projeto pra gente estar rodando esse projeto então aqui nesse maizinho eu tô com Power Shell aberto eu não quero usar o Power Shell eu quero est utilizando prompt de comando então eu posso vir nesse nessa setinha ao lado do maizinho e abrindo o prompt de comando abrindo o prompt de comando Agora sim eu posso estar rodando o nosso projeto então eu posso dar um maizinho aqui para ficar um pouco maior a gente conseguir visualizar de forma melhor e agora aqui basta eu colocar um NG serve NG serve faz com que o nosso código ele Rode então ele vai rodar o nosso projeto Basta dar um enter e ele vai começar a rodar o nosso projeto em ângul vamos aguardar que esse processo seja realizado para entender aqui ele tá perguntando se a gente quer dividir algumas informações do nosso projeto com a Google não tem problema eu vou colocar um Yes pode estar dividindo todas as análises do nosso projeto e agora sim ele tá buildando o nosso projeto especificamente com esse único componente que nós temos aqui então vamos buildar e vamos entender perfeito ele budou agora nós temos aqui o nosso projeto rodando no local host 4200 eu posso dar um control Click para abrir aqui dentro do nosso Google e é basicamente essa tela aqui que tá sendo construída pelo nosso appcomponent HTML Se eu der um cont contrl a para selecionar tudo apagar e criar um pezinho aqui escrito olá mundo e salvar automaticamente é recarregada a nossa página e agora aparece apenas o meu olá mundo e como que isso daqui é carregado em tela lembrem-se que nós temos aqui o nosso index P HTML aqui na parte de cima nós temos o nosso Reid os nossos metadados embaixo a gente tem o fechamento da nossa tag HTML e no meio a gente tem o nosso bar é o nosso bar que tá aparecendo aqui porém o nosso bar ele tá carregando uma tag diferente ele tá carregando a tag app tracinho Rot Mas beleza o que que essa app tracinho root Rot carrega Ele Como que o nosso código sabe que o app tracinho root tem que carregar esse componente aqui esse componente esse HTML consequentemente com os estilos desse CSS e assim por diante é porque aqui dentro do nosso appcomponent PTS que é o nosso código de lógica a gente tem um seletor aonde nós conseguimos estar selecionando esse componente em específico que seletor é esse a gente tem várias configurações aqui temos o Import de algumas questões e aqui a gente tem algumas configurações do nosso componente primeira configuração é o nosso seletor o nosso seletor é o que a gente vai tá utilizando para selecionar esse componente e mostrar ele em outros componentes ou em outros lugares do nosso código e o seletor desse componente é app tracinho root então por isso que lá dentro do nosso index P HTML a gente tem uma tag com o mesmo nome ep tracinho Rot significa que eu estou carregando dentro dessa parte aqui de trecho de código o meu componente app que tem como seletor o app tracinho Rot perfeito agora nós temos aqui outra configuração que é o standalone igual a true nessas novas versões do nosso angular o nosso tendo Alone ele já vem como padrão igual a true Isso significa que Diferentemente de projetos antigos de Verões antigas do angular em que a gente tinha uma pasta específica para os nossos módulos aonde a gente importava os nossos módulos Onde por exemplo se a gente fosse usar o http client a gente colocava o http client Se a gente fosse usar o nosso forms modules para usar para utilizar para modificar formulários a gente iria colocar dentro dessa pasta de modules a gente vai colocar tudo dentro de forma escop de forma de scoped em escopo o que que isso significa Se eu precisar dentro do meu HTML utilizar alguma questão que eu preciso incluir algum módulo específico Eu não coloco dentro do meu arquivo de módulos eu coloco aqui nesse imports dentro do próprio componente então cada componente tem os seus imports eu não importo de forma Global eu informo de forma escop dentro de um esc então eu importo dentro do componente que efetivamente está utilizando aquela diretiva então é basicamente isso estend a Lone tira a nossa pasta de módulo geral e ele faz com que fique de forma escop aonde basicamente dentro de cada componente eu importo os modelos que eu necessitar então aqui esse router outlet está sendo importado dentro desse imports então eu consigo est utilizando o módulo do router outlet dentro do meu app.
component aqui embaixo nós temos então referenciando no sentido assim nós já sabemos que esse componente ele utiliza esse HTML e utiliza esse CSS Mas aonde que tá dizendo que eu vou utilizar esse HTML e esse CSS é basicamente no nosso arquivo de lógica dentro do nosso component. ts eu tô falando que como template eu quero est utilizando o app. component HTML e como folha de estilo eu quero estar utilizando o app.
component. css então aqui eu basicamente construí o meu componente então a gente já entendeu então aqui dentro desse app P tracinho root a gente tá carregando o nosso appcomponent P HTML que é a folha de estrutura é o nosso template por isso que o nosso ham mundo aparece agora nós vamos realizar um teste digamos o seguinte eu tô aqui com o meu App component. css eu tenho apenas um pezinho aqui que tá escrito há mundo e eu quero colocar aqui no meu p o estilo de color o estilo de p color Black color red para deixar vermelho vamos salvar agora o meu ham mundo está vermelho perfeito da mesma forma que se eu tirar esse estilo daqui esse é o estilo scoped então é o CSS do do meu componente e colocar aqui no styles.
css geral colocar aqui o nosso P color red ele ainda sim fica vermelho por quê Porque é o estilo Global então ele vai pegar todos os componentes perfeito então beleza A gente já entendeu como que é a estrutura de pastas aqui do nosso projeto outra questão que a gente pode estar entendendo Aqui é a criação de componentes eu já disse aqui para vocês que sempre que eu crio um novo componente automaticamente é criado o componente com esses quatro arquivos padrões CSS HTML de testes e o a lógica o TS porém vamos comprovar que isso efetivamente ocorre nesse nosso terminal eu tô rodando o nosso projeto então todas as modificações que eu faço ele vai atualizando automaticamente na nossa tela então eu vou abrir mais um prompt de comando para não precisar parar a nossa aplicação e aqui eu vou usar um novo código de se do angular C então a gente vai colocar aqui NG generate component NG generate component é utilizado como o comando pra gente gerar um novo componente então eu coloco NG generate para gerar e o que que eu quero gerar eu quero gerar um componente esse componente eu quero gerar Onde eu posso colocar componentes porque eu quero que crie dentro da pasta componentes então ele vai criar essa pastinha E logo depois o nome do arquivo eu vou colocar teste então ele vai criar um componente com o nome de teste dentro da pasta componentes eu posso dar um enter e o processo inicia a criação então ele criou e perceba aqui o que que ele criou Ele criou um arquivo HTML um arquivo de testes um arquivo TS que seria a nossa lógica e o arquivo CSS e ele criou os quatro arquivos que eu falei que nós temos agora perceba no sty CSS Global eu tô tirando os estilos Então agora ele fica preto novamente como padrão defa vou fechar os estilos pra gente não confundir e agora vou abrir aqui a pastinha componentes que foi criada e um novo componente foi criado com o nosso CSS com o nosso HTML já com o textinho aqui com o nosso teste. component o nosso componente de testes e o nosso teste component. ts que seria a nossa lógica a gente já tem aqui o nosso seletor então para selecionar esse componente a gente cri a tag app tracinho teste então é sempre geralmente app tracinho e daí o nome do componente no nosso caso teste eu poderia modificar Sem problema nenhum só mudaria o nome do meu seletor Ok E agora o que nós podemos fazer eu quero carregar na minha página esse componente perceba que ele tem um HTML com informação aqui porém ele não aparece na minha tela porque eu não tô em nenhum lugar referenciando esse seletor e é o que eu quero est fazendo então o que eu vou fazer é o seguinte dentro do meu HTML do meu app.
component que foi o componente criado inicialmente eu vou referenciar O componente que eu acabei de criar a gente já sabe como referenciar é basicamente criar uma tag com o nome do seletor app tracinho Test e fecha a tag Prontinho porém tá dando um erro por qu antes de ser standalone que nem nós vimos aqui o nosso projeto que ele é standalone nós tínhamos o nosso na nossa pasta de modelos o nosso arquivo de módulos aonde nós conseguimos importar o nosso módulo Então a partir do momento que a gente criava um novo componente o nosso componente já era importado dentro da pasta de módulos e automaticamente todos os nossos componentes podiam ter acesso àquele componente que foi criado agora isso não acontece então a gente manualmente tem que vir aqui e falar que o nosso app. component pode ter acesso ao nosso teste. component e como que a gente faz isso dentro aqui do nosso TS do component que vai receber o novo componente então é o app.
component aqui imports eu quero importar o nosso test component então eu vou colocar uma vírgula e vou falar que eu posso estar importando o teste. component perfeito salvei agora o erro aqui parou de aparecer Posso salvar o meu HTML abrindo o meu código perfeito ele aparece o que está no app. component e aparece o que tem dentro do app tracinho teste que é o novo componente que nós acabamos de criar então perfeito a gente já conseguiu aprender a fazer essa correlação a juntar os dois agora vamos comprovar que o nosso CSS é verdadeiro perfeit perfeito sigamos aqui a gente sabe que o nosso teste.
component tem um CSS eu vou colocar aqui o meu P vai ser color Green aqui nesse pezinho do nosso teste salvei perceba ficou verdinho Vamos colocar uma outra cor que eu acho que vai aparecer melhor acho que o Blue vai aparecer melhor mais forte perfeito então aqui eu coloquei que o meu que dentro do meu CSS específico para o componente de teste. component eu quero que o pezinho seja azul então apenas o meu componente teste está azul o olam não ficou agora se eu venho no meu app. component.
ts ss e coloco que eu quero uma color red Agora sim vai mudar o meu componente de cima então perceba que o os as estilizações estão separadas um pro meu componente pro meu componente app e outro pro meu componente de testes perfeito exatamente da forma que nós queremos agora Como que eu faço para estilizar os dois ao mesmo tempo é só eu vir no styles. css global então no styles.
