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

###

##