## Introduction

The basics of Wijmo WebComponents v1 implementation and their usage in pure JS applications are demonstrated in the WebComponentsIntro sample.

One of the main benefits of web components is that the same web component implementation can be used in numerous frameworks and utilize their advanced capabilities like property and event bindings.

This sample demonstrates how to use Wijmo WebComponents in Angular applications.

## Setup

You need to apply all the polyfills and Wijmo specific settings common to any WebComponents application, as described in the WebComponentsIntro sample.

Additionally, to enable web components in Angular application, you need to import CUSTOM_ELEMENTS_SCHEMA symbol and specify it in the schemas option of your application's NgModule :

    import {{ '{' }} CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
    ...
    @NgModule({{ '{' }}
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
        ... other options
    })

## Adding Wijmo web components

To use Wijmo web components in your Angular components' templates, you need to import Wijmo WebComponents interop modules containing necessary components, in you component's .ts file. For example, this import statement will import Wijmo input components:

    import 'wijmo/wijmo.webcomponents.input';

And now you can add the InputNumber web component to the template:

    <div>
        <wjc-input-number value="7" step="1"></wjc-input-number>
    </div>

#### Live result: