Defining Inline and External Templates, and Using Relative URLs
Understand how and when to use the external and inline templates in Angular.
Nov 13, 2019 • 5 Minute Read
Introduction
In this guide, we'll learn about inline and external templates. In Angular, our views are defined in the HTML template, which can be inline or external. We’ll walk through each of these.
View with Inline Template
First, we'll learn how to use the inline template to display the primary view. In this section, we'll make a component from scratch without using any Angular commands.
Make a separate folder in the app folder. In the components folder, we'll make a new folder named "demo" for our application, because it is a demo application, and create a Typescript file named demo.component.ts.
In the demo folder, we’ll follow certain steps to make the component. These steps are listed below:
- Create the exported class file in demo/demo.component.ts
- Add the @Component decorator
- Add the class name in app.module.ts
- Configure the @Component decorator with selector, template, and style
- Add the selector to app.component.ts in the form of tag
Make the Exported Class File in demo/demo.component.ts
Make the class, which can be exported to use in other places. It will look like the below code snippet.
export class DemoComponent {}
You can give any name to your component.
Add @Component Decorator
Add the @Component decorator @angular/core at the top of the class name.
@Component({})
export class DemoComponent {}
After successfully making the component, we need to register it with the app.module.ts file.
Add the Class Name in app.module.ts
We’ll add our class name in the declarations array of the @NgModule decorator.
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { DemoComponent } from "./components/demo/demo.component";
@NgModule({
declarations: [DemoComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Now we need to set up our @Component decorator and add some HTML, CSS, and, most importantly, the selector.
Configure @Component Decorator
We’ll add the selector in app.component.html to make it visible in the view, and some HTML content to test our component with some style. The selector name might be anything. It depends on you. I'm going to add “Hello World” in my template and a text color in my style. The final component will look like this:
import { Component } from "@angular/core";
@Component({
selector: "app-demo-component",
template: `
<strong>Hello World</strong>
`,
styles: [
`
strong {
color: red;
}
`
]
})
export class DemoComponent {}
The template property contains our HTML, and the styles property includes the array of styles.
Add the Selector to app.component.ts
Now we add the selector to app.component.ts to add our view into DOM and make it visible.
<app-demo-component></app-demo-component>
Our component is now ready to deploy. Run the ng serve command on the CMD/Terminal and check the output.
As you can see, our output is precisely matched to our expected output. We're done with the inline template, and you’ve mastered it. But there is a limitation in this pattern. Suppose we have a thousand lines of code in HTML and CSS. In that case, it would become weird and challenging to handle. That's why we always prefer an external template and external CSS.
In the next section, I'll walk you through the external template and CSS.
View with External Template
To add the external template and style, we need to make two more files in the demo folder: an HTML file and a CSS file. I'm going to name them demo.component.html and demo.component.css. I'm following Angular best practices and naming conventions; you can choose any name you like.
Then we move the code of the template property in demo.component.html.
<strong>Hello World</strong>
Next, move styles property code in demo.component.css
strong {
color: red;
}
Finally, change the demo.component.ts code.
import { Component } from "@angular/core";
@Component({
selector: "app-demo-component",
templateUrl: "./demo.component.html",
styleUrls: ["./demo.component.css"]
})
export class DemoComponent {}
You can see some differences between the previous and current code. Instead of template, we have used templateUrl, and we replaced styles with styleUrls.
These changes are essential because both properties template and templateUrl mean a different kind of metadata. Angular identifies what to do as per the metadata given in the @Component decorator. Same goes for the style, styles, and styleUrls.
Now you can see the output with no difference.
Conclusion
It’s essential to understand when to use the external and inline templates in Angular. With this guide, I hope you have gained an understanding of how and when each template is used.
