[Angular] Style HTML elements in Angular using ngStyle
2024-08-31 19:29:17
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'
最新文章
- Docker学习---ubuntu环境
- Spring1：Spring简介、环境搭建、源码下载及导入MyEclipse
- 使用MDK3探测隐藏SSID名称
- 源码编译安装screen
- Machine Learning : Pre-processing features
- redis_查找命令
- backbone--部分总结
- idea修改jsp后不会自动编译和替换（转）
- js中推断对象详细类型
- AES加密，解决了同步问题，和随机密钥和固定密钥，多端通信加密不一致解决办法
- springmvc.xml或spring.xml 能运行配置文件总是出现错误
- 概念学习 - JNDI, JDBC, ODBC, DataSource
- SICP-Elements of program
- [LeetCode] Complex Number Multiplication 复数相乘
- 【leetcode75】Intersection of Two Arrays（数组的交集）
- XSS绕过<>进行测试
- fiddler 一些不为人知的功能
- 插头dp初探
- EF 传递的主键值的数量必须与实体上定义的主键值的数量匹配 原因
- python基础入门学习简单程序练习