index.html

---
title: "Angular integration"
date: 2021-04-29T16:00:58+02:00
draft: false
main_title: "Tailwind Elements Angular integration"
subheading: ""
seo_title: "Tailwind Elements integration with Angular - Free Examples & Tutorial"
description: "This article shows you how to integrate Angular application with Tailwind Elements. Free download, AGPL license."
image: "https://tecdn.b-cdn.net/img/components-big.jpg"
url: "docs/standard/integrations/angular-integration/"
menu:
  integrations:
    name: "Angular"
---

<!-- Section: Basic example -->

<section id="section-prerequisites">
  <!-- Title -->
  <h2
    class="mb-5 mt-0 text-3xl font-semibold leading-normal"
    id="prerequisites"
    data-te-spy-item>
    Prerequisites
  </h2>

  <!-- Description -->
  <p class="mb-5">
    Before starting the project make sure to install the following utilities:
  </p>

  <ul class="ml-4 list-disc">
    <li>
      <a
        class="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
        href="https://nodejs.org/en/"
        target="_blank"
        >Node LTS</a
      >
      (14.x.x or higher recommended)
    </li>
    <li>
      <a
        class="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
        href="https://nodejs.org/en/"
        target="_blank"
        >Angular</a
      >
      (14.x.x or higher recommended)
    </li>
    <li>
      Code editor. We recommend
      <a
        class="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
        href="https://code.visualstudio.com/"
        target="_blank"
        >VSCode</a
      >
    </li>
  </ul>

  <div
    class="my-6 rounded-lg bg-primary-100 p-6 text-base text-info-800"
    role="alert">
    <p>
      <strong>Angular Tailwind Elements:</strong>
      <br />
      Currently we are working on a standalone Angular version of Tailwind
      Elements. If you want to know when it is going to be released, sign in in
      our
      <a
        class="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
        href="/angular"
        target="_blank"
        >waiting list availabable here</a
      >.
    </p>
  </div>
</section>

<hr class="my-5 dark:border-neutral-600" />

