---
description: >-
  Review interpolation, property binding, event binding, and two way data
  binding
---

# Components & Data Binding

## Slides

{% embed url="https://docs.google.com/presentation/d/1BdYBVZxQ7Pu9CpjNGjz6hQ5OgLLlv9hfY0hvjG4GJik/edit?usp=sharing" %}

## Understanding Angular Components

Most work you do with Angular relates to components. Basically an Angular application is a tree of components with a root component. The root component by default is _**app.component.ts**_ A component controls a part of the web application screen. It consists of JavaScript (or precisely TypeScript) code, HTML code and CSS. If you are familiar with the MVC (Model-View-Controller) architecture or design pattern, each component actually uses the same architecture: the component's code represents the controller and the HTML code (with CSS) represents the view.

#### Component File Naming Convention

Each component will have a pattern of **\<component name>. component.ts,** Remember <> denotes a placeholder for your name. All angular building blocks are named in this manner to help better identify what the file   \
**For example:**

* app.component.ts
* foo.component.ts
* header.component.ts

File Naming Patter\
\<name> . \<angular block type> .  \<file extension>&#x20;

###

##
