[Angular] Use Angular’s @HostBinding and :host(...) to add styling to the component itself
2024-10-21 15:50:09
One thing that we can do is to add styles directly to HTML elements that live within our component. However, in this lesson we see that style classes added to your template HTML within your component get applied to an inner <div>
and not your component host. We will learn how to use :host(...)
and @HostBinding
to add styling directly to the component host itself.
import { Component, HostBinding } from '@angular/core'; @Component({
selector: 'host-styling',
template: `
<div>
I'm a div that wants to be styled
<button (click)="redFont = !redFont">toggle</button>
</div>
`,
styles: [
`
/* Apply this style if .yellow-style is added to the component tag itself */
:host {
background-color: yellow;
display:block;
} :host(.red-font) {
color: red;
}
`
]
})
export class HostStylingComponent {
@HostBinding ('class.red-font') redFont = true; }
We can use :host(<class-name>) with @HostBinding, it will add .red-font class to the host element based on condition.
最新文章
- 判断是否是有效的IPV4地址
- PHPCMS-V9 获取一级栏目、二级栏目、三级栏目
- [转]C++ DLL远程注入与卸载函数
- qooxdoo 3.0 发布,JavaScript 的 GUI 框架
- C++中的namespace用法
- struts2于validate要使用
- 爱你不容易 —— Stream详解
- C++ struct 初始化的问题
- iOS-UI控件优化
- webpack4.0各个击破(1)—— html部分
- JavaScript里面的arguments到底是个啥?
- linux 学习笔记 groupadd创建组
- Quick Union
- JavaWeb核心之Servlet
- BZOJ.3004.[SDOI2012]吊灯(结论)
- 菜鸟学JS(三)——自动隐藏的悬浮框
- 查看虚拟机CENTOS7 的 IP 地址和命令
- hostname命令详解
- [Training Video - 4] [Groovy] String Functions
- 【视频编解码&#183;学习笔记】4. H.264的码流封装格式 &; 提取NAL有效数据