分类: IT
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:
- Bind child component’s property directly
- If not direct binding, then use viewmodel method to bind (easier to unit test also)
- Smuggle some simple logic in the mark up to avoid testing.
- Reference to child component with interface to achieve polymorphism
- 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