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的更多相关文章

  1. [Angular 2] ElementRef, @ViewChild & Renderer

    ElementRef: In Angular2 Doc, it suggest to "avoid" using ElementRef. It access DOM directl ...

  2. ElementRef, @ViewChild & Renderer

    ElementRef: In Angular2 Doc, it suggest to "avoid" using ElementRef. It access DOM directl ...

  3. [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 ...

  4. Angular复习笔记5-指令

    Angular复习笔记5-指令 在Angular中,指令是一个重要的概念,它作用在特定的DOM元素上,可以扩展这个元素的功能,为元素增加新的行为.本质上,组件可以被理解为一种带有视图的指令.组件继承自 ...

  5. 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 ...

  6. ionic2踩坑之文本域自适应高度(自定义指令,适用angular2)

    话不多说,看代码: import { Directive, ElementRef, HostListener,Input, Renderer, Component } from '@angular/c ...

  7. [nodejs,expressjs,angularjs2] LOL英雄列表数据抓取及查询显示应用

    新手练习,尝试使用angularjs2 [angularjs2 数据绑定,监听数据变化自动修改相应dom值,非常方便好用,但与传统js(jquery)的使用方法会很不同,Dom操作也不太习惯] 应用效 ...

  8. 应该是Angular2的一个bug?

    为了应对未来的趋势,及时赶上下一趟互联网技术,我最近也在通过具体项目研究angular2,首先必须要吐槽的是,学习angular2的成本本身不高,但是一堆的工具.配置实在让人 很是焦灼,就像asp.n ...

  9. C++ string

    C++ string best practices => LPTSTR, PSTR, CString, _T, TEXT, Win32 API, Win16. string, wstring. ...

随机推荐

  1. Apple Watch 集成环信SDK

    本文简单的讲述下怎样用Apple Watch Kit集成环信SDK. 升级xcode到version 6.2,和 IOS SDK8.2 下载环信SDK从官网 打开XCode->new proje ...

  2. OSX: 逻辑卷管理系统Core Storage(1)

    Mac高大上嘛? Mac由于贵就高大上了?Mac由于没有这个哪个就不高大上了?本文没有结论,仅仅是回归技术本源,是不是高大上还要大家自己评说. 大多数Mac用户可能并不在乎苹果的OS X操作系统缺少一 ...

  3. 【SonicUI】关于字体高亮的问题。。

    m_pSonicString[1]->Format(_T("/c=%x, a='http://hi.csdn.net/', linkh=0xFF00F0, font, font_hei ...

  4. docker网络访问

    一 docker网络访问 描述: 在启动容器的时候,如果不指定对应的参数,在容器外部是无法通过网络来访问容器内的网络应用和服务的.当容器中运行一些网络应用,要让外部访问这些应用时,可以通过-P或者-p ...

  5. Node.js笔记 请求方式 GET

    三种方法解析url 1. 传统的字符串split切割方法 2. querystring     只能解析数据部分,不能解析前面 index.html之类的地址部分. 3. url   可以解析地址和数 ...

  6. 知无涯者(The Man Who Knew Infinity)

    1913年的1月16号在剑桥大学的三一学院那里,著名的数学家哈代教授收到了一封信,信的开头是这种: "尊敬的先生.仅自我介绍例如以下,我是马德拉斯港务信托处的一个职员,年薪唯独20英镑.23 ...

  7. 四种布局JS

    现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高.在推荐完图形库之后,再来推荐一些精品的独立 UI 组件.这些组件可组合在一起,形成美观而交互强大的 Web UI . 给 We ...

  8. Altium Designer如何设置pcb尺寸

  9. ssh远程执行命令并自动退出

    usage: ssh [-1246AaCfgKkMNnqsTtVvXxYy] [-b bind_address] [-c cipher_spec] [-D [bind_address:]port] [ ...

  10. mysql 配置,还得多看看~

    http://blog.chinaunix.net/uid-20639775-id-154429.html