- Angular 2 - Services
- Angular 2 - Nested Containers
- Angular 2 - Lifecycle Hooks
- Angular 2 - User Input
- Angular 2 - Custom Pipes
- Angular 2 - Transforming Data
- Angular 2 - Handling Events
- Angular 2 - Data Display
- Angular 2 - Third Party Controls
- Angular 2 - Advanced Configuration
- Angular 2 - Dependency Injection
- Angular 2 - CLI
- Angular 2 - Forms
- Angular 2 - Navigation
- Angular 2 - Routing
- Angular 2 - Error Handling
- CRUD Operations Using HTTP
- Angular 2 - Data Binding
- Angular 2 - Metadata
- Angular 2 - Directives
- Angular 2 - Templates
- Angular 2 - Components
- Angular 2 - Architecture
- Angular 2 - Modules
- Angular 2 - Hello World
- Angular 2 - Environment
- Angular 2 - Overview
- Angular 2 - Home
Angular 2 Useful Resources
- Angular 2 - Discussion
- Angular 2 - Useful Resources
- Angular 2 - Quick Guide
- Angular 2 - Questions and Answers
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Angular 2 - Templates
In the chapter on Components, we have already seen an example of the following template.
template: <span> <h1>{{appTitle}}</h1> <span>To Tutorials Point</span> </span>
This is known as an inpne template. There are other ways to define a template and that can be done via the templateURL command. The simplest way to use this in the component is as follows.
Syntax
templateURL: viewname.component.html
Parameters
viewname − This is the name of the app component module.
After the viewname, the component needs to be added to the file name.
Following are the steps to define an inpne template.
Step 1 − Create a file called app.component.html. This will contain the html code for the view.
Step 2 − Add the following code in the above created file.
<span>{{appTitle}} Tutorialspoint </span>
This defines a simple span tag and references the appTitle property from the app.component class.
Step 3 − In the app.component.ts file, add the following code.
import { Component } from @angular/core ; @Component ({ selector: my-app , templateUrl: app/app.component.html }) export class AppComponent { appTitle: string = Welcome ; }
From the above code, the only change that can be noted is from the templateURL, which gives the pnk to the app.component.html file which is located in the app folder.
Step 4 − Run the code in the browser, you will get the following output.
From the output, it can be seen that the template file (app.component.html) file is being called accordingly.
Advertisements