Installation

Learn how to get evalink cause up and running in your Angular project.

evalink cause is not stable yet

Be careful with the usage of this design component library. It is currently in development and has not a stable release yet. The apis might change during the further development.

Requirements

evalink cause is a design component library for Angular and requires at least Angular version 12. It uses the following dependencies from angular it self, make sure you have installed them in your project:

• @angular/common

• @angular/core

• @angular/forms

evalink cause uses SCSS functionality. Make sure you have SCSS enabled for your angular project.

Install evalink cause via npm

The easiest way to install evalink cause into your project is via npm. Open your terminal, navigate to the Angular root folder and run the following command:

$ npm install @evalink/cause

Add evalink cause to your SCSS

Once the installation process is finished you can import the required files into your scss.

src/styles.scss

# Import all the required scss files
@import 'node_modules/@evalink/cause/reset';
@import 'node_modules/@evalink/cause/layout';
@import 'node_modules/@evalink/cause/components';
@import 'node_modules/@evalink/cause/typography';
@import 'node_modules/@evalink/cause/colors';

# Add your own scss code
...

Import evalink cause modules

Add the desired modules to your application modules and use the related components. The following examples shows how to use the CauseHeader :

app.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    // The cause-header directive belongs to the CauseLayoutModule
    CauseLayoutModule,
  ],
  providers: [],
  exports: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.html

<div class="application">
    <header cause-header></header>
    ...
</div>