Notes on Angular Forms, Terms, Bindings

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

Forms

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

Terms

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

Bindings

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