<!-- Section: Creating Angular app-->
<section id="section-angular-app">
  <!-- Section title-->
  <h2
    class="mb-5 mt-0 text-3xl font-semibold leading-normal"
    id="angular-application"
    data-te-spy-item>
    Creating a new Angular application
  </h2>

  <!-- Description -->
  <p>
    Let's create a fresh Angular application so that we can go through all the
    steps together.
  </p>

  <h2 class="mt-5 text-lg font-bold">Step 1</h2>
  <p class="mb-5">Install Angular CLI</p>

  <div class="pb-4">
    {{< twsnippet/wrapper "terminal" "" "mobile" >}}
    {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
    npm install -g @angular/cli
    {{< /twsnippet/code >}}
    {{< /twsnippet/wrapper >}}
  </div>

  <h2 class="text-lg font-bold">Step 2</h2>
  <p class="mb-5">Create new project</p>

  <div class="pb-4">
    <!--prettier-ignore-->
    {{< twsnippet/wrapper "terminal" "" "mobile" >}}
        {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
        ng new my-project
        cd my-project
        {{< /twsnippet/code >}}
        {{< /twsnippet/wrapper >}}
  </div>
</section>

<hr class="mb-5 dark:border-neutral-600" />

<!-- Creating and configuring Tailwind & Tailwind Elements-->
<section id="section-tailwind">
  <!-- Section title-->
  <h2
    class="mb-5 mt-0 text-3xl font-semibold leading-normal"
    id="tailwind"
    data-te-spy-item>
    Installing and configuring Tailwind CSS and Tailwind Elements
  </h2>

  <!-- Description -->
  <h2 class="mt-5 text-lg font-bold">Step 1</h2>
  <p class="mb-5">Install Tailwind CSS</p>

  <div class="pb-4">
    <!--prettier-ignore-->
    {{< twsnippet/wrapper "terminal" "" "mobile" >}}
        {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
        npm install -D tailwindcss postcss autoprefixer
        npx tailwindcss init
        {{< /twsnippet/code >}}
        {{< /twsnippet/wrapper >}}
  </div>

  <h2 class="text-lg font-bold">Step 2</h2>
  <p class="mb-5">
    Add the paths to all of your template files in your
    <code>tailwind.config.cjs</code> file.
  </p>

  <div class="pb-4">
    <!--prettier-ignore-->
    {{< twsnippet/wrapper "tailwind.config.cjs" "" "mobile" >}}
        {{< twsnippet/code active=true lang="JavaScript" >}}
        /** @type {import('tailwindcss').Config} */
        module.exports = {
        content: [
            "./src/**/*.{html,ts}",
            "./node_modules/tw-elements/dist/js/**/*.js"
        ],
        theme: {
            extend: {},
        },
        plugins: [require("tw-elements/dist/plugin")]
        }
        {{< /twsnippet/code >}}
        {{< /twsnippet/wrapper >}}
  </div>

  <h2 class="text-lg font-bold">Step 3</h2>
  <p class="mb-5">
    Add the <code>@tailwind</code> directives for each of Tailwind’s layers to
    your <code>./src/styles.css</code> file.
  </p>

  <div class="pb-4">
    <!--prettier-ignore-->
    {{< twsnippet/wrapper "styles.css" "" "mobile" >}}
        {{< twsnippet/code active=true lang="CSS" >}}
        @tailwind base;
        @tailwind components;
        @tailwind utilities;
        {{< /twsnippet/code >}}
        {{< /twsnippet/wrapper >}}
  </div>

  <h2 class="text-lg font-bold">Step 4</h2>
  <p>Install Tailwind Elements.</p>

  <div class="py-4">
    <!--prettier-ignore-->
    {{< twsnippet/wrapper "terminal" "" "mobile" >}}
        {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
        npm install tw-elements
        {{< /twsnippet/code >}}
      {{< /twsnippet/wrapper >}}
  </div>

  <h2 class="text-lg font-bold">Step 5</h2>
  <p class="mb-5">
    Import components which are you intend to use and necessary function
    <code>initTE</code>. Initialize <code>initTE</code> in a lifecycle method.
  </p>

  <div class="pb-4">
    <!--prettier-ignore-->
    {{< twsnippet/wrapper "app.component.ts" "" "mobile" >}}
        {{< twsnippet/code active=true lang="JavaScript" >}}
        import { Datepicker, Input, initTE } from "tw-elements";

        ngOnInit() {
          initTE({ Datepicker, Input });
        }
        {{< /twsnippet/code >}}
        {{< /twsnippet/wrapper >}}
  </div>
</section>
<!--/Creating and configuring Tailwind & Tailwind Elements-->

<!-- Initializing via JS-->
<section id="section-initializing-js">
  <!-- Title -->
  <h2
    class="mb-5 mt-0 text-3xl font-semibold leading-normal"
    id="initializing-js"
    data-te-spy-item>
    Initializing via JS
  </h2>

  <!-- Description -->
  <p class="mb-5">
    By default all components have autoinit which means they are initialized by
    data attributes. But if you want to make init by JavaScript - there is also
    possibility to do that.
  </p>

  <h2 class="text-lg font-bold">Step 1</h2>
  <p class="mb-5">Import components which are you intend to use.</p>

  <div class="pb-4">
    <!--prettier-ignore-->
    {{< twsnippet/wrapper "app.component.ts" "" "mobile" >}}
      {{< twsnippet/code active=true lang="JavaScript" >}}
        import { Datepicker, Input } from "tw-elements";
      {{< /twsnippet/code >}}
    {{< /twsnippet/wrapper >}}
  </div>

  <h2 class="text-lg font-bold">Step 2</h2>
  <p class="mb-5">Initialize components in lifecycle hook.</p>

  <div class="pb-4">
    <!--prettier-ignore-->
    {{< twsnippet/wrapper "app.component.ts" "" "mobile" >}}
      {{< twsnippet/code active=true lang="JavaScript" >}}
        ngOnInit() {
          const myInput = new Input(document.getElementById("myDatepicker"));
          const options = {
            format: "dd-mm-yyyy",
          };
          const myDatepicker = new Datepicker(
            document.getElementById("myDatepicker"),
            options
          );
        };
      {{< /twsnippet/code >}}
    {{< /twsnippet/wrapper >}}
  </div>
</section>
<!-- /Initializing via JS-->