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. HDU 5389 Zero Escape (MUT#8 dp优化)

    [题目链接]:pid=5389">click here~~ [题目大意]: 题意: 给出n个人的id,有两个门,每一个门有一个标号,我们记作a和b,如今我们要将n个人分成两组,进入两个 ...

  2. Windows Forms 窗体篇

    1,显示窗体 非模式: Form form = new Form(); form.Show(); 模式: Form form = new Form(); form.Show(); 2,拥有者窗体与附属 ...

  3. C# 文件转byte数组,byte数组再转换文件

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  4. 洛谷 P1157 组合的输出

    P1157 组合的输出 题目描述 排列与组合是常用的数学方法,其中组合就是从n个元素中抽出r个元素(不分顺序且r<=n),我们可以简单地将n个元素理解为自然数1,2,…,n,从中任取r个数. 现 ...

  5. oled的一套stm32实验2(自己的实验)

    stm32与OLED屏接口的引脚介绍: CS————GPIOD3: RST————GPIOD4: DC—————GPIOD5: D0——————GPIOD6: D1——————GPIOD7; 上是我参 ...

  6. python3 随机生成6位数的验证码

    python3 随机生成6位数的验证码 要求是数字:0~9 及大小写字母. #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung ...

  7. jmeter--元件的作用域与执行顺序

    1.元件的作用域 JMeter中共有8类可被执行的元件(测试计划与线程组不属于元件),这些元件中,取样器是典型的不与其它元件发生交互作用的元件,逻辑控制器只对其子节点的取样器有效,而其它元件(conf ...

  8. Codeforces Round #258 (Div. 2)——B. Sort the Array

    B. Sort the Array time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  9. BUFSIZ

    转http://www.judymax.com/archives/262 今天在看示例程序时冒出来一句args = emalloc(BUFSIZ); BUFSIZ是什么意思,查了一下才明白. 这是st ...

  10. [AngularFire2] Pagination

    Let's see how to do pagination in Firebase: For the init loading, we only want 3 items: findLessonsK ...