When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular Elements is one of them. In this lesson we learn how to integrate an Angular Element into an AngularJS (v1.x) application. We will leverage some features release in the latest AngularJS 1.7.3 that make it fully compatible with custom elements.

Angular Element:

import {
Component,
OnInit,
Input,
Output,
EventEmitter,
AfterViewInit,
ElementRef,
Attribute,
AfterContentInit,
ChangeDetectorRef
} from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms'; @Component({
// tslint:disable-next-line:component-selector
selector: 'feedback-form',
templateUrl: './feedback-form.component.html',
styleUrls: ['./feedback-form.component.scss']
})
export class FeedbackFormComponent implements OnInit {
feedbackForm: FormGroup;
_name; @Input()
set name(val) {
this._name = val; this.feedbackForm.patchValue({
name: val
});
}
get name() {
return this._name;
} @Output()
feedbackSubmit = new EventEmitter(); constructor() {} ngOnInit() {
this.feedbackForm = new FormGroup({
name: new FormControl(this.name),
feedback: new FormControl('')
});
} onSubmit({ value, valid }) {
if (valid) {
this.feedbackSubmit.next(value);
}
}
}

Using in AngularJS:

const appModule = angular.module('myApp', []);

appModule.component('myApp', {
template: `
<h1>AngularJS < Angular</h1>
<feedback-form ng-prop-name="$ctrl.name" ng-on-feedback_submit="$ctrl.onFeedbackSubmit($event)"></feedback-form>
`,
controller: function() {
this.name = 'Juri'; this.onFeedbackSubmit = ev => {
console.log('Got ', ev.detail);
};
}
}); angular.element(function() {
angular.bootstrap(document, ['myApp']);
});

Here the important things is to know how to listen to the event and passing the prop:

ng-prop-<input_name>
ng-on-<output_name>

[Angular] Use Angular components in AngularJS applications with Angular Elements的更多相关文章

  1. angular.element方法汇总以及AngularJS 动态添加元素和删除元素

    addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容att ...

  2. [Angular 2] Angular 2 Smart Components vs Presentation Components

    Both Smart Components and Presentation Components receive data from Services in entirely different w ...

  3. Angular 2 to Angular 4 with Angular Material UI Components

    Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...

  4. 【js类库AngularJs】解决angular+springmvc的post提交问题

    [js类库AngularJs]解决angular+springmvc的post提交问题 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前 ...

  5. Using RequireJS in AngularJS Applications

    http://www.sitepoint.com/using-requirejs-AngularJS-applications/ While writing large JavaScript appl ...

  6. angular的跨域(angular百度下拉提示模拟)和angular选项卡

    1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...

  7. angular 2+ 变化检测系列三(Zone.js在Angular中的应用)

    在系列一中,我们提到Zone.js,Zones是一种执行上下文,它允许我们设置钩子函数在我们的异步任务的开始位置和结束位置,Angular正是利用了这一特性从而实现了变更检测. Zones.js非常适 ...

  8. 【Angular JS】正确调用JQuery与Angular JS脚本 - 修复Warning: Tired to load angular more than once

    自己正在做一个小网站,使用Angular JS + Express JS + Mongo DB,在开发过程中,遇到一些问题,所以整理出来.希望对大家都有帮助. 这是今天解决的一个问题,Angular ...

  9. [AngularJS] Lazy loading Angular modules with ocLazyLoad

    With the ocLazyLoad you can load AngularJS modules on demand. This is very handy for runtime loading ...

随机推荐

  1. Android WebView加载Html右边空白问题的解决方案

    用WebView显示Html时,右边会出现一条空白区,如下图所示: 最开始的时候,认为是网页本身的空白. 后来发现网页本身无问题,且这个空白区是跟Scroll Bar 的位置和粗细比较相符,于是去控制 ...

  2. python websocket-client connection

    参考:https://pypi.python.org/pypi/websocket-client/    https://www.cnblogs.com/saryli/p/6702260.html i ...

  3. Revit API布置卫浴装置

    //放置卫浴装置 [Transaction(TransactionMode.Manual)] [Regeneration(RegenerationOption.Manual)] public clas ...

  4. .Net Discovery 系列之二--string从入门到精通(下)

    前两节我们介绍了string的两个基本特性,如果你觉得你已经比较全面的了解了string,那么就来看看这第3.4两节吧. 三.有趣的比较操作  在第一节与第二节中,我们分别介绍了字符串的恒定性与与驻留 ...

  5. /bin/sh^M: bad interpreter:没有那个文件或目录解决

    /bin/sh^M: bad interpreter:没有那个文件或目录解决   执行脚本时发现如下错误: /bin/sh^M: bad interpreter: 没有那个文件或目录   错误分析: ...

  6. websocket消息推送实现

    一.服务层 package com.demo.websocket; import java.io.IOException; import java.util.Iterator; import java ...

  7. GO -- 正则表达式

    str := "880218end" match, _ := regexp.MatchString("\\d{16}", str) //六位连续的数字 fmt. ...

  8. BaseControl按钮合集

    BaseControl按钮合集 效果 源码 https://github.com/YouXianMing/Animations // // POPBaseControl.h // Animations ...

  9. 新闻编辑室第三季/全集The Newsroom迅雷下载

    第三季 The Newsroom Season 3 (2014)看点:今日他们终于公布了续订第三季的消息,但同时也宣称第三季将会是<新闻编辑室>的最终季,对剧迷们来说可谓苦乐参半.讲述了一 ...

  10. hdu 2049 不easy系列之(4)——考新郎

    不easy系列之(4)--考新郎 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...