Angular JSS

JSS integration with Angular

Features

Table of Contents

• Installation
• Usage

Installation

Using npm:

npm install @design4pro/angular-jss

or using yarn:

yarn add @design4pro/angular-jss

Usage

Inject the AngularJssModule module into your root module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularJssModule } from '@design4pro/angular-jss';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AngularJssModule.forRoot()],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Use class decorator Styled to add styles to your component:

import { Component } from '@angular/core';
import { Styled, StyledProp, Theme } from '@design4pro/angular-jss';

@Component({
  selector: 'angular-jss-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
@Styled(({ css, injectGlobal }) => {
  // global styles
  injectGlobal({
    '@global': {
      ':root': {
        '--background-color': (data: { backgroundColor: string }) => data.backgroundColor,
      },
    },
  });

  // element styles
  return css(
    (theme: Theme) => ({
      root: {
        color: '#fff',
        backgroundColor: 'var(--background-color)',
        padding: '20px',
        direction: theme.direction,
      },
    }),
    { name: 'first' }
  );
})
export class AppComponent {
  classes: any; // required to use `[ngClass]="classes.root"` in html template

  @StyledProp() // mark property as styled property
  backgroundColor = 'red';

  click() {
    this.backgroundColor = this.backgroundColor === 'red' ? 'green' : 'red';
  }
}

<div [ngClass]="classes.root"></div>

Config options

License

MIT © DESIGN4 ᴾ ᴿ ᴼ