liveBook · Manning

Define-typography-config function

As explained in Pro Angular 16

The Angular Material Sass define-typography-config function creates a typography configuration map from named text styles.

define-typography-config returns a map of named text styles. Access a style such as button through Angular Material typography functions to obtain its font settings. section 28.3.2

Configure button typography

Declare $typography: material.define-typography-config(); then pass it with the button style name: material.font-family($typography, button), material.font-size($typography, button), and material.font-weight($typography, button).

How Pro Angular 16 covers it

How deep it goes
Explains the returned style map and demonstrates reading button font properties, without detailing typography style definitions.
Examples
Uses a $typography variable and applies its button style to custom buttons through family, size, and weight functions.
What it assumes
Assumes familiarity with Sass variables and Angular Material's module namespace, while naming the button style used in the example.
What you can do after
Apply it via Angular Material Sass font functions when styling custom button components.
How it connects
Connects typography configuration with Sass modules, Angular Material themes, named text styles, and font access functions.
Cover of Pro Angular 16
liveBookmanning.com
Read Pro Angular 16 on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Pro Angular 16. The section links point to the parts of the book it draws on.