In previous artical, we introduce the how to use *ngFor. The limitation for previous solution to display all the heros is we hard cord all heros in our heroes component. First, in real world app, we cannot hard cord;  Seond, even we don't hard code,…

In this post, we are going to create our own structure directive *ngFor. What it should looks like in HTML? <div> <ul> <li *myFor="let item of items; let i = index;"> {{ i }} Member: {{ item.name | json }} </li> <templ…

<!--The content below is only a placeholder and can be replaced.--> <div style="text-align:center"> <h1> Welcome to {{ title }} </h1> <h1>循环数据 显示数据的索引(key)</h1> <ul> <li *ngFor="let item of list;…

You can use Select and Option elements in combination with ng-for and ng-model to create mini-forms that change your data as you make a selection. /** * Created by wanzhen on 23.10.2015. */ import {Component, View, NgFor, FORM_DIRECTIVES} from 'angul…

When you use @ViewChildren, the value can only be accessable inside ngAfterViewInit lifecycle. This is somehow different from @ViewChild, which value can be accessed from ngAfterContentInit lifecycle. import { Component, ChangeDetectorRef, Output, Vi…

一.需求演变及描述: 1. 有一个“客户对公司的总体评价”的字段(evalutation).字段为枚举类型,0-5,对应关系为:0-暂无评价,1-很差,2-差,3-一般,4-好,5-很好 2. 后来需要根据评分使用星星来表现,一共5颗星,分为实星和空星,例如,当3分时,三颗星星被点亮,即3颗实星2颗空星. 二.开发前准备: 1. 用于描述星星的图标,也可以是图片,我这里使用 iconfont 2. 新建一个星级评分组件,便于复用 通过命令 ng g component rating 我新建了一个…

ng-bootstrap: tabset 本文介绍了 ng-bootstrap 项目中,tabset 的实现分析. 使用方式 <ngb-tabset> 作为容器元素,其中的每个页签以一个 <ngb-tab> 元素定义,在 <ngb-tabset> 中包含若干个 <ngb-tab> 子元素. 在 <ngb-tab> 元素中,使用 <ng-template> 模板来定义内容,内容分为两种:标题和内容. 标题使用 [ngbTabTitle]…

https://www.jianshu.com/p/0f5332f2bbf8 ng-template.ng-content.ng-container三者应该是自定义组件需要经常用到的指令.今天咱们就来简单了解下ng-template.ng-content.ng-container的基本用法. 一.ng-content ng-content是内容映射指令(也叫内容嵌入),内容映射指的是在组件中嵌入模板代码,方便定制可复用的组件,很好地扩充组件的功能,方便代码的复用. 我们再往简单一点想ng-con…

angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net/topic/12/post/2 系列目录 (1)组件详解之模板语法 (2)组件详解之组件通讯 (3)内容投影, ViewChild和ContentChild (4)指令 内容投影 1为什么需要内容投影? 一个事物的出现,必然存在它所能解决的问题,让我们先从问题出发吧: 大家应该都知道,在html规…

原文链接 Understanding ViewChildren, ContentChildren, and QueryList in Angular 使用场景 有时候,我们想要在父组件中访问它的子组件.在Angular中可以使用ViewChildren ViewChild ContentChildren 来实现对子组件的访问. 假设,我们封装了一个Alert子组件 // alert.component.html <h1 (click)="alert()">{{type}}&…

挑战全年最低价!MyEclipse线上狂欢继续!火热开启中>> 在进入年底之时,2017 CI 9是我们最大的版本发布之一.在新版本中,我们添加了对Angular 5和TypeScript 2.5的支持,同时添加了一些新的服务器连接器.轻量级主题.内联搜索,同时我们选择了比常规补丁更多的补丁,使其成为一个真正的强大更新. [MyEclipse 2017 CI 9安装包下载] Angular & TypeScript Angular 5 在新版本中,您可以使用Angular v5了!如果…

We have looked at @ContentChild in article(http://www.cnblogs.com/Answer1215/p/6414657.html). Now let's how to query multi children by using @ContentChildren and QueryList. First of all, let's add few more auth-remember component into our form compon…

heros.ts: import {Component} from "@angular/core"; const HEROES = [ {id: 1, name:'Superman'}, {id: 2, name:'Batman'}, {id: 5, name:'BatGirl'}, {id: 3, name:'Robin'}, {id: 4, name:'Flash'} ]; @Component({ selector:'heroes', styleUrls: [ 'heroes.c…

This lesson covers Angular 2’s version of looping through data in your templates: ng-for. It’s conceptually the same as Angular 1’s ng-repeat, but you’ll find the syntax quite different as it aligns with #refs in Angular 2 and JavaScript “for of” loo…

ngFor ngForOf指令通常使用缩写形式*ngFor为集合中的每个项呈现模板的结构指令.该指令放置在元素上,该元素将成为克隆模板的父级. <li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li> 一般使用是: const list = [{age: '16'}, {age: '18'}, {age: '15'}] <li *ngFor="let item…

Let's see how to track index when we use 'ngFor: <li *ngFor="#hero of heros | async, #i = index"> <hero-item [hero]="hero" (changed)="thisHero = $event;" [index]="i"></hero-item> </li> #i = i…

We want the start-pipe more flexable to get param, so when using it, we pass a second param as status: <li *ngFor="#todo of todoService.todos | started : 'started'"> It will be handled as a second param which is an array of the transform()…

1.定义属性 2.绑定属性.绑定html中 3.循环获取数据 编写的时候没有注意,第二个循环 i 需要改成 {{i}} ,这样才会显示 出效果 4.自定义方法 变量名截图省略 5.*ngIf条件判断 6.表单处理 7.双向数据绑定 (1).导入相关模块 (2).定义属性,查看效果 (3).效果查看…

Web Component 在介绍Angular Component之前,我们先简单了解下W3C Web Components 定义 W3C为统一组件化标准方式,提出Web Component的标准. 每个组件包含自己的html.css.js代码. Web Component标准包括以下四个重要的概念: Custom Elements(自定义标签):可以创建自定义 HTML 标记和元素: HTML Templates(HTML模版):使用 概括来说就是,可以创建自定义标签来引入组件是前端组件化的…

Angular中的装饰器是一个函数,它将元数据添加到类.类成员(属性.方法)和函数参数. 用法:要想应用装饰器,把它放在被装饰对象的上面或左边. Angular使用自己的一套装饰器来实现应用程序各部件之间的相互操作. 这个地方是前面几个模块(Modules), 指令(Diretives).组件(Components).依赖注入(Dependency Injection)等从装饰器这个侧面的整理. 你需要做的: 1.搞清楚理解TypeScript的装饰器原理. 2.搞清楚这里面每一个装饰器的作用,…

Previously we have tab-panel template defined like this: <ul class="tab-panel-buttons" *ngIf="tabs"> <li [ngClass]="{selected: tab.selected}" (click)="selectTab(tab)" *ngFor="let tab of tabs;">…

看这篇文章基本明白怎么渲染模板,但是我的工程会报错说#号非法,这篇的写法也不好用. angular2.0.0的语法集: Angular for TypeScript 语法快速指南 (基于2.0.0版本) 引导 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; platformBrowserDynamic().bootstrapModule(AppModule); 使用JIT编译器引导一个AppM…

@angular/ckd 是 ng 对于 ui 组建的基础架构. 是由 material 团队开发与维护的, 之所以会有 cdk 看样子是因为在开发 material 的时候随便抽象一个层次出来给大家用. 这系列是我按照官网教程和查了一下 angular/material 源码的学习笔记. 1. KeyManger  运用场景是 select, menu 这种有 list options 的组件, 负责处理键盘上下按钮时 option active 的逻辑 ng 提供了 3 个类 ListKey…

#### 最专业,最全面的angular的学习文档 https://www.jianshu.com/p/f0f81a63cbcb ### https://www.cnblogs.com/xiaoweihuang/p/9794478.html ##### angular的指令传参数. ##### angular中度了解. #### rxjs可以避免angular的单向数据流. angualr的编程是面向类的,只要provider注入就是一个新的对象.angular是单向数据流. #### 如果父组…

11. 变化监测:Angular提供了数据绑定的功能.所谓的数据绑定就是将组件类的数据和页面的DOM元素关联起来.当数据发生变化时,Angular能够监测到这些变化,并对其所绑定的DOM元素 进行相应的更新,反之亦然. 异步事件的发生会导致组件中的数据变化,但Angular并不是捕捉对象的变化,它采用的是在适当的时机去检验对象的值是被改动.这个时机是由NgZone这个服务去掌控的,它获取到了整个 应用的执行上下文,能够对相关的异步事件发生,完成或者异常等进行捕获,然后驱动Angular的变化监测…

Angular 4.x 快速入门 Angular 4 快速入门 涉及 Angular 简介.环境搭建.插件表达式.自定义组件.表单模块.Http 模块等 Angular 4 基础教程 涉及 Angular CLI 使用.创建组件.事件.自定义服务. ngFor 指令.Input.Output 装饰器等 Angular 4 指令快速入门 涉及如何创建指令.定义输入属性.事件处理.如何获取宿主元素属性值.如何创建结构指令等 Angular 4 表单快速入门 涉及如何创建表单.表单验证.表单控件状态.…

contentchild // 使用方法 git clone https://git.oschina.net/mumu-osc/learn-component.git cd learn-component git pull origin contentchild npm install ng serve <!-- test-content-child.component.html --> <div class="panel panel-primary"> <…

引导 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; platformBrowserDynamic().bootstrapModule(AppModule); 使用JIT编译器引导一个AppModule模块定义的应用 NgModules import { NgModule } from '@angular/core'; @NgModule({ declarations: ..., import…

Allow more than one child component of the same type. Allow child components to be placed within the views of other custom components. In previous post, we have seen how to use @ContentChild to asscomplish compound component implementation. It has so…

In this post, we are going to see how to solve one design pattern challenge. The challenge is what we a simplest way to find out the children elements which belongs to Animals, which belongs to Materials inside the container component. <app-animals>…