Skip to main content
🏠Getting StartedVersion: 2.0.0-beta.7

Installation

Quantum design system - Quantum angular components library.

Install package​

After installing npm or yarn, and having configured the artifactory, you can install @qtm/angular with this command:

npm install -S @qtm/angular@latest

Install fonts​

The Quantum design system was designed with the Roboto font in mind. The Roboto fonts will not be automatically loaded by the Thales design system. The developer is responsible for loading all fonts used in their application.

Roboto & Roboto Mono fonts have a few easy ways to get started.

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
  rel="stylesheet"
/>
info

As the fontsource documentation says, importing the '@fontsource/roboto'or the '@fontsource/roboto-mono' only imports the font weight 400. In order to support more weight or styles, and to import the same configuration as the CDN, you can import the fontsource as below:


import '@fontsource/roboto/100.css';
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
import '@fontsource/roboto/900.css';

import '@fontsource/roboto/100-italic.css';
import '@fontsource/roboto/300-italic.css';
import '@fontsource/roboto/400-italic.css';
import '@fontsource/roboto/500-italic.css';
import '@fontsource/roboto/700-italic.css';
import '@fontsource/roboto/900-italic.css';

Install icons​

The Quantum Design System was designed with the Material icons in mind.

The Material icons will not automatically be loaded by the Quantum Design System. The developer is responsible for loading all icons used in their application.

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
  rel="stylesheet"
/>

Usage​

Once you have installed this package, you just have to import components you need in your Angular application!

import { QtmComponentLibraryModule } from '@qtm/angular';

@NgModule({
  imports: [
    QtmComponentLibraryModule
  ],
})

Here is an example of the integration of a Button component:

<qtm-button
  variant="filled"
  color="primary"
  (clickEvent)="..."
>
  Clicked
</qtm-button>

Using with Angular SSR​

When working with Angular and SSR, dynamically import libraries like @qtm/angular in the ngOnInit method of your standalone component to avoid issues with browser-specific objects like window.

Example:

import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID, Inject } from '@angular/core';

@Component({
  selector: 'app-user-form',
  standalone: true,
  templateUrl: './user-form.component.html',
  styleUrls: ['./user-form.component.css'],
  imports: [CommonModule, FormsModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class UserFormComponent implements OnInit {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngOnInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      import('@qtm/angular').then((m) => {
        console.log('QtmComponentLibraryModule loaded client-side');
      });
    }
  }
}

By adding CUSTOM_ELEMENTS_SCHEMA, Angular will accept custom HTML elements provided by Quantum Design System.

Import styles​

You need to import the css file to see the component styling. It can be done in 2 ways:

  • Option 1: Import the css directly into the styles.css file
@import '@qtm/web-components/dist/web-components/web-components.css';
  • Option 2: Add styles to your angular.json configuration:
"yourApp": {
  "architect": {
    "build": {
      "options": {
        "styles": [
           "node_modules/@qtm/web-components/dist/web-components/web-components.css"
        ]
      }
    }
  }
}

Utilities (Optional)​

It provides you with a complete CSS with a huge set of utility classes as it is generated with Tailwind CSS. Then it will be up to you to optimize for production by purging the CSS according to the classes used in your HTML.

By importing into the global.css file:

@import '@qtm/css/dist/utilities.css';

Example usage:

<div class="flex p-m mb-m">
  <p class="text-primary-500">
    Hello
    <span class="font-bold">World!</span>
    <span role="img" aria-label="Tada!"> 🎉 </span>
  </p>
</div>

If you already using Tailwind CSS in your project or you want to take full advantage of all its features like functions & directives by building your own classes via @apply for example. You can check our package @qtm/tailwind-preset which will explain to you how to use Quantum styles in a Tailwind project.