@scania/tegel-angular-17

This is an ongoing project with the purpose to simplify the integration of Tegel in Angular apps.

This guide here has served as base for the configuration.

Official website: https://tegel.scania.com/

Storybook: https://tds-storybook.tegel.scania.com/

The design system supports the design and development of digital solutions at Scania. The purpose is to secure a coherent, premium brand and user experience across all of Scania's digital touchpoints.

Installation

1. Run npm install @scania/tegel-angular-17
2. In your root module (app.component.ts) import the TegelModule:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { TegelModule } from '@scania/tegel-angular-17';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, TegelModule,],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'my-app';
}

3. In your global css file import the tegel stylesheet.

@import url('@scania/tegel/dist/tegel/tegel.css');

4. In your main.ts import and call defineCustomElement.

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { defineCustomElements } from '@scania/tegel/loader';

defineCustomElements(window);

bootstrapApplication(AppComponent, appConfig).catch((err) =>
  console.error(err)
);

See all available components in the Tegel Design System.

Browser support

See the browser support section on the Tegel website.

Community

Get in touch with the team and the community:

• Teams

License

All CSS, HTML and JS code are available under the MIT license. The Scania brand identity, logos and photographs found in this repository are copyrighted Scania CV AB and are not available on an open source basis or to be used as examples or in any other way, if not specifically ordered by Scania CV AB.