[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. ...
随机推荐
- Apple Watch 集成环信SDK
本文简单的讲述下怎样用Apple Watch Kit集成环信SDK. 升级xcode到version 6.2,和 IOS SDK8.2 下载环信SDK从官网 打开XCode->new proje ...
- OSX: 逻辑卷管理系统Core Storage(1)
Mac高大上嘛? Mac由于贵就高大上了?Mac由于没有这个哪个就不高大上了?本文没有结论,仅仅是回归技术本源,是不是高大上还要大家自己评说. 大多数Mac用户可能并不在乎苹果的OS X操作系统缺少一 ...
- 【SonicUI】关于字体高亮的问题。。
m_pSonicString[1]->Format(_T("/c=%x, a='http://hi.csdn.net/', linkh=0xFF00F0, font, font_hei ...
- docker网络访问
一 docker网络访问 描述: 在启动容器的时候,如果不指定对应的参数,在容器外部是无法通过网络来访问容器内的网络应用和服务的.当容器中运行一些网络应用,要让外部访问这些应用时,可以通过-P或者-p ...
- Node.js笔记 请求方式 GET
三种方法解析url 1. 传统的字符串split切割方法 2. querystring 只能解析数据部分,不能解析前面 index.html之类的地址部分. 3. url 可以解析地址和数 ...
- 知无涯者(The Man Who Knew Infinity)
1913年的1月16号在剑桥大学的三一学院那里,著名的数学家哈代教授收到了一封信,信的开头是这种: "尊敬的先生.仅自我介绍例如以下,我是马德拉斯港务信托处的一个职员,年薪唯独20英镑.23 ...
- 四种布局JS
现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高.在推荐完图形库之后,再来推荐一些精品的独立 UI 组件.这些组件可组合在一起,形成美观而交互强大的 Web UI . 给 We ...
- Altium Designer如何设置pcb尺寸
- ssh远程执行命令并自动退出
usage: ssh [-1246AaCfgKkMNnqsTtVvXxYy] [-b bind_address] [-c cipher_spec] [-D [bind_address:]port] [ ...
- mysql 配置,还得多看看~
http://blog.chinaunix.net/uid-20639775-id-154429.html