O que são templateUrls e styleUrls em Angular?

Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado.

Usando Angular, você pode separar páginas, caixas de diálogo ou outras seções de seu aplicativo em componentes. Os componentes em um aplicativo Angular são compostos principalmente de arquivos HTML, CSS e TypeScript.

No arquivo TypeScript, você pode adicionar qualquer lógica necessária para que a interface do usuário funcione, como recuperar dados de um servidor.

Você também pode renderizar o HTML e o CSS do componente usando TypeScript, especificando seus atributos de modelo e estilo. Você pode usar templateUrl ou styleUrls para vincular a arquivos HTML ou CSS externos.

por que minha mensagem não diz entregue

MAKEUSEDO VÍDEO DO DIA

O que é o template e templateUrl em Angular?

Quando você crie seu próprio componente em Angular , você pode renderizar o HTML para ele usando um modelo. Há duas maneiras de escrever seu modelo HTML:

Você pode escrever seu código HTML dentro de um modelo no próprio arquivo TypeScript.
Você pode escrever seu código HTML em um arquivo externo e vincular o arquivo TypeScript a esse arquivo HTML.

Em um novo componente, você pode definir os atributos 'template' ou 'templateUrl' dependendo de onde você escreve seu HTML.

Crie um novo aplicativo Angular .
No terminal do seu aplicativo, execute o do componente de geração comando para criar um novo componente. Chame o novo componente de 'página sobre'.
```
ng generate component about-page
```
Dentro app.component.html, substitua o código atual por tags para seu novo componente:
```
<app-about-page></app-about-page>
```
Abra o sobre-page.component.ts Arquivo. Se você não tiver muito código HTML, poderá usar o atributo template para escrevê-lo diretamente no arquivo TypeScript. Substitua o decorador @Component pelo seguinte:
```
@Component({ 
  selector: 'app-about-page', 
  template: '<h2>About Page</h2><br><p>This is rendering the HTML from the TypeScript file!</p>' 
}) 
```

Se quiser incluir um modelo com várias linhas, você pode usar aspas de crase:

@Component({ 
  selector: 'app-about-page', 
  template: `<h2>About Page</h2> 
              <br> 
              <p>This is rendering the HTML from the TypeScript file!</p>` 
})

No terminal, digite de servir para compilar seu código e executá-lo em um navegador da web. Abra seu aplicativo em http://localhost:4200/. Your HTML code from the TypeScript file will render on the page.
Dentro sobre-page.component.ts , substitua 'template' por 'templateUrl'. Inclua o link para o arquivo HTML externo do componente. Você pode usar 'templateUrl' se tiver um código HTML mais complexo que exija seu próprio arquivo.
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html' 
})
```

Adicione algum código HTML ao sobre-page.component.html arquivo:

<h2>About Page</h2> 
<p>This is rendering the HTML from the HTML file!</p>

Volte para o seu navegador ou execute novamente de servir para recompilar seu código. Abra seu aplicativo em http://localhost:4200/. The browser now renders the HTML from the sobre-page.component.html Arquivo.

O que são estilos e styleUrls em Angular?

Da mesma forma que o HTML, você pode usar 'estilo' ou 'estiloUrls' dependendo de onde escolher armazenar seu CSS.

o seu telefone carrega mais rápido no modo de baixo consumo de energia

Você pode incluir CSS no código TypeScript se tiver declarações CSS muito simples. Caso contrário, você pode usar 'styleUrls' para vincular o arquivo TypeScript a um CSS externo que contenha mais estilos.

Em seu aplicativo Angular criado anteriormente, abra o sobre-page.component.ts Arquivo. Adicione um atributo 'estilos' ao componente. Dentro de 'estilos', adicione seu estilo CSS para a página:
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html', 
  styles: ['h2 {color:red}','p {color:green}'] 
})
```
No terminal, digite de servir para compilar seu código e executá-lo em um navegador da web. Abra seu aplicativo em http://localhost:4200/ to view the styling specified in the TypeScript file.
Se você tiver muito CSS, use 'styleUrls' em vez de 'estilos' para vincular o arquivo TypeScript a um arquivo CSS externo. Dentro sobre-page.component.ts , substitua o decorador @Component pelo seguinte:
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html', 
  styleUrls: ['./about-page.component.css'] 
})
```
Adicione um pouco de estilo CSS a sobre-page.component.css :
```
h2 { 
  color: blue 
} 
p { 
  color: darkorange 
}
```
Volte para o seu navegador ou execute novamente de servir para recompilar seu código. Abra seu aplicativo em http://localhost:4200/ to view the styles used from the external CSS file.

Renderizando o HTML de um Componente em Angular

Agora você conhece as diferentes maneiras de renderizar seu conteúdo HTML e CSS em um aplicativo Angular. Você pode determinar qual abordagem deseja usar com base na complexidade de seu HTML e CSS.

como tirar uma imagem de um pdf

Se estiver interessado, você pode explorar como passar dados entre os arquivos HTML e TypeScript de um componente Angular.