> For the complete documentation index, see [llms.txt](https://docs.truly-ui.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.truly-ui.com/getting-started.md).

# Getting Started

## Prerequisites

We assume that you have already installed the following packages at least and are already running an AngularIO project.

* [NodeJS >= 10.0.0](https://nodejs.org)
* [Angular Cli >= 8.0.0](https://cli.angular.io/)
* [Angular >= 8.0.0](https://angular.io/)

## Installation

1. Having NPM installation run the following command on your terminal to install it:

   ```bash
    $ npm install --save truly-ui @angular/animations @angular/cdk
   ```
2. Because NPM does not install `peerDependencies`, you should manually install the dependencies:

   ```bash
    $ npm install --save string-format ts-md5 object-path reflect-metadata
    $ npm install --save-dev @types/object-path
   ```
3. Configure styles of used font packages (Icon Packages are already installed when running npm install truly-ui):

   Inside the `angular.json` file add the following paths to the `styles` key.<br>

   ```javascript
    "styles": [
          "src/styles.css",
          ...
          "node_modules/@angular/cdk/overlay-prebuilt.css",
          "node_modules/truly-ui/css/icons/dx-icons/css/icons.scss",
          "node_modules/truly-ui/css/icons/fa-icons/css/icons.scss",
          "node_modules/truly-ui/css/icons/ion-icons/css/icons.scss",
          "node_modules/truly-ui/css/icons/animations.scss"
    ]
   ```
4. Configure CoreModule on your AppModule:

   ```typescript
   import { BrowserModule } from '@angular/platform-browser';
   import { FormsModule } from '@angular/forms';
   import { NgModule } from '@angular/core';

   import { AppComponent } from './app.component';

   import { CoreModule } from 'truly-ui'; //CoreModule

   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       CoreModule.forRoot({theme: 'default'}) // Configurations
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   ```

## **Usage**

The use of the components is basically the importation of the main module and the use of the directives in its application: Example is the import of the input module and its us&#x65;**.**

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library, for example the InputComponent :
import { InputModule, ButtonModule, CoreModule } from 'truly-ui';//Import Modules

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CoreModule.forRoot({theme: 'default'}),

    // Specify your library as an import
    InputModule,
    ButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

Once your library is imported, you can use its components, directives and pipes in your Angular application:

```markup
<!-- You can now use your library component in app.component.html -->

 <tl-input
     [(ngModel)]="Many Properties"
     [iconBefore]="'ion-printer'"
     [placeholder]="'With Placeholder'"
     [textAfter]="'US'"
     [clearButton]="true"
     [autocomplete]="'off'">
 </tl-input>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://docs.truly-ui.com/getting-started.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.