Custom Validators in Angular 2. Forms are part of almost every web application out there.
Angular strives for making working with forms a breeze. While there are a couple of built-in validators provided by the framework, we often need to add some custom validation capabilities to our application’s form, in order to fulfill our needs. We can easily extend the browser vocabulary with additional custom validators and in this article we are going to explore how to do that. Forms Upcoming Change Proposal. Prioritizing Global Key Handlers In Angular 2 RC1.
A couple of weeks ago, I demonstrated that Angular 2 came with built-in support for key-combination binding (ex, "Meta+Enter").
Google Developers Blog: Angular 1 and Angular 2 integration: the path to seamless upgrade. Originally posted on the Angular blog.
I've also installed angular-maps from Link disabled: and been able to display a simple basic google map. In my index.html file I've inserted: My app.ts looks like this: But I get this error: angular2-polyfills.js:332 Error: ReferenceError: google is not defined(…)ZoneDelegate.invoke @angular2-polyfills.js:332Zone.run @angular2-polyfills.js:227(anonymous function) @angular2-polyfills.js:576ZoneDelegate.invokeTask @angular2-polyfills.js:365Zone.runTask @angular2-polyfills.js:263drainMicroTaskQueue @angular2-polyfills.js:482ZoneTask.invoke @angular2-polyfills.js:434.
Prioritizing Global Key Handlers In Angular 2 RC1. Creating A Value Accessor "Service" For NgModel In Angular 2 Beta 17. CAUTION: This is more of an academic post than a practical one.
Creating An Abstract Value Accessor For NgModel In Angular 2 Beta 17. Over the last few months, I've be doing a lot of work with ngModel and Angular 2.
When I started digging into Angular 2, I saw that, internally, the framework was binding to (input) events on Input and Textarea elements in order to power the ngModel directives.
" In ReactJS, a controlled component does not maintain its own internal state and is rendered solely based on its incoming props. This behavior can be applied to form inputs as well, where the value that a user enters isn't actually applied to the DOM (Document Object Model) element until the calling context pipes the change event back into the controlled component. Using Structs As Data Lookup Indices In ColdFusion Data Manipulation. At InVision App, I've been working a lot with query optimization, data caching, and general performance. Often times, this means simplifying queries, breaking apart JOINs, and moving data munging into the application layer where the cost of processing can be distributed by the load balancer (so to speak). One technique that I've found completely invaluable for data munging is the use of the ColdFusion struct as a fast-access key index. Think of this like a database table index that you can build explicitly in memory.
" If we can build interfaces and interactions that delight our users, it is almost certainly a good thing. But, it is almost certainly a bad thing if our interfaces and interactions surprise a user. Surprise means that something unexpected happened. Surprise means a user expected outcome A but, instead, got outcome X. Surprise leads to confusion, frustration, and resentment. With CSS text-transform, you can specify how to capitalize an element's text, regardless of what the underlying text actually is. Using such a transformation with display text is usually a non-issue because the user has no preconceived notion about how the text should be rendered. And, what's more, this is particularly frustrating because such a transformation could actually be the user's fault. Creating An HTML Dropdown Menu Component In Angular 2 Beta 11.
Learning Angular 2 Beta has been a non-trivial effort. As I described it on the Adventures in Angular podcast, it's a bit like having a stroke and needing to relearn everything you think you knew about AngularJS application development. Part of what makes it hard to learn is that I'm not using it in production yet; so, I don't get to leverage the continual daily exposure that I'd normally get at work. To make up for this, I try to build little demo components that give my research and development (R&D) some direction. Manually Triggering ngOnChanges() Inside An NgModel Value Accessor In Angular 2 Beta 11.
Earlier this week, I stumbled over the fact that Angular 2 won't trigger the ngOnChanges() life-cycle method if the component inputs are changed programmatically; this change detection integration seems to be tightly coupled to the property binding template syntax. This realization got me thinking about the difference between public properties and "Input properties;" and, the kind of contract that is assumed when exposing public properties as component Input properties. This "Input property" contract complicates the use of ngModel because ngModel acts as a proxy to those Input properties. Sans titre. Host Bindings Are Breaking The ngModel Bridge In Angular 2 Beta 11. Public Properties, Component Inputs, And The Change-Detection Contract In Angular 2. Yesterday, I blogged about how the ngOnChanges() life-cycle method won't be triggered if component inputs are changed programmatically from an external source.
This has got me thinking about the differences between the "public properties" and the "Input properties" of a component (ie, a directive) in Angular 2; and, more specifically, about the "contract" that is assumed by the developer when a public property is exposed as an Input property. Transclusion in Angular 2 @toddmotto. Transclusion is an Angular 1.x term, lost is the rewrite of Angular 2, so let’s bring it back for this article just concept clarity. The word “transclusion” may be gone, but the concepts remain. Essentially, transclusion in Angular 1.x is/was taking content such as a text node or HTML, and injecting it into a template at a specific entry point.
Implementing the Mediator Design Pattern in Angular 2 – Yakov Fain's Blog. In any component-based framework you’ll need to implement component communications. The main principle is that components should be loosely coupled hence reusable hence testable. The mediator design pattern allows you to arrange component communications via “the man in the middle” so a component A never communicates with the component B directly. If a component needs data, someone will provide the data via bindings to the component’s input properties. Changing Directive Inputs Programmatically Won't Trigger ngOnChanges In AngularJS 2 Beta 9. In Angular 2, when you set directive input bindings using the "[value]" property syntax, the ngOnChanges life-cycle method will be called once when the input value is initialized and then once for each subsequent change.
As I just discovered, however, the ngOnChanges life-cycle method is only invoked when the changes are driven by the template syntax. If, on the other hand, you change the directive input value programmatically, the ngOnChanges life-cycle method will not be invoked. Passing data into Angular 2 Components with "Input" @toddmotto. Static Components can be great, however most Components have the need for data to be passed in and out of them. Usually we would pass data into a Component, the Component would go to work, and let the parent Component know something has changed, passing back the changed value.
Component events with EventEmitter and "Output" in Angular 2 @toddmotto. Angular Material 2: Alpha preview! Hi! I’m TJ from the NativeScript team at Telerik. We’ve been working with the Angular team for the greater part of this year to integrate Angular 2 into NativeScript, which together let you write native iOS and Android apps using your existing web and Angular knowledge. In this article I’m going to cover what NativeScript is, why we’re using Angular, and how it all works. If you’re interested, read on! Setting The Window / Document Title In Angular 2 Beta 9. CAUTION: The approaches outlined in this post are platform-specific (meaning, they reference the browser platform directly).
Setting The Document Title Using Platform-Agnostic Methods In Angular 2 Beta 9. Injecting HTML With The BrowserDomAdapter In AngularJS 2 Beta 9. Experimenting With The .catch() Operator And Stream Continuation In RxJS And Angular 2. Creating Specialized HTTP Clients In Angular 2 Beta 8. Converting A Subject To An Observable Using RxJS In Angular 2. Ninja Tips 2 - Make your JSON typed with TypeScript. Thinking About Select Menu Components, Option Lists, One-Way Data Flow, And Angular 2. Constructor vs. Property QueryList Injection In Angular 2 Beta 8. Providing Default Values For The Safe Navigation Operator In Angular 2 Beta 8. Logging Error Streams To The Server In Angular 2 Beta 6. I Have A Fundamental Misunderstanding Of Change Detection In Angular 2 Beta 8.
Unhandled Errors In RxJS Observable Streams Will Throw Errors In Angular 2 Beta 6. HTTP Requests Are Cold / Lazy Streams In Angular 2 Beta 6. Angular 2 Change Detection Explained. Providing Custom View Templates For Components In Angular 2 Beta 6. Unwrapping HTTP Responses Using RxJS Observables In Angular 2 Beta 6. My Angular 2 speaking and training schedule – Yakov Fain's Blog. Canceling RxJS Observables With ngOnDestroy In Angular 2 Beta 6. RxJS Streams Are Inconsistently Asynchronous In Angular 2 Beta 6. ViewChildren and ContentChildren in Angular 2. Throwing Errors In The Future Using RxJS In Angular 2 Beta 6.
Angular 2: High-Level Overview – Yakov Fain's Blog. Exploring Dependency-Injection Tokens Using Pictures In Angular 2. Creating Custom DOM And Host Event Bindings In Angular 2 Beta 6. Angular2-rest/angular2-rest.ts at master · Paldom/angular2-rest. Sans titre. Sans titre. Provider And Directive Arrays Can Be Mixed-Depth In Angular 2 Beta 6. Selectors And Outputs Can Have The Same Name In Angular 2 Beta 6. Dependency-Injection With Sub-Classed Services In Angular 2 Beta 3. Experimenting With Class Delegates And Factories In Angular 2 Beta 3. Angular2 validator which relies on multiple form fields. Angular 2 Tutorial - QuickStart to Routing. Angular 2 Form Validation. Material/src/components/datepicker at master · angular/material. Material-design-lite/src at master · google/material-design-lite. How to use momentjs in TypeScript with SystemJS? Benchmarks · NativeScript/nativescript-angular Wiki.
Building Mobile Apps with Angular 2 and NativeScript. Our Angular 2 ebook is available!