# Installation

{% hint style="danger" %}

### 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.
{% endhint %}

### 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

{% hint style="warning" %}
evalink cause uses SCSS functionality. Make sure you have `SCSS` enabled for your angular project.
{% endhint %}

### 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:

```bash
$ 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.

{% code title="src/styles.scss" %}

```css
# 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
...
```

{% endcode %}

### 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` :

{% tabs %}
{% tab title="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 {}
```

{% endtab %}

{% tab title="app.component.html" %}

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

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cause.evalink.io/getting-started/installation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.