[Angular] Use Angular’s @HostBinding and :host(...) to add styling to the component itself
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.
[Angular] Use Angular’s @HostBinding and :host(...) to add styling to the component itself的更多相关文章
- [Angular 2] Angular 2 Smart Components vs Presentation Components
Both Smart Components and Presentation Components receive data from Services in entirely different w ...
- ASP.NET Core 2.1 Web API + Identity Server 4 + Angular 6 + Angular Material 实战小项目视频
视频简介 ASP.NET Core Web API + Angular 6的教学视频 我是后端开发人员, 前端的Angular部分讲的比较差一些, 可以直接看代码!!!! 这是一个小项目的实战视频, ...
- angular 2 angular quick start Could not find HammerJS
Angular2 的material中 引用了 hammerjs,遇到Could not find HammerJS错误,正确的步骤如下: 需要在如下位置增加 对material 和 hammerjs ...
- [Angular] Control the dependency lookup with @Host, @Self, @SkipSelf and @Optional
Very differently to AngularJS (v1.x), Angular now has a hierarchical dependency injector. That allow ...
- [Angular] Refactor Angular Component State Logic into Directives
Allow the base toggle to be a tag (<toggle>) or attribute (<div toggle>). The <toggle ...
- angular+selecte2(angular ng-repeat渲染)
一.页面代码 <select id="sponsorId" select2 ng-model="sponsorSelectedObj" ng-change ...
- Intergate flot with Angular js ——Angular 图形报表
下面这篇文章最终的结论就是 Flot 插件 结合 Angular 的Directive 来处理 图表的绘制 给出github上的一个demo源码.https://gist.github.com/fly ...
- Angular - - ngRoute Angular自带的路由
ngRoute $routeProvider 配置路由的时候使用. 方法: when(path,route); 在$route服务里添加一个新的路由. path:该路由的路径. route:路由映射信 ...
- @angular/cli (angular脚手架) 如何降级
1.卸载 npm uninstall -g @angular/cli 2.清除缓存 npm cache verify 3.查看是否卸载成功 ng v //如果显示ng 不是内部或外部的指令 则证明卸载 ...
随机推荐
- U-BOOT启动流程分析--start_armboot函数(二)
第二阶段的功能: 初始化本阶段所需的硬件设备(主要设置系统时钟.初始化串口.Flash.网卡.USB) 检测系统内存映射(memory map) 将内核映像和根文件系统映象从Flash上读到RAM空间 ...
- scp---远程拷贝文件
scp命令用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器硬盘变为只读read onl ...
- 学一下gconv, gprof等知识
scons.gcc.gdb.valgrind.gcov SCons 是一个用 Python 语言编写的类似于 make 工具的程序.与 make 工具相比较,SCons 的配置文件更加简单清晰明了. ...
- HDU 5375 Gray code (简单dp)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5375 题面: Gray code Time Limit: 2000/1000 MS (Java/Oth ...
- LeetCode102 Binary Tree Level Order Traversal Java
题目: Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to ri ...
- HDOJ 5419 Victor and Toys 树状数组
分母是一定的C(m,3) 树状数组求每一个数能够在那些段中出现,若x出如今了s段中,分子加上w[x]*C(s,3) Victor and Toys Time Limit: 2000/1000 MS ( ...
- [51Nod]NOIP2018提高组省一冲奖班模测训练(三) 题解
链接 A.Anan的派对 题意:Anan想举办一个派对.Anan的朋友总共有 n 人.第i个人如果参加派对会得到 \(c_i\) 的快乐值,除他自己外每多一个人参加他会减少 \(d_i\) 的快乐值. ...
- call() 和 apply() 的作用和区别
call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就 ...
- Java中Webservice调用.NET天气接口生成客户端异常
学习webservice时候有个例子调用公网的天气预报接口实现查询天气的功能.然而在使用命令编译客户端代码的时候出错了.大概看了一下网上说是需要将将文件中所有出现的 < s:element re ...
- win7禁用启用本地连接bat及vbs
平台:Windows 7 .8.1 目的:用bat启用禁用网卡 操作: cls @ECHO OFFtitle 启用或禁用本地连接 CLS color 0a GOTO MENU:MENU ECHO. E ...