Oingial aritial --> Link Take away: import { Component, OnInit } from '@angular/core'; @Component({ selector : 'contacts-header', templateUrl: './header.component.html', styleUrls : ['./header.component.css'] }) export class HeaderComponent implement…

每天抽出一些时间学习 Angular2 ,并准备把手头上的项目移植为 Angular2 , 不过今天又遇到了一些小问题. 准备写一个导航类适于管理后台常见的右边导航,如博客园的这种: ! 使用 g generate component nav-left 建立了一个名为 nav-left 的导航组件. 这里需要检查app,modile.ts中是否已经有你新建的组件.一般会自动添加,如果不存在需要添加引用: import { NavLeftComponent } from './nav-left/n…

Component: import { Component, Input, ChangeDetectionStrategy, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'stock-counter', changeDetection: ChangeDetectionStrategy.OnPush, template: ` <div class="stock-counter"> &l…

export default (ngModule) => { describe('Table Item component', () => { let $compile, directiveElem, directiveCtrl, $scope, state, parentElement; beforeEach(window.module(ngModule.name)); beforeEach(inject(function (_$compile_, _$rootScope_, _$state…

Let's say you want to rending some component based on condition, for example a Tabs component. Inside tabs, you want to render different tab component: <div *ngFor="let comp of comps"> <ng-container *ngComponentOutlet="comp"&g…

After create a component dynamic, we are able to change the component's props and listen to its event. component: ComponentRef<AuthFormComponent>; ngAfterContentInit() { const factory = this.resolver.resolveComponentFactory(AuthFormComponent);this.c…

本文所有内容以 Angular 2 Quick Start 项目为基础,使用 TypeScript 语言. 如上图,最近遇到一个需求,需要在一个刚启动的 Angular 2 项目中使用 snap.svg 操作页面上的 svg 元素做动画. 我粗略的看了下, snap.svg 的实现似乎并没有遵从什么模块规范,就是常见的提供几个全局变量完事.如果真的耿直的在 Component 中去用的话,会在执行 tsc 编译成 js 文件这一过程中报错. 这是因为 TypeScript 编译器并不知道 sna…

Here is the defulat tab header template: <ng-template #defaultTabHeader let-tabs="tabsX"> <ul class="tab-panel-buttons" *ngIf="tabs"> <li [ngClass]="{selected: tab.selected}" (click)="selectTab(t…

This lesson shows you how to build a Toggle Button in Angular 2 from scratch. It covers using transclusion in Angular 2, setting up your own two-way binding, and making the button into a reusable component. toggle-button.ts: import {Component, Input,…

The way to test router componet needs a little bit setup, first we need to create a "router-stubs.ts". This file is a helper file. // export for convenience. export { ActivatedRoute, Router, RouterLink, RouterOutlet} from '@angular/router'; impo…