Angular 2 Directives allow you manipulate elements by adding custom behaviors through attributes. This lesson covers how to create a Directive and attach its behavior to an element.

import {Directive, HostBinding} from '@angular/core';

@Directive({
selector: '[myText]'
})
export class TextDirective { @HostBinding() innerText;
constructor() {
this.innerText = "I am text directive!"
}
}

There are tow things important here:

  • selector: '[myText]', this is an attr selector.
  • HostBinding: Bind to host element's props.

If we using like this:

<div myText>I am a div</div>
<span>I am a span</span>
<hr>
<span myText>My text will be changed!</span>

This directive will change div and last span's innerText to 'I am text directive!'.

[Angular Directive] 1. Write an Angular Directive的更多相关文章

  1. [Angular] Step-By-Step Implementation of a Structural Directive - Learn ViewContainerRef

    For example we have two buttons: When we click nether one of those tow button, the modal should show ...

  2. angular源码分析:angular中脏活累活的承担者之$interpolate

    一.首先抛出两个问题 问题一:在angular中我们绑定数据最基本的方式是用两个大括号将$scope的变量包裹起来,那么如果想将大括号换成其他什么符号,比如换成[{与}],可不可以呢,如果可以在哪里配 ...

  3. angular源码分析:angular的整个加载流程

    在前面,我们讲了angular的目录结构.JQLite以及依赖注入的实现,在这一期中我们将重点分析angular的整个框架的加载流程. 一.从源代码的编译顺序开始 下面是我们在目录结构哪一期理出的an ...

  4. angular源码分析:angular的源代码目录结构说明

    一.读源码,是选择"编译合并后"的呢还是"编译前的"呢? 有朋友说,读angular源码,直接看编译后的,多好,不用管模块间的关系,从上往下读就好了.但是在我看 ...

  5. [转]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 ...

  6. angular学习笔记(二)-创建angular模块

    如果在页面的html标签(或任意标签)中添加ng-app,表示对整个页面应用angular来管理. 他是一个模块. 模块有助于把东西从全局命名空间中隔离. 今天学习如何自定义创建模块: <!DO ...

  7. angular源码分析:angular中入境检察官$sce

    一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/&qu ...

  8. angular的跨域(angular百度下拉提示模拟)和angular选项卡

    1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...

  9. angular源码分析:angular中jqLite的实现——你可以丢掉jQuery了

    一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 r ...

  10. angular源码分析:angular中各种常用函数,比较省代码的各种小技巧

    angular的工具函数 在angular的API文档中,在最前面就是讲的就是angular的工具函数,下面列出来 angular.bind //用户将函数和对象绑定在一起,返回一个新的函数 angu ...

随机推荐

  1. 关于大数据项目创建时所需setting.xml(博主推荐)

    我目前,收录经常用的是,这两个版本,这个根据博主我本人的经验之谈,最为稳定和合理的. 注意:我的本地路径是在D:/SoftWare/maven/repository,大家自己改为你们自己的即可.   ...

  2. 用djbdns为域名解析服务护航

      上期回顾:http://chenguang.blog.51cto.com/350944/292195       650) this.width=650;" alt="&quo ...

  3. 版本管理系统:svn和git

    svn是常用的版本管理系统,解决团队协作开发和版本管理问题, 一.服务器端:是一个文件存储仓库,可以设置用户并管理其访问的权限.主要功能包括 ①设置文件存储路径,是管理文件版本的基础 ②设置用户:可以 ...

  4. 非常有用的sql脚本

    /*sql 语法学习*/ /*函数的学习---------------------------------------*/ 获取当前时间(时/分/秒):select convert(varchar(1 ...

  5. 浅谈Git与SVN的使用感受

    作为版本号控制工作.两者的做大的差别应该在于:Git属于分布式版本号控制工具,而SVN属于集中式的版本号控制工具.分布式的优点是什么呢?举个样例来说.当你在火车上离线状态下编程工作,在某个阶段会须要先 ...

  6. 41.关于Intellij IDEA菜单项中Compile、Make和Build的区别

    转自:https://www.cnblogs.com/ini_always/archive/2011/10/23/2221985.html Compile.Make和Build的区别   针对Java ...

  7. 109.vprintf vfprintf vscanf vfscanf

    vprintf //输出到屏幕 int POUT(char *str, ...) { va_list arg_p=NULL; //读取 va_start(arg_p, str); //接受可变参数 i ...

  8. 【河南省多校脸萌第六场 E】LLM找对象

    [链接]点击打开链接 [题意] 在这里写题意 [题解] 把n个时间离散化一下. 对于不是相邻的点,在两者之间再加一个空格就好. 这样最多会有1000个位置. 则定义dp[i][k][j] 表示前i个数 ...

  9. 为什么出现ORM

    ORM(Object Relational Mapping)对象关系映射,是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术 . 为什么出现ORM? 面向对象的特征:我们通常使用的开发语言J ...

  10. 洛谷——U10206 Cx的治疗

    https://www.luogu.org/problem/show?pid=U10206 题目背景 「Cx的故事」众所周知,Cx是一个宇宙大犇.由于Cx在空中花园失足摔下,导致他那蕴含着无穷智慧的大 ...