---
# System prepended metadata

title: '5. Templates, Interpolation, and Directives'
tags: [Angular Getting Started]

---

---
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
