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").
That support, however, is limited to element-level bindings - the built-in KeyEventsPlugin doesn't implement the global event handler. As such, if we want to implement key-combination binding at the global level, we have to do so with a custom DOM (Document Object Model) event plugin. Run this demo in my JavaScript Demos project on GitHub. When I first started to think about this problem, I thought it would be as simple as extending the native KeyEventsPlugin and then implementing the addGlobalEventListener() interface method. But, the more I thought about it, the more I realized that this approach didn't make sense. But, the real problem is one of prioritization and propagation. One way might be to rely on the top-down initialization of components in the component tree. Using this approach, the "host" binding might look something like this: Google Developers Blog: Angular 1 and Angular 2 integration: the path to seamless upgrade.
Originally posted on the Angular blog.
Posted by, Misko Hevery, Software Engineer, Angular Have an existing Angular 1 application and are wondering about upgrading to Angular 2? Well, read on and learn about our plans to support incremental upgrades. Summary Good news! Autocomplete for Addresses and Search Terms ▸Deprecation notices: Premium data (Zagat), types parameter, id and reference fields Introduction Autocomplete is a feature of the Places library in the Google Maps JavaScript API.
You can use autocomplete to give your applications the type-ahead-search behavior of the Google Maps search field. When a user starts typing an address, autocomplete will fill in the rest. In order to use autocomplete, you will need to load the Google Places library using the libraries parameter in the bootstrap URL for the Google Maps JavaScript API. See the Libraries Overview for more information. The API offers two types of autocomplete widgets, which you can add via the Autocomplete and SearchBox classes respectively. Below is a summary of the classes available: Integrate inside angular2 app Google Maps - Place Autocomplete. I'm using angularJS 2 and I'm trying to add google maps autocomplete following rel="nofollow">this guide.
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.
I am not recommending this approach - I'm more interesting in exploring the mechanics of it. Up until now, when talking about using ngModel with custom components in Angular 2, I've used an approach that combines a directive with the Value Accessor interface. And, to be clear, I think that approach makes the most sense. But, for the sake of thinking more deeply about dependency injection and how Angular 2 brings directives and services together, I wanted to explore the idea that the value accessor implementation could be broken out into its own service. And, that the "bridge" directive could consume that service as a means to close the ngModel communication gap. Run this demo in my JavaScript Demos project on GitHub.
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.
To be honest, I probably won't use custom ngModel components all that much in production. But, it's been such an epic journey that I feel somewhat compelled to continue noodling on it. Implementing ngModel - which is really implementing a "value accessor" - requires a non-trivial amount of effort. But, I see a pattern in the noise. And, I think 95% of that effort can be factored out into a reusable abstract base class. Run this demo in my JavaScript Demos project on GitHub. Learning About The "Input" Event From 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.
At first, I assumed that this was some sort of special Angular 2 event proxy; but, the more I picked it part, the more I realized that no translation was taking place. And, that's when I finally realized that the "input" event was a native JavaScript DOM (Document Object Model) event - it was just one that I had never heard of. 5 Rookie Mistakes to Avoid with Angular 2. You may have felt the tremors reverberating from the bowels of Twitter or elsewhere about writing pure Native mobile apps in JavaScript.
This is not hybrid, Cordova or webviews. These are truly native, 60fps mobile applications written with JavaScript. Experimenting With Controlled Inputs (ala ReactJS) In Angular 2 Beta 11. If you're a ReactJS developer, you're probably familiar with the concept of Inputs as "controlled components.
" 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. A struct index helps you locate an item when all you have is an item identifier (typically a primary key of some sort). Code Reuse in Angular 2 Native Mobile Apps with NativeScript. You may have felt the tremors reverberating from the bowels of Twitter or elsewhere about writing pure Native mobile apps in JavaScript. This is not hybrid, Cordova or webviews. These are truly native, 60fps mobile applications written with JavaScript. But that leaves one wondering: If there is no webview, how can I re-use my application code between the web and my mobile app? The answer is you need a JavaScript framework smart enough to do it, and a mobile runtime powerful enough to support it. Angular Internationalization. The User Experience (UX) Of CSS Text-Transform On Form Input Fields. In the world of user experience (UX), there is sometimes a fine line between "surprise" and "delight.
" 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!