[Angular] Style HTML elements in Angular using ngStyle
We will learn how to make use of the ngStyle
directive to directly add multiple style attributes to a DOM element as a style property. We’ll also learn how we can make these styles more dynamic through user input.
import { Component } from '@angular/core'; @Component({
selector: 'ngstyle-component',
template: `
<div [ngStyle]="borderStyle">
Here are some inline styles!
</div> <p>
<input type="text" #boxWidth>
<button (click)="updateStyle(boxWidth.value)">set</button>
</p>
`
})
export class NgStyleComponent {
borderStyle = {
border: '1px solid black',
'border-radius': '3px',
'width.px': 200,
padding: '15px'
}; updateStyle(width) {
this.borderStyle['width.px'] = width;
}
}
Notice that when we use ngStyle, we are able to add '.unit' to the style.
'width.px': 200,
If not useing this syntax, you need to do:
width: '200px'
[Angular] Style HTML elements in Angular using ngStyle的更多相关文章
- [Angular 2] Nesting Elements in Angular 2 Components with ng-content (AKA Angular 2 Transclusion)
You can place content inside of the instance of your component element then manage it inside of the ...
- [Angular] Use ngx-build-plus to compile Angular Elements
We can treat Angular Element as each standlone lib and compile each Angular element spreatly. Tool w ...
- [Angular] Use Angular style sanitization to mark dynamic styles as trusted values
Angular has a very robust security model. Dynamically inserted html, style or url values into the DO ...
- angular源码分析:angular的整个加载流程
在前面,我们讲了angular的目录结构.JQLite以及依赖注入的实现,在这一期中我们将重点分析angular的整个框架的加载流程. 一.从源代码的编译顺序开始 下面是我们在目录结构哪一期理出的an ...
- angular源码分析:angular的源代码目录结构说明
一.读源码,是选择"编译合并后"的呢还是"编译前的"呢? 有朋友说,读angular源码,直接看编译后的,多好,不用管模块间的关系,从上往下读就好了.但是在我看 ...
- [转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout
本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular Typ ...
- angular的跨域(angular百度下拉提示模拟)和angular选项卡
1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...
- angular源码分析:angular中jqLite的实现——你可以丢掉jQuery了
一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 r ...
- angular源码分析:angular中脏活累活的承担者之$interpolate
一.首先抛出两个问题 问题一:在angular中我们绑定数据最基本的方式是用两个大括号将$scope的变量包裹起来,那么如果想将大括号换成其他什么符号,比如换成[{与}],可不可以呢,如果可以在哪里配 ...
随机推荐
- tensorflow学习之路-----卷积神经网络个人总结
卷积神经网络大总结(个人理解) 神经网络 1.概念:从功能他们模仿真实数据 2.结构:输入层.隐藏层.输出层.其中隐藏层要有的参数:权重.偏置.激励函数.过拟合 3.功能:能通过模仿,从而学到事件 其 ...
- RQNOJ PID496/[IOI1999]花店橱窗布置
PID496 / [IOI1999]花店橱窗布置 ☆ 题目描述 某花店现有F束花,每一束花的品种都不一样,同时至少有同样数量的花瓶,被按顺序摆成一行,花瓶的位置是固定的,从左到右按1到V顺序 编号 ...
- C++的new_handler
这个new_handler其实对应于signal_handler 当operator new申请一个内存失败时,它会进行如下的处理步骤:1.如果存在客户指定的处理函数,则调用处理函数(new_hand ...
- 实验记录三 通用输入输出(GPIO)
之前把全部程序都跑了一次后,得到了导师下一步的安排. 例如以下: 1.编写一个程序.实如今LCD上显示一个万年历,包含年月日 星期 还有室内的温度.2.编写一个程序,将原来的交通灯改为跑马灯. 期限是 ...
- Anders Hejlsberg 和 Erich Gamma
Anders Hejlsberg 和 Erich Gamma 大概半年前,我写了一篇名叫<有点软文>的文章,深情并茂地告诉大家,我司其实隐藏着很多牛人巨擘.有些人是身怀屠龙技,但是大家不认 ...
- 适合ASP.NET Web API使用的场景
富客户端web应用程序:ASP.NET Web API适合大量使用AJAX调用的富客户端应用程序,如Silverlight应用程序,基于Adobe Flash的应用程序或单页应用程序(SPA)等. 本 ...
- POJ 1269 Intersecting Lines 直线交
不知道谁转的计算几何题集里面有这个题...标题还写的是基本线段求交... 结果题都没看就直接敲了个线段交...各种姿势WA一遍以后发现题意根本不是线段交而是直线交...白改了那个模板... 乱发文的同 ...
- shell项目-分发系统-构建文件分发系统
shell项目-分发系统-构建文件分发系统 需求背景对于大公司而言,肯定时不时会有网站或者配置文件更新,而且使用的机器肯定也是好多台,少则几台,多则几十甚至上百台.所以,自动同步文件是至关重要的. 实 ...
- mysql 编码错误修改
set character_set_results=utf8;
- Linux 创建新用户并添加到sudo用户组
附上一份相当奢华的文档: https://www.cnblogs.com/jxhd1/p/6528574.html 添加用户到组 usermod -a -G sudo newone