[Angular] Using the platform agnostic Renderer & ElementRef
ElementRef:
ElementRef is a way to access native html element, notice that it only works for Broswer.
Render:
Render helps to take care of different platforms (mobile or browser). It is recommended to use Render to change DOM instead of using ElementRef directly.
<label>
Email address
<input type="email" name="email" ngModel #email>
</label>
export class AuthFormComponent implements AfterViewInit { @ViewChild('email') email: ElementRef; constructor(
private renderer: Renderer
) {} ngAfterViewInit() {
this.renderer.setElementAttribute(this.email.nativeElement, 'placeholder', 'Enter your email address');
this.renderer.setElementClass(this.email.nativeElement, 'email', true);
this.renderer.invokeElementMethod(this.email.nativeElement, 'focus');
// this.email.nativeElement.setAttribute('placeholder', 'Enter your email address');
// this.email.nativeElement.classList.add('email');
// this.email.nativeElement.focus();
} ... }
Another example:
this.loadingService.duration: '2s'
//from
this.el.nativeElement.style.setProperty(
"--duration",
this.loadingService.duration
); // to
this.render.setAttribute(
this.el.nativeElement,
"style",
`--duration:${this.loadingService.duration}`
);
[Angular] Using the platform agnostic Renderer & ElementRef的更多相关文章
- [Angular 2] ElementRef, @ViewChild & Renderer
ElementRef: In Angular2 Doc, it suggest to "avoid" using ElementRef. It access DOM directl ...
- ElementRef, @ViewChild & Renderer
ElementRef: In Angular2 Doc, it suggest to "avoid" using ElementRef. It access DOM directl ...
- [Angular 2] Set Properties on Dynamically Created Angular 2 Components
When you generate Angular 2 components, you’re still able to access the component instance to set pr ...
- Angular复习笔记5-指令
Angular复习笔记5-指令 在Angular中,指令是一个重要的概念,它作用在特定的DOM元素上,可以扩展这个元素的功能,为元素增加新的行为.本质上,组件可以被理解为一种带有视图的指令.组件继承自 ...
- angular使用@angular/material 出现"export 'ɵɵinject' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2324:206-214 "export 'ɵɵinject' was not ...
- ionic2踩坑之文本域自适应高度(自定义指令,适用angular2)
话不多说,看代码: import { Directive, ElementRef, HostListener,Input, Renderer, Component } from '@angular/c ...
- [nodejs,expressjs,angularjs2] LOL英雄列表数据抓取及查询显示应用
新手练习,尝试使用angularjs2 [angularjs2 数据绑定,监听数据变化自动修改相应dom值,非常方便好用,但与传统js(jquery)的使用方法会很不同,Dom操作也不太习惯] 应用效 ...
- 应该是Angular2的一个bug?
为了应对未来的趋势,及时赶上下一趟互联网技术,我最近也在通过具体项目研究angular2,首先必须要吐槽的是,学习angular2的成本本身不高,但是一堆的工具.配置实在让人 很是焦灼,就像asp.n ...
- C++ string
C++ string best practices => LPTSTR, PSTR, CString, _T, TEXT, Win32 API, Win16. string, wstring. ...
随机推荐
- C8815 用 USB网卡(Asix AX88772 )上网
C8815 用 USB网卡(Asix AX88772 )上网 C8815不支持给USB外设供电,不过可以使用自供电的OTG线带动USB设备 C8815最新固件中没有Asix AX88772驱动,需要自 ...
- RocketMQ(八):消息发送
匠心零度 转载请注明原创出处,谢谢! RocketMQ网络部署图 NameServer:在系统中是做命名服务,更新和发现 broker服务. Broker-Master:broker 消息主机服务器. ...
- 1.一个WEB应用的开发流程
先说项目开发过程中团队人员的分工协作. 一.人员安排 毕业至今的大部分项目都是独立完成,虽然也有和其他同事协作的时候,但自认为对团队协作的了解和认知都还有所欠缺.很清楚团队协作的重要性,但尚未有很好的 ...
- 39.Intellij导入子项目时,maven列表子项目灰色不可用---解决方法
转自:https://blog.csdn.net/jackieriver/article/details/79046326 导入子项目的module时,左侧project目录中有一个module图标右 ...
- 1.1 Introduction中 Kafka as a Storage System官网剖析(博主推荐)
不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Kafka as a Storage System kafka作为一个存储系统 An ...
- js日期常用方法
js获取日期时间格式 export function formatDateTime(timeStamp) { var date = new Date(); date.setTime(timeStamp ...
- 关于javascript中私有作用域的预解释
1.如何区分私有变量还是全局变量 1).在全局作用域下声明(预解释的时候)的变量是全局变量 2).在“私有作用域中声明的变量”和“函数的形参”都是私有变量 在私有作用域中,我们代码执行的时候遇到一个变 ...
- opencv cvtColor dtype issue(error: (-215) )
opencv cvtColor dtype issue(error: (-215) ) 更详细的错误信息如下,color.cpp:9710: error: (-215) depth == CV_8U ...
- iOS INVALID_USER_SCODE 定位 用户安全码未通过
iOS 高德地图API不能定位及INVALID_USER_SCODE问题,有需要的朋友可以参考下. 一.在使用高德地图的API的时候,没有办法实现定位,在这里说一下在真机测试的时候出现没法定位应该注意 ...
- 关于IO重定向
首先,Unix进程使用文件描述符0,1,2作为标准输入.输出和错误的通道. 其次,当进程请求一个新的文件描述符的时候,系统内核将最低可用的文件描述符赋给它. 第三,文件描述符集合通过exec调用传递, ...