[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. ...
随机推荐
- HDU 5389 Zero Escape (MUT#8 dp优化)
[题目链接]:pid=5389">click here~~ [题目大意]: 题意: 给出n个人的id,有两个门,每一个门有一个标号,我们记作a和b,如今我们要将n个人分成两组,进入两个 ...
- Windows Forms 窗体篇
1,显示窗体 非模式: Form form = new Form(); form.Show(); 模式: Form form = new Form(); form.Show(); 2,拥有者窗体与附属 ...
- C# 文件转byte数组,byte数组再转换文件
using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...
- 洛谷 P1157 组合的输出
P1157 组合的输出 题目描述 排列与组合是常用的数学方法,其中组合就是从n个元素中抽出r个元素(不分顺序且r<=n),我们可以简单地将n个元素理解为自然数1,2,…,n,从中任取r个数. 现 ...
- oled的一套stm32实验2(自己的实验)
stm32与OLED屏接口的引脚介绍: CS————GPIOD3: RST————GPIOD4: DC—————GPIOD5: D0——————GPIOD6: D1——————GPIOD7; 上是我参 ...
- python3 随机生成6位数的验证码
python3 随机生成6位数的验证码 要求是数字:0~9 及大小写字母. #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung ...
- jmeter--元件的作用域与执行顺序
1.元件的作用域 JMeter中共有8类可被执行的元件(测试计划与线程组不属于元件),这些元件中,取样器是典型的不与其它元件发生交互作用的元件,逻辑控制器只对其子节点的取样器有效,而其它元件(conf ...
- 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 ...
- BUFSIZ
转http://www.judymax.com/archives/262 今天在看示例程序时冒出来一句args = emalloc(BUFSIZ); BUFSIZ是什么意思,查了一下才明白. 这是st ...
- [AngularFire2] Pagination
Let's see how to do pagination in Firebase: For the init loading, we only want 3 items: findLessonsK ...