vxhviet

Wait for multiple observables to finish with forkJoin

SOURCE

When all observables complete, emit the last emitted value from each.

vxhviet

Bootstrap - Center Image or Div

SOURCE, SOURCE, SOURCE

1. How to Center Image/Div in Div:

<div class="container">
	<img src="..." height="20">
</div>

vxhviet

How to animate box-shadow with silky smooth performance

SOURCE

SCSS version

@mixin animated-box-shadow($border-radius) {
  position: relative;
  cursor: pointer;

vxhviet

Bootstrap - Center Div in Div Horizontally

Add mx-auto to the inner div.

<div class="row no-gutters">
  <div class="col-md-12 col-xs-12">
    <div class="separator-white mx-auto"></div>
  </div>
 ...

vxhviet

Angular - Add Custom Class to Element With ngClass

SOURCE, SOURCE

Another syntax for ngClass:

add class hidden-element to div if the condition is satisfied

vxhviet

Angular - Pass Component into Component

SOURCE

Use ng-content (not ng-template) to pass component into component:

<!-- component A -->
<div>
 ....

vxhviet

CSS - Overlay Div without using Absolute position

SOURCE, SOURCE

<div class="box">
  <div class="box-front"></div>
  <div class="box-back"></div>
</div>

vxhviet

CSS - Prevent Relative Divs Overlapping Other Element

SOURCE

(For overlapping div see Cacher, Gist).

The Key info to remember is that Element with position absolute doesn't contribute to parent container width and height. So its parent div just collapse as if they were empty.

The solution is to just provide a height large enough for the parent div.

vxhviet

CSS Draw Triangle

SOURCE, SOURCE

The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for example, the bottom border is colored while the left and right are transparent, which forms the triangle.

.arrow-up {
  width: 0; 
  height: 0; 

vxhviet

How to Center Text in div:

SOURCE, SOURCE, SOURCE

Bootstrap 4:

<div class="row d-flex">
 <span class="mx-auto" id="quantity">Something</span>