I was working on a project and didn't know what the next steps should be to make a button work and do stuff.

So I read the documentation. Why the documentation? Because it's the best and most efficient way to learn and grow.

So I learned a couple things about


All forms should capture user input from view, validate input, help create form model and data model to update, and provide ways to track changes.

There are 2 types of forms:

Reactive - robust, scalable, reusable, testable, model driven. Use only if forms are a key part of your application

Template-driven - less than reactive, but simple, easy to add to just a template (not component)

More on Angular Forms here


I learned while looking for answer to make my app work.

DOM - basically a model that presents to the user's view. Contains organization of elements, attributes, objects...

pipe - transforms input values data before displaying it in template. Uses the pipe character (as operator)

data binding - coordinates the application and DOM data

directives - apply application logic to what gets displayed (think: ngFor and ngIF) <-- those are template syntax elements

there are 2 directives: -structural - alter the layout of DOM to +add -remove or /replace elements such as ngFor or ngIf

-attribute - alter the appearance or behavior of elements such as ngModel or ngSwitch


There are 4 basic bindings between the DOM and component of an application.

2 bindings travel from component to DOM as it requests them -interpolation - displays value from component -property binding - assign a value to a DOM property

1 binding travels from the DOM to the component -event binding - event in DOM triggers a function in component to execute

1 two way binding that connects DOM to component -two-way binding - combines event binding + property binding for a two way data transfer

This post is also available on DEV.