[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 不是内部或外部的指令 则证明卸载 ...
随机推荐
- MVC权限验证过滤器
Action属性,权限设定属性 [AttributeUsage(AttributeTargets.Method, Inherited = true, AllowMultiple = false)] ...
- 学习推荐《精通Python网络爬虫:核心技术、框架与项目实战》中文PDF+源代码
随着大数据时代的到来,我们经常需要在海量数据的互联网环境中搜集一些特定的数据并对其进行分析,我们可以使用网络爬虫对这些特定的数据进行爬取,并对一些无关的数据进行过滤,将目标数据筛选出来.对特定的数据进 ...
- PHP的数组分为两种类型,一种是索引数组,一种是关联数组。有如下关联数组,我们如何获取它的第一个key和value呢?
示例:$items=array('name'=>'sjm','age'=>'26','sex' => '男','location'=>'北京'); //当然用循环然后break ...
- 【VC++学习笔记三】控件自绘
MFC应用程序中,大部分的控件类型都已经被定制好了,即便是修改,也只是小范围内的修改,而很多情况下,我们又需要对界面进行特殊定制,这时,最好的办法就是用CWnd类进行派生,自己生成新的窗体,在WM_P ...
- HDU——T 1251 统计难题
http://acm.hdu.edu.cn/showproblem.php?pid=1251 Time Limit: 4000/2000 MS (Java/Others) Memory Limi ...
- 发送邮件被退回,提示: Helo command rejected: Invalid name 错误
我自己配置的 postfix + dovecot server, 配置了outlook 后, 相同的账号. 在有的电脑上能收发成功, 在有的电脑上发送邮件就出现退信.提示 Helo command r ...
- 使用Linux遇到的一些问题和解决方案
1.如何在重装系统或换机器以后继续使用以前用过的thunderbird邮件 执行命令thunderbird -ProfileManager以后会打开一个配置用户界面. 在里面添加一个新的配置,然后选择 ...
- HDU 5384 Danganronpa (AC自己主动机模板题)
题意:给出n个文本和m个模板.求每一个文本中全部模板出现的总次数. 思路:Trie树权值记录每一个模板的个数.对于每一个文本跑一边find就可以. #include<cstdio> #in ...
- Spring_Learn
IOC 控制反转,或者依赖注入 控制权的转移,应用程序本身不负责依赖对象的创建和维护.而是由外部容器负责创建和维护. DI(依赖注入)是其实现的一种方式 创建对象并且组装对象之间的关系. 1Spr ...
- Codefroces Round #429Div2 (A,B,C)
A. Generous Kefa time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...