Make sure install the latest Angular v6 with Angular CLI. Checkout ght Github for the code.

1. Create a new application:

ng new elementApp

2. Install @angular/elements package:

ng add @angular/elements --project-name=<your_project_name>

3. Generate a component:

ng g c course-title

4. Conver the element to angular elements: First we need to add our component to 'entryComponents'

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { AppComponent } from './app.component';
import { UserPollComponent } from './user-poll/user-poll.component'; @NgModule({
declarations: [ UserPollComponent],
entryComponents: [CourseTitleComponent],
imports: [BrowserModule]
})
export class AppModule {
constructor(private injector: Injector) {} }

5. Connect Custom Element Web API inside our component:

// course title

constructor(
private injector: Injector
)} ngOnInit() {
const htmlElement = createCustomElement(CourseTitleComponent, {injector: this.injector});
customElements.define('couse-title', htmlElement )
}

  

6. Now the Angular Element should already work in the broswer. If we want to use Angular Element inside Angular Application, we should add 'schemas':

@NgModule({
imports: [
CommonModule
],
...
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

7. If you want to dynamic insert Angular Element into Angular application, such as:

export class AppComponent {
addEl() {
const container = document.getElementById('container');
container.innerHTML = '<course-title></course-title>';
}
}

You need to add polyfill in order to make it work:

npm i --save-dev @webcomponents/webcomponentsjs

Then add into polyfills.js:

..
* APPLICATION IMPORTS
*/ import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';

[Angular] Angular Elements Intro的更多相关文章

  1. [Angular 2] Directive intro and exportAs

    First, What is directive, what is the difference between component and directive. For my understandi ...

  2. [Angular] Angular CDK Intro

    1. Installl latest @angular/cli: sudo npm i -g @angular/cli@next The version I used is:6.0.0-rc.10 2 ...

  3. [Angular 2] Select From Multiple Nested Angular 2 Elements

    You have complete control over the elements you nest inside of your component instance by using sele ...

  4. [Angular 2] Simple intro Http

    To use http, we need to import the HTTP_PROVIDER, so that we can inject http to other component: imp ...

  5. Angular - - angular.Module

    angular.Module Angular模块配置接口. 方法: provider(name,providerType); name:服务名称. providerType:创建一个服务的实例的构造函 ...

  6. Angular - - angular.injector、angular.module

    angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules ...

  7. Angular - - Angular数据类型判断

    angular.isArray 判断括号内的值是否为数组. 格式:angular.isArray(value); value: 被判断是否为数组的值. ------------------------ ...

  8. Angular - - angular.uppercase、angular.lowercase、angular.fromJson、angular.toJson

    angular.uppercase 将指定的字符串转换成大写 格式:angular.uppercase(string); string:被转换成大写的字符串. 使用代码: var str = &quo ...

  9. Angular - - angular.bind、angular.bootstrap、angular.copy

    angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...

随机推荐

  1. RxSwift 系列(四)

    前言 本篇文章将要学习RxSwift中四种转换操作符: map flatMap flatMapLatest scan map 通过使用一个闭包函数将原来的Observable序列转换为一个新的Obse ...

  2. FastReport.Net使用:[15]富文本控件使用

    富文本(Rich Text)控件用于显示Rtf格式的文本. 认识富文本编辑窗体 1.下图就是富文本的编辑窗体,乍一看就像Word一样,不过功能没有Word强大了.具体功能就不一一介绍了,用个Word的 ...

  3. 【BZOJ 2121】 (字符串DP,区间DP)

    2121: 字符串游戏 Description BX正在进行一个字符串游戏,他手上有一个字符串L,以及其他一些字符串的集合S,然后他可以进行以下操作:对于一个在集合S中的字符串p,如果p在L中出现,B ...

  4. 利用yii2分页插件,成对取出数组数据

    数组太大不好处理,切割出来处理 $ids = [1, 2, 3, 4, 5, 6, 7, 8, 9]; $count = count($ids);$size = 2; $pages = new Pag ...

  5. Java 基础总结--反射的基本操作

    一.反射的概念 JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称为 ...

  6. OpenWrt包管理软件opkg的使用(极路由)

    说明: 1.OpenWrt本身系统没什么问题,关键点是一些路由器尝试的限制,比如一些厂商设置成内存分区为只读,那么这个安装软件就变得没什么意义了. 2.opkg的操作有点反人类,正常步骤是查询,安装: ...

  7. .NET 4.6的RyuJIT尾递归优化的Bug

    今天看到园子里有一篇新闻稿.NET 4.6的RyuJIT编译器中发现严重的Bug提到,在.Net 4.6的x64程序中默认启用新的JIT程序RyuJIT在处理尾递归指令的时候有一个Bug,导致无法得到 ...

  8. Appium+python自动化15-在Mac上环境搭建

    前言 mac上搭建appium+python的环境还是有点复杂的,需要准备的软件 1.nodejs 2.npm 3.cnpm 4.appium 5.pip 6.Appium-Python-Client ...

  9. SharePoint 2013 App 示例之图片墙

    应用程序实质上是 Web 应用程序.如果您知道如何生成 Web 应用程序,则您就知道如何生成 SharePoint 相关应用程序.您可以使用任何语言,如 HTML.JavaScript.PHP 或 . ...

  10. [翻译] TLMotionEffect 重力感应

    TLMotionEffect  重力感应 https://github.com/jvenegas/TLMotionEffect This category adds a motion effect t ...