Installation

WireBootstrap for Angular and its source code are available in GitHub at https://github.com/WireBootstrap/angular.

git clone https://github.com/WireBootstrap/angular

Sample Project

The solution includes a sample project that demonstrates how to use WireBootstrap when developing in Angular.

After downloading or cloning the project, open it in a web application editor. The examples in this documentation use Visual Studio Code but any web editor can be used. The project has no web service dependencies.

In Visual Studio Code, open a terminal window and run npm install. This will install thenpm packages required to run the project.

npm install

Next, in the same terminal window, run ng serve --o to open the default page in a new browser window.

ng serve --o

WireBootstrap Angular Component

The WireBootstrap Angular Component and it's source code are included as a separate Angular project in the \projects\wire-angular directory. For new projects, the build version can also be installed by itself as an NPM package at @wirebootstrap/wire-angular.

npm install @wirebootstrap/wire-angular

tsconfig.json

When using the WireBootstrap Angular Component in a new project, register the location of the WireBootstrap NPM scope root directory in the compilerOptions.typeRoots array inside the project's tsconfig.json file.

{  
  "compilerOptions": {
  ...
    "typeRoots": [
      "./node_modules/@wirebootstrap"
      ]
  }
}

angular.json

Installing the WireBootstrap Angular Component also installs the core WireBootstrap library and jQuery dependencies.

Register these libraries in the scripts array for the Angular project in the angular.json file.

{
  ...
    "scripts": [
      "./node_modules/jquery/dist/jquery.js",
      "./node_modules/@wirebootstrap/wire/wire.js"
    ]
}