angular2 ui

Set up the. Net Core + Angular2 environment, coreangular2Environment setup: 1) node. js version> 5.0, NPM version> 3.0, TypeScript version> 2.0 (the latest version is enough) 2) install NTVS 1.2 (node tools for vs), TSVS dev 1.4 (TS for) 3) Build a package. json, tsconfig. json, gulp. js File 1. package. json { "name": "template.angular2", "version": "1.0.0", "licenses": [ { "type": "MIT", "url": "https://github.com/angular/angular.io/

Providers: [{provide:parent, Useexisting:forwardref (() = parentcomponent)}] The parent is the provider's token, and parentcomponent is the type of the alias provider that injects the type provider into the parent component's injector, and the child component can use the parent token as the constructor parameter type to inject the service. Gets the parentcomponent. Parentcomponent refers to itself, causing a circular reference, and must use a forward reference Forward

In this tutorial we were going to learn what simple it was to create custom form field driven validators while using Angular 2 model driven forms. These type of validators is really just plain functions that follow a set of conventions.We is going to learn how to write a custom form validator and what the validating function needs to return with order to re SPECT the Angular 2 form field validation contract.Define a custom validator:Import {FormControl} from "@angular/forms"; export function val

have to configure the menu to click in, open the layouts directory under the full-layout.component.html, add under Componentsclass="nav-item"class="nav-link " Routerlinkactive="active" [routerlink]="['/components/myinfo '] "class="icon-star">Why would you like to open the full-layout.component.html file plus menu? And above is the same problem.The running effect is:Then add other pages to the same principle.Now to answer the above question:Path"', Component:fulllayoutcomponent,data: {title:'Ho

Divclass= "Form-field"> label>Confirm Password:label> inputtype= "text"Formcontrolname= "Confirm"[(Ngmodel)]= "Signup.confirm"name= "Confrim"> Div*ngif= "!signupform.valid"> span*ngif= "signupform.get (' confirm '). Haserror (' ConfirmPassword ') signupform.get (' confirm '). Touched">{{signupform.get (' confirm '). Errors?. Confirmpassword.message}}span> span*ngif= "signupform.get (' confirm '). Haserror (' required ') signupform.get (' Confirm '). Dirty">This field is requ

ANGULAR2 Dependency injection contains too much content, one of the key points is the injector, and the injector is very difficult to understand, today we do not delve into the content of the injector, you can refer to the official documentation, we today to the level of the injector.That is, the container that gets the service for the component chooses which one is specific.Let's start with a background: There are 3 components appcomponent root compo

We can nest Formgorup: this. Reactiveform = fb.group ({ username: [ '], [ validators.required, validators.minlength (3) ] , pwds:fb.group ({ "' , "' }, {validator:passwordvalidator}) });We make password as an own group. So in HTML, we need to use formgroupname istead of Formcontrolname.form[Formgroup]= "Reactiveform"novalidate AutoComplete= "Off"> Divclass= "Form-field"> label>Username:label> inputFormcontro

| async"> a[Routerlink]= "Hero.id"routerlinkactive= "Active"[Routerlinkactiveoptions]= "{exact:true}">{{Hero.name}}a> Li> we can also do [routerlink]= "['/heros ', hero.id]", this would point to "HEROS/1"; If you do: [routerlink]= "[' heros ', hero.id]", this would point to "HEROS/HEROS/1" Since we is already in Heros MoD Ule We just need to does [routerlink]= "Hero.id", point to "HEROS/1 " -ul>Heros.component.ts:Import {Component, OnInit} from '@angular/core'; import {Starwarsservice} fro

Ngformcontrol-Binding an existing Control objectUnlike the ngcontrolname directive, Ngformcontrol binds an existing control/control object to a DOM element. You can use the Ngformcontrol directive when you need to initialize an input value .In the following code, using the Ngformcontrol directive to bind a DOM element to the member variable of the component Ezcomp movie, we need to create the control object first in the constructor :1 @View ({2 //to bind an INPUT element to a control object

// 2 seconds );For the first time, we have used this interface several times in our components:Src/app/app.component.tsHeroes:hero[]; Selectedhero:hero;Src/app/hero-detail.component.tsExport class Herodetailcomponent { Hero:hero;}So far, our service is even written!Using the serviceLet's test the service we've written in the component:Src/app/app.component.ts (partial code)Import {Heroservice} from './hero.service ';Src/app/app.component.ts (partial code)Providers: [Heroservice]Src/a

Import {elementref} from "@angular/core";Constructor (private element:elementref) { //Now, we can reference to:this.element}This.element.nativeElement ('. Js-banner-container '),ElementrefProvides access to the underlying native element (DOM element).Import {aftercontentinit, Component, elementref}From' @angular/core '; @Component ({Selector' App ',Template export class app implements aftercontentinit {node:string; constructor (Private Elementref:elementref) {} ngaftercontentinit () {const tmp

"Reactiveform"Novalidate autocomplete="off"> class="Form-field"> "title"> class="Field-error-message"*ngif="reactiveForm.controls.title.errors?. Required">Title isRequiredIn this tutorial we is going to learn how do we mark form fields in error and display error messages to the user of Angular 2 model driven forms. We'll see that the approach are similar than what do we do while using template driven forms, but in this case we don t hav E template exports available.We are going to see how the Fo

Sitestatetype = { [key:string]: any}; @Injectable () Export class envsvc{ _envstate:sitestatetype = { url:window.location.href,//call Envhelper Gets the current application environment Configuration Config: Envhelper.getenvconfig (window.location.href) }; Constructor () { } get Envstate () {//In an open get application environment state, clone a copy of _envstate, avoid external program modification Configuration Return this._envstate = this. _clone (this._envstate); } Set Envs

Angular 2 copy of a timesheet.js (JavaScript library for HTML5 CSS3 time sheets)Usage:NPM Install Ng2-timesheet--saveApp.component.tsImport Models and Componentimport {timesheetitem} from ' Ng2-timesheet/src/models/timesheet-item '; import {timesheet} From ' Ng2-timesheet/src/models/timesheet ', import {timesheetcomponent} from ' Ng2-timesheet/src/timesheet.component ' ; ...//Add Directive Reference directives: [Timesheetcomponent] ...//define data Model Timesheet = new Timesh 2002, [New Tim

',' Jul ',' The "' Sep ',' Oct ',' Nov ',' Dec '}, series: [{name:' Tokyo ', data: [7.0,6.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6]}, {name:' Tokyo1 ', data: [5.0,6.9,1.5,14.5,18.2,21.5,25.2,26.5,11.3,25.3,127.9,10.6]}};if (This.chartel this.chartEl.nativeElement) {Opts.chart = {Type' Line ', Renderto:This.chartEl.nativeElement};This._chart =New Highcharts.chart (opts); } }Public Ngondestroy () {This._chart.destroy (); }Chart.js Ionviewdidenter () {var canvas = document.getElementById

Recently used Ionic2 to do a mall demo, respectively tested WAP, iOS and Android. Huawei's own browser and mobile phone QQ browser layout problem is more serious, packaged into iOS and Android app experience is relatively smooth, this write demo only made an HTTP request, the other is local test data, this situation performance can hardly see the difference with the native app. The following is a video of the real machine recorded with Huawei P9, you can experience the next.http://yuntv.letv.com

Refer:HTTPS://FORUMS.METEOR.COM/T/IMPORTING-CKEDITOR-USING-NPM/28919/2 (CKEditor)https://github.com/angular/angular-cli/issues/3094 (JQuery)CKEditor1. NPM Install CKEditor--save2. NPM Install @types/ckeditor--save--dev3. index.html Write on4. Create a/app/ckeditor documentCopy several files from Node_modules/ckeditor to/app/ckeditor (lang, plugins, skins, config.js, contents.css, Styles.js)5. Import "CKEditor";6.Ngafterviewinit () { + = {' editor1 ');} );Jquery1. NPM Install jque

The data returned after a request with HTTP is updated, but the data for the bound page is not refreshed, and after finding it, it is found that the change detection changedetectorref can be used for detection refresh.Official Document Description: ChangedetectorrefThe application code is as follows:Import {component,ngmodule,changedetectorref, oninit}from ' @angular/core '; Constructor (Private CDR : Changedetectorref) {}getcommentitemsfunc () { this. Commentservice.getcommentitems(ID )

1. Description of the problem In the absence of the lazy route to load, the first time when the load is particularly slow, affecting the user experience, ANGULAR2 can use Loadchildren lazy load, the first time to use only load the required modules, other modules in the real use of the time will go to load, When you open the browser console to view JS load, will find you in the use of the corresponding JS will be loaded, resulting in the first click on

Angular2 attribute-type directives There are three types of directives in Angular: 1.components-directives with a template. Components-directives that have templates2.Structural Directives-change the DOM layout by adding and removing DOM elements. Structured directives-Instructions for changing the DOM layout by adding and removing DOM elements: 3.Attribute Directives-change the appearance or behavior of an element. Attribute-type directives-directiv