JSS Theme Angular

Angular bindings for jss-theme package.

Deprecated

This package is deprecated for Angular version starting from 9. with Ivy enabled. Please refer to this section for new usage.

Demo & docs

Demo and docs could be found here.

Example in sandbox could be found here.

Notes

Include necessary typescript typings.

Update

As stated below both @NgStyled decorator and NgStyledComponent works bad w/ Ivy and aot mode.

To overcome this since version v1.1.1 it is intoduced ThemeProvide, UseStyles and createJssStyledComponent section.

Steps to easily migrate old projects:

// NgStyledComponent.ts
import { createJssStyledComponent, ThemeProvide } from 'jss-theme'
import { theme } from './path/to/your/app/theme';

const themeProvider = new ThemeProvide(theme);

const NgStyledComponent = createJssStyledComponent(themeProvider);

Then in your app just replace old NgStyledComponent with new:

// import { NgStyledComponent } from 'jss-theme-angular';
import { NgStyledComponent } from './path/to/your/app/NgStyledComponent';

@Component({ ... })
class SomeComponent extends NgStyledComponent {
  constructor() { super(styles); }
}

!!! NOTE is is also necessary to change invocations of updateTheme() from jss-theme package with themeProvider.updateTheme() in order for themeProvider track theme changes.

Another way is to use UseStyles decorator.

Important

This bindings correctly works w/ Angular 8 and 9 without Ivy.

In Ivy there were introduced breaking changes so that it is impossible to use as earlier custom decorators / extend classes. Here is an Issue.

Still it is possible to use this JSS Theming solution w/ Angular with Ivy, just doing manually that work, which is done under @NgStyled and NgStyledComponent.

Usage

@NgStyled(styles, options?, theme?)

Decorator for usage with Angular components. Internally creates property 'classes' and puts classNames for compiled styles into it and watches for theme updates.

NOTE! Because of --aot Angular compiler, it is necessary to at least implement those methods, which are used in custom decorator in Component. So for styles w/ theme ( aka: makeStyles((theme) => ({ ... })) ) in is necessary implement both ngOnInit and ngDoCheck. For styles which do not depend on theme -> only ngOnInit.

If one of necessary methods won't be provided -> it will throw an Error to prevent bugs in future.

OR! use NgStyledComponent.

Second optional argument provides default options for creating new stylesheets.

Third optional argument could be used to call this method on specific Theme instance:

import { Component, OnInit, DoCheck } from '@angular/core';
import { makeStyles, NgStyled, Theme, Classes } from 'jss-theme';

const SomeTheme = new Theme({ spacing: 1 });

const styles = makeStyles({
	className1: {
		display: 'flex',
		marginTop: 10,
	},
});

@Component({
	template: `<div [class]="classes.className1">Jss styled div</div>`,
	...
})
// @NgStyled(styles, null, Theme) // Specific Theme
@NgStyled(styles) // Default Theme
export class SomeComponent implements OnInit, DoCheck {
  public classes: Classes = { };

  public ngOnInit(): void {}

  public ngDoCheck(): void {}
}

NgStyledComponent

Class for usage with Angular components. Internally creates property 'classes' and puts classNames for compiled styles into it and watches for theme updates.

NOTE! Please be sure to set target: 'es2015' in your tsconfig.json in order to use NgStyledComponent because of Angular CLI changes.

Second optional argument provides default options for creating new stylesheets.

Third optional argument could be used to call this method on specific Theme instance:

import { Component } from '@angular/core';
import { makeStyles, NgStyledComponent, Theme } from 'jss-theme';

const SomeTheme = new Theme({ spacing: 1 });

const styles = makeStyles({
	className1: {
		display: 'flex',
		marginTop: 10,
	},
});

@Component({
	template: `<div [class]="classes.className1">Jss styled div</div>`,
	...
})
export class SomeComponent extends NgStyledComponent {
  public classes: Classes = { };

  constructor() {
    // super(styles, { ... }, Theme); // Specific Theme
    super(styles); // Default Theme
  }
}