Angular Component Template

In Angular, a component is used to manipulate/operate the view. The view is the template. It is comprised of html and Angular directives/binding. So a template is the part of the component that is rendered for the end user to see.

There are two ways to accomplish the template rendering. You can use template or templateUrl.

Template

You can use the template meta data to implement the view inline. This is typically done for simple templates. You utilize ES backticks for the template to have multiple lines. Here is an example…

@Component({
  template: `<div>
                <h1>My Page Header</h1>
             </div>`
})

Typically, your template will be more complex than that. In this case, you can use templateUrl like so…

@Component({
  templateUrl: './app.component.html'
})

This meta date, whether it is template or templateUrl, ties the component to the template html view allowing the component logic to access the template view DOM with its logic and data & vice versa.

Happy Coding!

Clay Hess