Angular Style

To style an Angluar application, we need two types of tools: a layout tool and component style tool. The Angular team builds both for developers: Angular Flex Layout and Angular Material design.

1. Flexbox Introduction

The following notes are based on the following sites:


1.1 Container and Flow Direction

Angular Flex layout is based on flexbox and is independent of Angular material. Flexbox is one-dimension layout. All items should be put into a container that has a CSS style of display: flex. Items are arranged in one direction defined in flex-direction property. By default, it is flex-direction: row that arranges items from left to right. The direction defined by flex-direction is called main direction or main-axis and the other direction is called cross direction or cross-axis.

By default, items are laid out in the source order. The direction flow can be reversed by using row-reverse or column-reverse values. For individual item, use order: <integer>; /* default is 0 */ to change its order.

1.2 Item Alignment

Use justify-content to control main-axis alignment and align-items to control cross-axis alignment.

There are five values for justify-content: flex-start, flex-end, center, space-between and space-around. In space-between mode, there is equal space between two items, but not between an item and its container. In space-around, there is equal space between two items and between an item and its container.

The align-items also has five values: flex-start, flex-end, center, stretch, and baseline. For stretch mode, items take up the entirety of the cross-axis if their height properties are auto.

Use align-self to overide align-items for an individual item.

1.3 Item Size

The width and height control item size regardless of the flex direction. However, flex-basis is axis-aware and site the size for the corresponding main axis: width for row and height for colun.

By default, an item has a flex-grow: 0 property that means an item styas with its size property and doesn’t grow to take up the space in the container. The flex-grow value is a relative value that is proportional to the others. The value is about change rate. A value of 3 has three times as much as grow rate of a value of 1.

Similar to flex-grow, the flex-shrink property is a relative value that shrinks an item when the container shrinks. To disable shrinking, use flex-shrink: 0.

The flex property is a shortcut for flex-grow, flex-shrink and flex-basis. The default value is flex: 0 1 auto.

1.4 Wrap

The flex-wrap controls the wraping behavior of items. The default is nowrap. Use wrap and wrap-reverse to enable multiple lines.

When there are multiple lines (some items are wrapped), the align-content controls the alignment when there is extra space in the cross-axis. It has 6 values: flex-start, flex-end, center, space-between, space-around, and stretch (the default).

2. Angular Flex Layout Directives

There is a live dome hosted in

2.1 Use Angular Flex Layout

You need to install angular/flex-layout npm package and import FlexLayoutModule in main module file.

For stable version, use npm install @angular/flex-layout --save. For the latest build, use npm install --save.

Use it in the main module:

import { FlexLayoutModule } from '@angular/flex-layout';
  imports: [FlexLayoutModule],

2.2 The API

2.2.1 Container Styles

To control dirction, use fxLayout that has values of row (the default), column, row-reverse, and column-reverse. An optional wrap value can be combined with the direction value to control flow behavior.

The fxLayoutAlign controls the item sizes of both the main-axis and the cross-axis using a pattern <main-axis> <corss-axis>. The corss-axis doesn’t support the baseline value.

Use fxLayoutGap to set gap between items. The value could be %, px, vw and vh.

Use fxLayoutWrap to set the wrap behavior of children.

2.2.2 Element Styles Within Containers

Use fxFlex to control the <grow> <shrink> <basis> of an item.

Use fxFlexOrder to control order.

Use fxFlexOffset to control offset.

Use fxFlexAlign to control alignment of this single child.

The fxFlexFill maximizes width and height of elemtn in a container.

2.2.3 Special Reponsive Features

There are help directives include fxHide, fxShow, ngClass and ngStyle to add styles. Theses directives can be combined with breakpoints. The breakpoints alias are: xs, sm, md, lg, xl, lt-sm, lt-md, lt-lg, lt-xl, gt-xs, gt-sm, gt-md, and gt-lg.

Two examples, <div fxShow fxHide.xs="false" fxHide.lg="true"> ... </div> and <div fxFlex="50%""100%"> ... </div>.

3. Material Design

Using Angular material design is straightforward. First, follow the getting started guide in to setup Angular to use a specific theme.

Then, check the documents in to learn how to use each component.

You can customize a theme as described in

If your app’s content is not placed inside of a mat-sidenav-container element, you need to add the mat-app-background class to your wrapper element (for example the body). This ensures that the proper theme background is applied to your page.

Use Google materical icons and fonts by including <link href="|Roboto:300,400,500" rel="stylesheet"> in index.html. Then add the body style as body { font-family: 'Roboto', sans-serif; } in style.css file.

Written on November 10, 2017