> For the complete documentation index, see [llms.txt](https://softstack-factory.gitbook.io/mean-stack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://softstack-factory.gitbook.io/mean-stack/angular/wk3/untitled.md).

# Components & Data Binding

Review interpolation, property binding, event binding, and two way 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;

###

##