---
title: 5. Templates, Interpolation, and Directives
tags: Angular Getting Started
image:
---

# 5. Templates, Interpolation, and Directives

* Template Introduction
* Create a Component
* How to use a component with HTML tag

## Template
@Component({
selector: 'app-component-overview' ,
**templateUrl**: './component-overview.component.html',
})

==p.s can use template or templateUrl==

Use template

    template: "<h1>Title</h1>"
    or
    template: `<div> My First Component </div>`

## Binding

* Interpolation -> one-way binding
(data from class to template)
* Property Assignment

<h1 innerText= {{ pageTitle }} ></h1>

## Directive
* Custom directive
* Built-in directive (Structural Directives):
* ngIf -> logic (Add to the DOM/ Delete from the DOM)
* ngFor -> loop