<commit_before>[![CircleCI](https://img.shields.io/circleci/project/github/DevExpress/devextreme-angular/master.svg)](https://circleci.com/gh/DevExpress/devextreme-angular) [![npm version](https://badge.fury.io/js/devextreme-angular.svg)](https://badge.fury.io/js/devextreme-angular)

### If you are looking for the v18.1 branch, please follow this link: [https://github.com/DevExpress/devextreme-angular/tree/18.1](https://github.com/DevExpress/devextreme-angular/tree/18.1).

# Angular UI and Visualization Components Based on DevExtreme Widgets #

This project allows you to use [DevExtreme Widgets](http://js.devexpress.com/Demos/WidgetsGallery/) in [Angular](https://angular.io/) applications.

* [Getting started](#getting-started)
  * [Quick Start](#quick-start)
  * [Prerequisites](#prerequisites)
  * [DevExtreme installation](#add-to-existing-app)
  * [Starting a new application](#create-application)
  * [Server-side Rendering](#server-side-rendering)
  * [Running the local examples](#running-examples)
  * [Include jQuery integration](#jquery-integration)
* [Usage samples](#usage-samples)
  * [Static string option value](#static-option)
  * [Static non-string option value](#static-non-string-option)
  * [Event handling](#event-handling)
  * [Callback functions](#callback-functions)
  * [One-way option binding](#one-way-binding)
  * [Two-way option binding](#two-way-binding)
  * [Custom templates](#custom-templates)
  * [Data layer](#data-layer)
  * [DevExtreme utils](#devextreme-utils)
  * [Components with transcluded content](#components-with-transcluded-content)
  * [Angular forms](#angular-forms)
  * [Using DevExtreme validation features](#devextreme-validation-features)
  * [Configuration components](#configuration-components)
  * [Accessing a DevExtreme widget instance](#accessing-widget-instance)
  * [Angular change detection](#angular-change-detection)
* [Demos](#demos)
* [API reference](#api-reference)
* [Bundle size optimization](#bundle-optimization)
* [License](#license)
* [Support & feedback](#support-feedback)
* [Version history](#version-history)

## <a name="getting-started"></a>Getting Started ##

You have the following options to start:

* Play around with our [Plunker](http://next.plnkr.co/edit/XuAPDd?preview) or [Stackblitz](https://stackblitz.com/edit/angular-c2djgn) without installing anything
* [Add DevExtreme to your existing Angular application](#add-to-existing-app)
* [Creating a new Angular application](#create-application) and install DevExtreme
* [Run the local examples](#running-examples)

### <a name="quick-start"></a>Quick Start **(18.2-beta)** ###

You can use the [Angular CLI](https://github.com/angular/angular-cli) or the [DevExtreme CLI](https://github.com/DevExpress/devextreme-cli) to create a DevExtreme Angular application that already includes several sample views and a navigation menu:

- DevExtreme CLI

        npx devextreme-cli new angular-app app-name
        cd app-name
        ng serve

- Angular CLI

        npm install -g @angular/cli
        ng new app-name --style=scss
        cd app-name
        npm i devextreme-angular@18.2-unstable
        ng g devextreme-angular:add-app-template<commit_msg>Add a link to DevExtreme Angular Template to readme<commit_after>[![CircleCI](https://img.shields.io/circleci/project/github/DevExpress/devextreme-angular/master.svg)](https://circleci.com/gh/DevExpress/devextreme-angular) [![npm version](https://badge.fury.io/js/devextreme-angular.svg)](https://badge.fury.io/js/devextreme-angular)

### If you are looking for the v18.1 branch, please follow this link: [https://github.com/DevExpress/devextreme-angular/tree/18.1](https://github.com/DevExpress/devextreme-angular/tree/18.1).

# Angular UI and Visualization Components Based on DevExtreme Widgets #

This project allows you to use [DevExtreme Widgets](http://js.devexpress.com/Demos/WidgetsGallery/) in [Angular](https://angular.io/) applications.

* [Getting started](#getting-started)
  * [Quick Start](#quick-start)
  * [Prerequisites](#prerequisites)
  * [DevExtreme installation](#add-to-existing-app)
  * [Starting a new application](#create-application)
  * [Server-side Rendering](#server-side-rendering)
  * [Running the local examples](#running-examples)
  * [Include jQuery integration](#jquery-integration)
* [Usage samples](#usage-samples)
  * [Static string option value](#static-option)
  * [Static non-string option value](#static-non-string-option)
  * [Event handling](#event-handling)
  * [Callback functions](#callback-functions)
  * [One-way option binding](#one-way-binding)
  * [Two-way option binding](#two-way-binding)
  * [Custom templates](#custom-templates)
  * [Data layer](#data-layer)
  * [DevExtreme utils](#devextreme-utils)
  * [Components with transcluded content](#components-with-transcluded-content)
  * [Angular forms](#angular-forms)
  * [Using DevExtreme validation features](#devextreme-validation-features)
  * [Configuration components](#configuration-components)
  * [Accessing a DevExtreme widget instance](#accessing-widget-instance)
  * [Angular change detection](#angular-change-detection)
* [Demos](#demos)
* [API reference](#api-reference)
* [Bundle size optimization](#bundle-optimization)
* [License](#license)
* [Support & feedback](#support-feedback)
* [Version history](#version-history)

## <a name="getting-started"></a>Getting Started ##

You have the following options to start:

* Play around with our [Plunker](http://next.plnkr.co/edit/XuAPDd?preview) or [Stackblitz](https://stackblitz.com/edit/angular-c2djgn) without installing anything
* [Add DevExtreme to your existing Angular application](#add-to-existing-app)
* [Creating a new Angular application](#create-application) and install DevExtreme
* [Run the local examples](#running-examples)

### <a name="quick-start"></a>Quick Start **(18.2-beta)** ###

You can use the [Angular CLI](https://github.com/angular/angular-cli) or the [DevExtreme CLI](https://github.com/DevExpress/devextreme-cli) to create a [DevExtreme Angular application](https://devexpress.github.io/devextreme-angular-template) that already includes several sample views and a navigation menu:

- DevExtreme CLI

        npx devextreme-cli new angular-app app-name
        cd app-name
        ng serve

- Angular CLI

        npm install -g @angular/cli
        ng new app-name --style=scss
        cd app-name
        npm i devextreme-angular@18.2-unstable
        ng g devextreme-angular:add-app-template
{'fraction_non_alphanumeric': 0.14567292885740685, 'fraction_numerical': 0.004927625500461965, 'mean_word_length': 4.958715596330276, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 21, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1387455', 'n_tokens_mistral': 2101, 'n_tokens_neox': 1946, 'n_words': 429}