What Are templateUrls and styleUrls in Angular?

Learn the basic of HTML and CSS rendering, the Angular way.

Using Angular, you can separate pages, dialogs, or other sections of your app into components. Components in an Angular application are mainly made up of HTML, CSS, and TypeScript files.

In the TypeScript file, you can add any logic required for the UI to work, such as retrieving data from a server.

You can also render the component’s HTML and CSS using TypeScript, by specifying its template and style attributes. You can use templateUrl or styleUrls to link to external HTML or CSS files.

What Is the template and templateUrl in Angular?

When you create your own component in Angular, you can render the HTML for it using a template. There are two ways you can write your HTML template:

• You can write your HTML code inside a template in the TypeScript file itself.
• You can write your HTML code in an external file, and link the TypeScript file to this HTML file.

In a new component, you can set either the “template” or “templateUrl” attributes depending on where you write your HTML.

1. Create a new Angular app.
2. In the terminal of your application, run the ng generate component command to create a new component. Call the new component “about-page”.

   ng generate component about-page

3. In app.component.html, replace the current code with tags for your new component:

   <app-about-page></app-about-page>

4. Open the about-page.component.ts file. If you do not have a lot of HTML code, you can use the template attribute to write it directly inside the TypeScript file. Replace the @Component decorator with the following:

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

5. If you want to include a multi-lined template, you can use back-tick quotation marks instead:

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

6. In the terminal, type ng serve to compile your code and run it in a web browser. Open your app at http://localhost:4200/. Your HTML code from the TypeScript file will render on the page.

7. In about-page.component.ts, replace “template” with “templateUrl” instead. Include the link to the component’s external HTML file. You can use “templateUrl” if you have more complex HTML code that requires its own file.

   @Component(
   selector: 'app-about-page',
   templateUrl: './about-page.component.html'
   )

8. Add some HTML code to the about-page.component.html file:

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

9. Go back to your browser or re-run ng serve to re-compile your code. Open your app at http://localhost:4200/. The browser now renders the HTML from the about-page.component.html file.

What Are styles and styleUrls in Angular?

Similarly to the HTML, you can use either “style” or “styleUrls” depending on where you choose to store your CSS.

You can include CSS within the TypeScript code if you have very simple CSS declarations. Otherwise, you can use “styleUrls” to link the TypeScript file to an external CSS that contains more styles.

1. In your previously created Angular application, open the about-page.component.ts file. Add a “styles” attribute to the component. Inside “styles”, add your CSS styling for the page:

   @Component(
   selector: 'app-about-page',
   templateUrl: './about-page.component.html',
   styles: ['h2 color:red','p color:green']
   )

2. In the terminal, type ng serve to compile your code and run it in a web browser. Open your app at http://localhost:4200/ to view the styling specified in the TypeScript file.

3. If you have a lot of CSS, use “styleUrls” instead of “styles”, to link the TypeScript file to an external CSS file. In about-page.component.ts, replace the @Component decorator with the following:

   @Component(
   selector: 'app-about-page',
   templateUrl: './about-page.component.html',
   styleUrls: ['./about-page.component.css']
   )

4. Add some CSS styling to about-page.component.css:

   h2 
   color: blue
   
   p 
   color: darkorange
   

5. Go back to your browser or re-run ng serve to re-compile your code. Open your app at http://localhost:4200/ to view the styles used from the external CSS file.

Rendering the HTML of a Component in Angular

Now you know the different ways you can render your HTML and CSS content in an Angular application. You can determine which approach you want to use based on the complexity of your HTML and CSS.

If interested, you can explore how to pass data between the HTML and TypeScript files of an Angular component.