Components & Data Binding

Review interpolation, property binding, event binding, and two way data binding

Slides

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>