Angular

HTMLPLUS elements are fully compatible with Angular framework.

#

Install

Install HTMLPLUS package into Angular application.

npm install @htmlplus/ui

#

Update Angular Module

Tell Angular to ignore all custom element tags defined in the @htmlplus/ui.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class AppModule { }

#

Usage

Import the reference of elements.

import { Component } from '@angular/core'; import '@htmlplus/ui'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { } <plus-switch />

#

Properties

To set properties and attributes.

<plus-switch disabled />

#

Events

To handle event's callback.

import { Component } from '@angular/core'; import '@htmlplus/ui'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { onChange() { alert('The switch toggled!'); } } <plus-switch (plus-change)="onChange()" />