AngularLynx

    CSS Modules

    Component styles from a .module.css file, with class names hashed at build time so they can't clash with other styles.

    css-modulessrc/app/app.ts

    What it shows

    • Importing a .module.css file — import styles from './demo.module.css' gives you an object that maps each class name to its hashed name. See CSS Modules.
    • [class]="styles['card']" — applies a hashed class in the template. The component exposes styles as a field so the template can read it.
    • A type declaration — src/css-modules.d.ts declares *.module.css imports, so TypeScript accepts them.
    • The hashed names on screen — the last card prints what card and title compile to.