Quick notes for angular refactoring

recently having to refactor a complex component in angular, some experience I think could be beneficial  for the future, so take a note here:

  1. Bind child component’s property directly
  2. If not direct binding, then use viewmodel method to bind (easier to unit test also)
  3. Smuggle some simple logic in the mark up to avoid testing.
  4. Reference to child component with interface to achieve polymorphism
  5. Use [hidden] to avoid the

Expression has changed after it was checked

From <https://blog.angular-university.io/angular-debugging/>

Or set binding value after delay()

      6. service class can return observable, can be piped and subscribed, but inside component we can convert toPromise() and do async/await for better readability, catch exception and return null for the promise<T>.

vertical-align only works for inline elements

 

knowing whether the element is block or inline is important to do vertical alignment

vertical-align only works for inline elements

you have to rely on margin and/or position:relative or position:absolute + top:50% or flex with flex-direction: row and align-items:(for cross axis)to align vertically for block element.

Reference:

https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Block-level_vs._inline

https://www.w3schools.com/css/css_align.asp

http://phrogz.net/CSS/vertical-align/index.html

A Complete Guide to Flexbox