angular.md

July 15, 2021 · View on GitHub

Bookmarks tagged [angular]

www.codever.land/bookmarks/t/angular

Step-by-step guide how integrate Keycloak with Angular application

https://wkrzywiec.medium.com/step-by-step-guide-how-integrate-keycloak-with-angular-application-d96b...

The aim of this post is to show you a basic set up an Angular application so that it will be integrated with Keycloak and it will be able to consume protected HTTP resource that requires an access tok...

Angular - The RxJS library

https://angular.io/guide/rx-library

Reactive programming is an asynchronous programming paradigm concerned with data streams and the propagation of change (Wikipedia). RxJS (Reactive Extensions for JavaScript) is a library for reactive ...

Caching with RxJs Observables in Angular

https://www.syntaxsuccess.com/viewarticle/caching-with-rxjs-observables-in-angular-2.0

Simple caching with observables and publishReplay(1) and refCount

Managing State in Angular 2 - Kyle Cordes - Oct 2016 - 46min

https://www.youtube.com/watch?v=eBLTz8QRg4Q

This month at the St. Lewis Angular Lunch, Kyle spoke about managing state in Angular 2 applications. The crying baby thumbnail accurately reflects how many developers have come to experience state ma...

Angular data-provider services: in-memory data cache

https://medium.com/@garfunkel61/https-medium-com-garfunkel61-angular-data-provider-services-in-memor...

Let’s see how we can build simple in-memory cache in a Angular application.

Ngrx Store - An Architecture Guide

https://blog.angular-university.io/angular-ngrx-store-and-effects-crash-course/

Using a store architecture represents a big architectural shift: with the arrival of single page applications, we moved the Model to View transformation from the server to the client.

Store architect...

Client-side caching with Angular

https://maurogarcia.dev/maurogarcia.dev/posts/client-side-caching-with-angular/

In this article, I'm gonna show you how to implement client-side caching with Angular. By the end of this post, you'll be able to cache your http request like this:

...

RxJs Error Handling: Complete Practical Guide

https://blog.angular-university.io/rxjs-error-handling/

Error handling is an essential part of RxJs, as we will need it in just about any reactive program that we write.

Error handling in RxJS is likely not as well understood as other parts of the library...

Angular HTTP Client - QuickStart Guide

https://blog.angular-university.io/angular-http/

Complete Guide on Angular HTTP: Learn how to do common HTTP operations: GET, PUT, PATCH, DELETE, POST, Error Handling, Interceptors, etc.

PART 1 — The Case For Component Inheritance In Angular | by Sani Yusuf | Medium

https://medium.com/@saniyusuf/part-1-the-case-for-component-inheritance-in-angular-a34fe2a0f7ac

Component Inheritance is where arguably, Angular’s least used and discussed feature comes to the fray. What is Component inheritance in Angular and what does it look like? Component inheritance in Ang...

Exploring Angular Lifecycle Hooks – OnInit

https://ultimatecourses.com/blog/exploring-angular-lifecycle-hooks-oninit

In this article, we will review how to implement OnInit, common use cases for OnInit, and wrap-up with some bonus use cases for OnInit to answer all those questions.

  • :calendar: published on: 2019-05-23
  • tags: angular

brtnshrdr/angular2-hotkeys home page

https://github.com/brtnshrdr/angular2-hotkeys/

Keyboard shortcuts for Angular 2 apps

Testing Angular with jest

https://ordina-jworks.github.io/testing/2018/08/03/testing-angular-with-jest.html

Examples about how replace some Jasmine specific code by Jest specific code.

Unit Testing in Angular: Stubs vs Spies vs Mocks

https://www.amadousall.com/unit-testing-angular-stubs-vs-spies-vs-mocks/

In this article, I will show you the differences between the various kinds of test doubles, and how to use them when unit testing Angular applications using Jasmine.

GraphQL Client for Angular

https://apollo-angular.com/

GraphQL Client for Angular Framework

Persist data using Local Storage and Angular

https://firstclassjs.com/persist-data-using-local-storage-and-angular/

Local storage and Session storage are part of the so called Web storage. Both of them give us the possibility to store key-value data on client side. The data stored in local storage is deleted only w...

Code syntax highlighting with Angular and Prism.js

https://auralinna.blog/post/2017/code-syntax-highlighting-with-angular-and-prismjs/

I implemented Prism.js based code syntax highlight feature for my blog. This blog post shows how to use Prism syntax highlighter with Angular.

💥 Testing Asynchronous Code with fakeAsync - Full Example - 6min

https://www.youtube.com/watch?v=vRqRuPoFmsA

Example video about testing a promise with fakeAsync

Everything you need to know about change detection in Angular - Angular inDepth

https://indepth.dev/everything-you-need-to-know-about-change-detection-in-angular/

Here we review in great details all operations performed by Angular during change detection, explore implications and take a close look at change detection API in the form of ChangeDetectorRef.

Why do I need to call detectChanges / whenStable twice?

https://stackoverflow.com/questions/55195739/why-do-i-need-to-call-detectchanges-whenstable-twice

Delayed change detection

Angular Testing: async and fakeAsync

https://www.digitalocean.com/community/tutorials/angular-testing-async-fakeasync

Testing asynchronous code has always been a challenge, but it’s now easier than ever, thanks to the async and fakeAsync utilities available for Angular 2+. This should make your Angular unit and i...

Angular Change Detection - How Does It Really Work?

https://blog.angular-university.io/how-does-angular-2-change-detection-really-work/

The Angular change detection mechanism is much more transparent and easier to reason about than its equivalent in Angular 1. But there are still situations (like when doing performance optimizations) ...

Understanding Change Detection Strategy in Angular

https://www.digitalocean.com/community/tutorials/angular-change-detection-strategy

Angular performs change detection on all components (from top to bottom) every time something changes in your app from something like a user event or data received from a network request. Change detec...

  • :calendar: published on: 2017-05-02
  • tags: angular

Brian Ford - Zones - NG-Conf 2014 - 16min

https://www.youtube.com/watch?v=3IqtmUscE_U

Introduces "zones" concept with some examples and possibilities you might have using it.

It is now a package in Angular monorepo

Angular Application Architecture: Build Reux-like Apps with RxJs

https://blog.angular-university.io/angular-2-application-architecture-building-applications-using-rx...

In this post, we are going to walk through how Angular applications can be built in a Functional Reactive style using the RxJs library that is part of Angular. We will go over the following topics:

*...

Functional Reactive Programming for Angular Developers

https://blog.angular-university.io/functional-reactive-programming-for-angular-2-developers-rxjs-and...

In this post, we are going to go over the concept of Functional Reactive Programming from the point of view of an Angular developer. Following topics are covered:

gothinkster/realworld: "The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more 🏅

https://github.com/gothinkster/realworld

"The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more

Angular ng-template, ng-container and ngTemplateOutlet: Guided Tour

https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/

In this post, we will be going over the following topics:

  • Introduction to the ng-template directive
  • Template Input Variables
  • The ng-template directive use with ngIf
  • ngIf de-suggared syntax an...
  • tags: angular

Setters vs ngOnChanges: which one is better?

https://angularbites.com/setters-vs-ng-on-changes/

Getting notified about an Angular component's property changes is normally done in 2 ways:

  • adding a setter to the property
  • using the ngOnChanges lifecycle hook
  • :calendar: published on: 2020-07-30
  • tags: angular

Focusing on Form Elements The Angular Way

https://codeburst.io/focusing-on-form-elements-the-angular-way-e9a78725c04f

Dynamic frameworks like Angular often call for modern user experiences. There are plenty of scenarios for this but one common question I have seen across forums such as reddit or stack overflow is “Ho...

A word on Angular route resolvers – and a praise for Reactive Programming

https://angular.schule/blog/2019-07-resolvers

Resolvers are cool, but the use cases are very rare. When it comes to retrieving async data via resolvers, like HTTP requests, the User Experience suffers a lot: Resolvers wait for the async tasks to ...

Adding Suspense to Angular! 🕵️‍♂️ - Netanel Basal

https://netbasal.com/adding-suspense-to-angular-%EF%B8%8F-%EF%B8%8F-1f34fd603584

I see a lot of enthusiasm lately in the React and Vue communities for the Suspense API. Suspense offers a component that allows you “wait” for some code to be rendered, and declaratively specify a loa...

async/await in Angular ngOnInit

https://stackoverflow.com/questions/56092083/async-await-in-angular-ngoninit

It is no different than what you had before. ngOnInit will return a Promise and the caller will ignore that promise. This means that the caller will not wait for everything in your method to finish ...

Angular - Dependency injection in Angular

https://angular.io/guide/dependency-injection

In Angular, the DI framework provides declared dependencies to a class when that class is instantiated. This guide explains how DI works in Angular, and how you use it to make your apps flexible, effi...

Angular Home Page

https://angular.io/

Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.

DIY Keyboard Shortcuts in Your Angular Application - Netanel Basal

https://netbasal.com/diy-keyboard-shortcuts-in-your-angular-application-4704734547a2

So your new product manager’s request is to add keyboard shortcuts for common actions in the application, giving the users a fast and slick experience.

As a good developer, you don’t want to reinvent...

  • :calendar: published on: 2019-05-21
  • tags: angular

Angular Commit Message Guidelines

https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit

We have very precise rules over how our git commit messages can be formatted. This leads to more readable messages that are easy to follow when looking through the project history. But also, we use th...

Avoiding common confusions with modules in Angular - Angular inDepth

https://indepth.dev/avoiding-common-confusions-with-modules-in-angular/

The article dives deep into inner implementation of module system in Angular. Then the author uses the discovered knowledge to shed light on common confusions related to Angular modules.

  • :calendar: published on: 2017-08-10
  • tags: angular

I changed my implementation of an EXTREMELY deeply nested Angular Reactive Form and you won’t believe what happened - Angular inDepth

https://indepth.dev/i-changed-my-implementation-of-an-extremely-deeply-nested-angular-reactive-form-...

TL;DR:

  1. Analyze a reactive form to identify the scopes for refactoring.
  2. Modularize the code by refactoring for better separation of concerns.
  3. Refactor the way the Reactive Form is generated i...

Working with Angular 5 Template Reference Variables

https://itnext.io/working-with-angular-5-template-reference-variable-e5aa59fb9af

A template reference variable is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a web component. That means you can easily acc...

The essential difference between Constructor and ngOnInit in Angular - Angular inDepth

https://indepth.dev/the-essential-difference-between-constructor-and-ngoninit-in-angular/

This article explores the difference between Constructor and ngOnInit lifecyle method in Angular. We'll explore JS/TS language nuances, the component initialization process and how both are supposed t...

Reloading current route in Angular 5 / Angular 6 / Angular 7

https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab...

As of Angular 5.1 there is a supported technique for route reloading. This can now be done using the onSameUrlNavigation configuration option as part of the built-in Angular router. Unfortunately, t...

  • :calendar: published on: 2018-01-15
  • tags: angular

Component events with EventEmitter and @Output in Angular

https://ultimatecourses.com/blog/component-events-event-emitter-output-angular-2

In this post we’re going to dive into Angular components and how to use the EventEmitter and Outputs, so we can transfer or notify any parent component that something has changed, or we would like to ...

  • :calendar: published on: 2019-07-17
  • tags: angular

GitHub - fxmontigny/ng2-ace-editor

https://github.com/fxmontigny/ng2-ace-editor

Ace editor integration with typescript for angular 4 - 5 - fxmontigny/ng2-ace-editor

ngx-clipboard home page

https://maxisam.github.io/ngx-clipboard/

A native clipboard directive ported from clipboard.js

Angular constructor versus ngOnInit

https://ultimatecourses.com/blog/angular-constructor-ngoninit-lifecycle-hook

Let’s explore the key differences between the OnInit lifecycle hook in Angular versus the constructor that we declare via a TypeScript class.

The lesson here is that it’s out of Angular’s control w...

Updating Angular 2 Forms with patchValue or setValue

https://ultimatecourses.com/blog/angular-2-form-controls-patch-value-set-value

Setting model values in Angular (v2+) can be done in a few different ways, however with reactive forms things are extremely easy to do with the new form APIs. In this post we’ll dig a little deeper as...

Reactive Forms in Angular: Dynamically Creating Form Fields With FormArray

https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/

So you have a form and would like to add form fields dynamically from a response to a user event? It’s easy to do with Reactive Forms and FormArray. FormArray is a bit like FormGroup and it’s used in ...

Using comma as a list separator in Angular 2

https://stackoverflow.com/questions/34053860/using-comma-as-a-list-separator-in-angular-2

<span *ngFor="let item of items; let isLast=last">
   {{item}}{{isLast ? '' : ', '}}
</span>
  • :calendar: published on: 2015-12-02
  • tags: angular

Angular 5 - Copy to clipboard

https://stackoverflow.com/questions/49102724/angular-5-copy-to-clipboard/52949299#52949299

Several solutions are presented.

Angular HighlightJS Module

https://ngx-highlight.netlify.com/

Angular syntax highlighting module.

Bizarre White Space Issue. HTML, CSS, Angular

https://stackoverflow.com/questions/27562924/bizarre-white-space-issue-html-css-angular

I know this is an old question but I recently had the same issue and it was due to my use of line breaks and indents inside the 

 tags. For instance, my original code looked like:
...





Exploring set, get and Object.defineProperty in TypeScript


https://ultimatecourses.com/blog/typescript-setters-getter


When working with Javascript or TypeScript, you may have seen the set and get keywords being thrown around in various blogs or codebases - and they’re extremely useful for parsing or modifying dat...





3 Common Angular Rxjs Pitfalls


https://blog.angular-university.io/angular-2-rxjs-common-pitfalls/


These are 3 situations that we can come across  while building Angular apps using  RxJs. We are going to go over why the issue happens and how to fix it





Angular Uniserval Guide


https://angular.io/guide/universal


This guide describes Angular Universal, a technology that renders Angular applications on the server.





Angular Universal: Complete Practical Guide


https://blog.angular-university.io/angular-universal/


This post will be a complete practical guide for getting started with Angular Universal.


We are going to go start with an existing Angular application, and we will progressively turn it into an Angul...





GitHub - cotag/ts-md5: Type Script MD5 implemenation


https://github.com/cotag/ts-md5


Type Script MD5 implemenation





Angular File Upload


https://valor-software.com/ng2-file-upload/


Angular2 File Upload






https://stackoverflow.com/questions/39112257/when-would-you-surround-routerlink-in-square-brackets


When you put square brackets around routerLink (or any Angular binding) it will evaluate what you pass to it as a JavaScript expression. If you don't put square brackets around routerLink it will take...


    

  • :calendar: published on: 2016-08-23
    • 

  • tags: angular
    • 





Angular 9's Best Hidden Feature: Strict Template Checking


https://auth0.com/blog/angular-9s-best-hidden-feature-strict-template-checking/


Find and report more errors than ever with Angular 9's Ivy compiler, strict template checking.


    

  • :calendar: published on: 2020-03-10
    • 

  • tags: angular
    • 





Route preloading strategies in Angular


https://web.dev/route-preloading-in-angular/


In this post, you'll learn how to speed up navigation when using route-level code splitting by taking advantage of JavaScript preloading in Angular.





Route-level code splitting in Angular


https://web.dev/route-level-code-splitting-in-angular/


This post explains how to set up route-level code splitting in an Angular application, which can reduce JavaScript bundle size and dr...





npm - JW Angular Pagination Component


https://jasonwatmore.com/post/2018/04/26/npm-jw-angular-pagination-component


A simple lightweight pagination component for Angular 2+ available on npm. Compatible with Angular 2+ (2, 4, 5, 6, 7, 8) and Bootstrap 3 & 4.





Angular Multiple HTTP Requests with RxJS - Angular 7 | 8


https://coryrylan.com/blog/angular-multiple-http-requests-with-rxjs


A typical pattern we run into with single page apps is to gather up data from multiple API endpoints and then display the gathered data to the user. Fetching numerous asynchronous requests and managin...





7 Ways to Leverage HttpInterceptors in Angular - Bits and Pieces


https://blog.bitsrc.io/7-ways-to-leverage-httpinterceptors-in-angular-59436611844d


Useful things we can do with HttpInterceptors are endless. Here I listed a few of them, you can go on and find ways in which they can be very helpful in your Angular app





Bit.dev


https://bit.dev/


Easily share reusable components between projects and applications to build faster as a team. Collaborate to develop, publish and manage components and modules at any scale without overhead. Discover ...





Using Angular Forms with Async Data - Angular


https://coryrylan.com/blog/using-angular-forms-with-async-data


Most single page apps deal with asynchronous API calls in conjunction with user input in some way. Often it’s not clear how or what the best practices are when dealing with async data and forms togeth...





Reducing the forms boilerplate — make your Angular forms reusable


https://medium.com/angular-in-depth/reducing-the-forms-boilerplate-make-your-angular-forms-reusable-...


Reduce the forms boilerplate by creating reusable custom forms controls with the ControlValueAccessor interface. Learn how to create reusable forms, subforms and how to leverage the DI to make everyth...





Communication Patterns in Angular - BB Tutorials & Thoughts - Medium


https://medium.com/bb-tutorials-and-thoughts/communication-patterns-in-angular-9b0a829aa916


Angular follows a two-way data flow pattern, meaning you can send data up and down the component tree. As everything in the Angular is a component, understanding communication between components is cr...





NGXS Home Page


https://www.ngxs.io/


NGXS is a state management pattern + library for Angular. It acts as a single source of truth for your application's state, providing simple rules for predictable state mutations.


NGXS is modeled aft...





Material Autocomplete - startWith operator


https://stackoverflow.com/questions/55262108/material-autocomplete-startwith-operator


Ignore the generic type <string | User> and focus on the value of the passed in parameter. The value that is actually passed to startWith in your code is an empty string ''.


why would you want it to ...


    

  • :calendar: published on: 2019-03-20
    • 

  • tags: angular, rxjs
    • 





RxJS: Don’t Unsubscribe - Ben Lesh - Medium


https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87


Well… okay, just don’t unsubscribe quite so much.


I’m often enlisted to help someone debug an issue with their RxJS code or figure out how to structure an app that is composing a lot of async with Rx...





RxJS in Angular: When To Subscribe? (Rarely) - Angular In Depth - Medium


https://medium.com/angular-in-depth/when-to-subscribe-a83332ae053


Ben Lesh has a terrific article called “Don’t Unsubscribe”, telling you why you are better off not explicitly unsubscribing, but inste...





Angular 2 how to make child component wait for async data to be ready


https://stackoverflow.com/questions/41389124/angular-2-how-to-make-child-component-wait-for-asyn-dat...


There are three ways to do this:


    

  1. Put an *ngIf in parent. Only render child when parent's items is ready.
...
    2. 



    

  • :calendar: published on: 2016-12-30
    • 

  • tags: angular
    • 





 Premium Bootstrap Themes and Templates: Download @ Creative Tim 


https://www.creative-tim.com/


UI Kits, Templates and Dashboards built on top of Bootstrap, Vue.js, React, Angular, Node.js and Laravel.





Deep Dive into the Angular Compiler | Alex Rickabaugh | #AngularConnect  - 31min


https://www.youtube.com/watch?v=anphffaCZrQ


For most of us, the Angular compiler is just a part of the build - it's that thing that happens before the "real" work of compilation: 92% chunk asset optimization. But how does it actually work? What...


    

  • :calendar: published on: 2019-09-27
    • 

  • tags: angular
    • 





How Angular works | Kara Erickson | #AngularConnect  - 29min


https://www.youtube.com/watch?v=S0o-4yc2n-8


Angular is many things to many people, but at its heart, it's a set of tools to render content, organize applications, and manage data. Find out about how Angular works under the hood and get insights...


    

  • :calendar: published on: 2019-09-27
    • 

  • tags: angular
    • 





Angular Configuring Application Environments


https://angular.io/guide/build#configuring-application-environments


You can define different named build configurations for your project, such as stage and production, with different defaults.


Each named configuration can have defaults for any of the options that app...





How to embed a youtube video in an angular material dialog – CodepediaOrg


https://www.codepedia.org/ama/how-to-embed-a-youtube-video-in-an-angular-material-dialog


A simple solution to embed a youtube video in an angular material dialog, as currently used on bookmarks.dev





Becoming an Angular Environmentalist - Angular In Depth


https://blog.angularindepth.com/becoming-an-angular-environmentalist-45a48f7c20d8


In this article we will:


    

  1. Explore the default environments the Angular CLI creates.
    2. 

  2. Modify the environment information.
    3. 

  3. Explain how to create a new environment with our own configuration.
    4. 






Dockerizing an Angular App


https://mherman.org/blog/dockerizing-an-angular-app/


This tutorial shows how to Dockerize an Angular app, built with the Angular CLI, using Docker along with Docker Compose and Docker Machine for both development and production. We’ll specifically focus...





Handling Observables with NgIf and the Async Pipe


https://ultimatecourses.com/blog/angular-ngif-async-pipe


Dealing with async operations with the async pipe takes care of subscribing to Observable streams/async stuff like Promises for us.


There are a few common gotchas when dealing with purely cold Observ...





When To Subscribe – Angular In Depth


https://blog.angularindepth.com/when-to-subscribe-a83332ae053


When should you subscribe? The answer to that question is, “Only when you absolutely have to.” Because (among other reasons) if you don’t subscribe, you don’t have to unsubscribe.


So, when do you abs...





Angular 2+ Social Sharing Buttons for Facebook, Google Plus, Twitter, LinkedIn and Pinterest


https://jasonwatmore.com/post/2018/06/01/angular-2-social-sharing-buttons-for-facebook-google-plus-t...


Social sharing buttons for Angular 2+ available on npm. Buttons include Facebook Like, Google Plus, Twitter, LinkedIn and Pinterest.





awesome-angular


https://github.com/gdi2290/awesome-angular#readme


:page_facing_up: A curated list of awesome Angular resources - PatrickJS/awesome-angular





Angular Reactive Templates with ngIf and the Async Pipe


https://blog.angular-university.io/angular-reactive-templates/


Learn about the Angular ngIf else syntax in detail, including how it integrates with the async pipe for an improved reactive programming experience.


    

  • :calendar: published on: 2018-12-10
    • 

  • tags: angular
    • 





Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error


https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbee...


It seems that recently almost every day there’s a question on stackoverflow regarding the ExpressionChangedAfterItHasBeenCheckedError error thrown by Angular. Usually these questions come up because...


    

  • :calendar: published on: 2017-07-01
    • 

  • tags: angular
    • 





 Angular Observable Data Services


https://coryrylan.com/blog/angular-observable-data-services


A look into Observables and how they can improve your Angular data services.





Advanced caching with RxJS by thoughtram


https://blog.thoughtram.io/angular/2018/03/05/advanced-caching-with-rxjs.html


When building web applications, performance should always be a top priority. One very efficient way to optimize the performance of our applications and improve the experience of our site is to use cac...





A deep dive on Angular decorators


https://toddmotto.com/angular-decorators


Decorators are a core concept when developing with Angular (versions 2 and above). There’s also an official TC39 proposal, currently at Stage-2, so expect decorators to become a core language feature ...


    

  • :calendar: published on: 2017-01-26
    • 

  • tags: angular
    • 





[How-to] Implement custom form validators with Angular


https://blog.angulartraining.com/how-to-implement-custom-form-validators-with-angular-861651b0dc2c


Form validation is always a hot topic whenever I teach Angular. People usually ask me whether they should use Template driven forms or Reactive forms, and I used to tell them that reactive forms are a...





Exploring Angular DOM manipulation techniques using ViewContainerRef


https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02


Whenever I read about working with DOM in Angular I always see one or few of these classes mentioned: ElementRef, TemplateRef, ViewContainerRef and others. Unfortunately, although some of them a...


    

  • :calendar: published on: 2017-03-04
    • 

  • tags: angular
    • 





The essential difference between Constructor and ngOnInit in Angular


https://blog.angularindepth.com/the-essential-difference-between-constructor-and-ngoninit-in-angular...


One of the most popular Angular questions on stackoverflow is Difference between Constructor and ngOnInit with over 100k views. I gave my answer to this question there but also decided to expand on it...


    

  • :calendar: published on: 2017-09-07
    • 

  • tags: angular
    • 





Build a Basic CRUD App with Angular 7.0 and Spring Boot 2.1 | Okta Developer


https://developer.okta.com/blog/2018/08/22/basic-crud-angular-7-and-spring-boot-2


Angular and Spring Boot are arguably the two most popular frameworks in all of web development. Matt Raible shows you how to use them together in the same app, and how to secure it all with Okta.





Reactive FormGroup validation with AbstractControl in Angular 2


https://toddmotto.com/reactive-formgroup-validation-angular-2


Validation in Angular (v2+), various approaches, various APIs to use. We’re going to use AbstractControl to learn how to validate a particular FormGroup. I covered FormGroup, FormControl and `...


    

  • :calendar: published on: 2016-10-26
    • 

  • tags: angular
    • 





Angular Development Mode: What is Unidirectional Data Flow?


https://blog.angular-university.io/angular-2-what-is-unidirectional-data-flow-development-mode/


A simple explanation about the benefits of Unidirectional Data Flow in Angular, the Angular Development and why its important to use it.


[Video](https://www.youtube.com/watch?time_continue=1&v=tzDU6l...


    

  • :calendar: published on: 2018-06-18
    • 

  • tags: angular
    • 





Angular Material Dialog: A Complete Example


https://blog.angular-university.io/angular-material-dialog/


In this post, we are going to go through a complete example of how to build a custom dialog using the Angular Material Dialog component.


We are going to cover many of the most common use cases that r...





Angular Classes with NgClass


https://toddmotto.com/ng-class-angular-classes


In this post, we’ll explore class bindings, and also Angular’s NgClass directive, the syntaxes and also some best practice ideas.


    

  • :calendar: published on: 2018-01-18
    • 

  • tags: angular
    • 





Angular Service Worker - Step-By-Step Guide


https://blog.angular-university.io/angular-service-worker/


Learn all about the multiple PWA caching configuration options of the ngws-config.json file, build Progressive Web Apps using the Angular Service Worker


    

  • :calendar: published on: 2018-06-18
    • 

  • tags: angular, pwa
    • 





RxJs Mapping: switchMap vs mergeMap vs concatMap vs exhaustMap


https://blog.angular-university.io/rxjs-higher-order-mapping/


So that is what we will be doing in this post, we are going to learn in a logical order the concat, merge, switch and exhaust strategies and their corresponding mapping operators: concatMap, mergeMap,...





Hot vs Cold Observables – Ben Lesh


https://medium.com/@benlesh/hot-vs-cold-observables-f8094ed53339


You want a HOT observable when you don’t want to create your producer over and over again.


    

  • COLD is when your observable creates the producer
    • 

  • HOT is when your observable closes over the producer
    • 

  • :calendar: published on: 2016-03-29
    • 

  • tags: angular, rxjs
    • 





GitHub - johnpapa/angular-ngrx-data: Angular with ngRx and experimental ngrx-data helperAsset 1Asset 1


https://github.com/johnpapa/angular-ngrx-data


Angular with ngRx and experimental ngrx-data helper





GitHub - ngrx/platform: Monorepo for ngrx codebase


https://github.com/ngrx/platform


Monorepo for ngrx codebase





Angular  Architecture - Smart Components vs Presentational Components


https://blog.angular-university.io/angular-2-smart-components-vs-presentation-components-whats-the-d...


Smart Components: also know sometimes as application-level components, container components or controller components


Presentation Components: also known sometimes as pure components or dumb component...





Angular ngClass and ngStyle: The Complete Guide


https://blog.angular-university.io/angular-ngclass-ngstyle/


Learn the many options for styling Angular components.


This includes: ngClass, ngStyle, Style isolation, Style Debugging, :host, :host-context, etc.


    

  • :calendar: published on: 2018-06-16
    • 

  • tags: angular
    • 





ngx-charts - Angular2 and D3js Charting Framework


https://swimlane.github.io/ngx-charts/


Angular2 and D3js Data Visualization JavaScript Framework for building composable, re-usable Charts in AngularJS.





ngx-datatable - Angular2 and beyond component for presenting large and complex data


http://swimlane.github.io/ngx-datatable/


Angular2 datatable for handling large and complex datasets in table format





Angular/RxJs When should I unsubscribe from Subscription - Stack Overflow


https://stackoverflow.com/questions/38008334/angular-rxjs-when-should-i-unsubscribe-from-subscriptio...


    

  • :calendar: published on: 2017-04-09
    • 

  • tags: angular
    • 





Angular constructor versus ngOnInit


https://toddmotto.com/angular-constructor-ngoninit-lifecycle-hook


Angular has many lifecycle hooks, as well as a constructor. In this post, we’ll quickly cover the differences between the ngOnInit lifecycle hook which has been the source of some confusion for th...


    

  • :calendar: published on: 2017-03-06
    • 

  • tags: angular
    • 





How to Create Custom Validators in Angular - DZone Web Dev


https://dzone.com/articles/how-to-create-custom-validators-in-angular


A brief exploration of the Angular development framework focusing on the ability to develop custom validators for the users of your web-based application.


    

  • :calendar: published on: 2018-01-18
    • 

  • tags: angular
    • 





Angular 2 form fundamentals: template-driven forms


https://toddmotto.com/angular-2-forms-template-driven


Angular (v2+) presents two different methods for creating forms, template-driven (what we were used to in AngularJS 1.x), or reactive. We’re going to explore the absolute fundamentals of the template-...


    

  • :calendar: published on: 2016-10-18
    • 

  • tags: angular
    • 





Sharing Data Between Angular Components - Four Methods


https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/


Data sharing is an essential concept to understand before diving into your first Angular project. In this lesson, I provide four different methods for sharing data between Angular components.


    

  • :calendar: published on: 2017-04-30
    • 

  • tags: angular
    • 





Angular @ViewChild: In-Depth Explanation (All Features Covered)


https://blog.angular-university.io/angular-viewchild/


This post is complete guide to the @ViewChild operator. We will learn how and when to use it, alternatives, we will focus on less well-known uses cases.





Angular 4.3 HttpClient (Accessing REST Web Services With Angular)


https://medium.com/codingthesmartway-com-blog/angular-4-3-httpclient-accessing-rest-web-services-wit...


Let’s see how to use the new HttpClient in your Angular 4.3 project.


    

  • Setup project
    • 

  • Making HttpClient Available In The Project
    • 

  • Using HttpClient To Request Data
    • 

  • Typed Response
    • 

  • Error Handling
*...
    • 

  • :calendar: published on: 2017-07-22
    • 

  • tags: angular, error-handling
    • 





Error Handling & Angular – Aleix Suau – Medium


https://medium.com/@aleixsuau/error-handling-angular-859d529fa53a


If you are more than… 2 years old, you’d have realized that indeed shit happens, and your apps are not an exception.


When it happens you can ignore it, and let the bad grow, or do something, and impr...





All Things Angular


https://www.telerik.com/blogs/all-things-angular


Dive into Angular's core concepts and hot topics - Angular Labs, Angular Elements, Progressive Web Apps, Service Workers, AoT Compilation, UI Libraries and more


    

  • :calendar: published on: 2018-03-28
    • 

  • tags: angular
    • 





Angular Update Guide


https://update.angular.io/





Angular Blog


https://blog.angular.io/


The latest news and tips from the Angular team.





GitHub - Gbuomprisco/ngx-chips: Tag Input component for Angular


https://github.com/Gbuomprisco/ngx-chips


This is a component for Angular >= 4. Design and API are blandly inspired by Angular Material's md-chips. Formerly called ng2-tag-input.


Demo


Check out ...





RxJS 5.5, piping all the things – Hackages Blog


https://blog.hackages.io/rxjs-5-5-piping-all-the-things-9d469d1b3f44


Those operators are pure functions that can be used as standalone operators instead of methods on an observable.


    

  • :calendar: published on: 2017-10-22
    • 

  • tags: angular
    • 





angular - BehaviorSubject vs Observable? - Stack Overflow


https://stackoverflow.com/questions/39494058/behaviorsubject-vs-observable


BehaviorSubject is a type of subject, a subject is a special type of observable so you can subscribe to messages like any other observable. The unique features of BehaviorSubject are:


    

  • It needs a...
    • 

  • :calendar: published on: 2016-11-01
    • 

  • tags: angular, rxjs
    • 





GitHub - mauriciovigolo/keycloak-angular: Easy Keycloak setup for Angular applications (v>4.3)


https://github.com/mauriciovigolo/keycloak-angular


Easy Keycloak setup for Angular applications (v>4.3)





Angular Router: Empty Paths, Componentless Routes,... | Victor Savkin


http://vsavkin.tumblr.com/post/146722301646/angular-router-empty-paths-componentless-routes


In this article I will show how to use three of the engine’s features: empty-path routes, componentless routes, and redirects. And how using them together, we can implement advanced patterns in just a...





Insider’s guide into interceptors and HttpClient mechanics in Angular


https://blog.angularindepth.com/insiders-guide-into-interceptors-and-httpclient-mechanics-in-angular...


The documentation for the interceptors is pretty good and shows how to write and register an interceptor. Here I’ll dig deeper into internal mechanics of the HtppClient service and interceptors in par...


    

  • :calendar: published on: 2018-01-09
    • 

  • tags: angular, http
    • 





RxJS: Understanding Lettable Operators – Angular In Depth


https://blog.angularindepth.com/rxjs-understanding-lettable-operators-fe74dda186d3


Lettable operators offer a new way of composing observable chains and they have advantages for both application developers and library authors.


Lettable operators are a higher-order functions. Lettab...


    

  • :calendar: published on: 2017-09-26
    • 

  • tags: angular
    • 





Angular's NgIf, Else, Then - Explained


https://toddmotto.com/angular-ngif-else-then


Using the ngIf directive allows us to simply toggle content based on a conditional. But is it as simple as we think? Not quite, the directive has a heap of helpful syntaxes that can help us deal wit...


    

  • :calendar: published on: 2018-01-11
    • 

  • tags: angular
    • 





Custom Form Controls in Angular by thoughtram


https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html


Angular makes it very easy to create custom form controls. Read on to learn how to do it!


    

  • :calendar: published on: 2016-12-18
    • 

  • tags: angular
    • 





Two-way Data Binding in Angular by thoughtram


https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html


Two-way data binding was one of the main selling points of AngularJS. Since Angular, we can build directives that implement two-way data binding. This article explains very clear the “Banana in a box”...


    

  • :calendar: published on: 2016-12-18
    • 

  • tags: angular
    • 





Home · angular/flex-layout Wiki · GitHub


https://github.com/angular/flex-layout/wiki


flex-layout - Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API





Handling Observables with NgIf and the Async Pipe


https://toddmotto.com/angular-ngif-async-pipe


There are a few common gotchas when dealing with purely cold Observables that somewhat pull in data (over perhaps, Http). There are also a few tricks we can use to mitigate common async issues, whilst...


    

  • :calendar: published on: 2018-01-12
    • 

  • tags: angular
    • 





Conduit - angular example


https://angular2.realworld.io/


Exemplary real world application built with Angular 5+





Juri's TechBlog


https://juristr.com/blog/


A resource for web developers.





Scalable Single-Page Application Architecture · Minko Gechev's blog


http://blog.mgechev.com/2016/04/10/scalable-javascript-single-page-app-angular2-application-architec...





ViewChildren and ContentChildren in Angular · Minko Gechev's blog


http://blog.mgechev.com/2016/01/23/angular2-viewchildren-contentchildren-difference-viewproviders/


In this article I’m going to explain the difference between the concepts of view children and content children in Angular. We will take a look at how we can pass access these two different kin...





Angular2 - First Impressions · Minko Gechev's blog


http://blog.mgechev.com/2015/04/06/angular2-first-impressions/


In this blog post I’ll share my first impressions of the framework and I’ll try to keep them as objective as possible, despite my affinity to AngularJS. I’ll start with the general changes and after t...


    

  • :calendar: published on: 2015-04-06
    • 

  • tags: angular
    • 





Building an Angular Application for Production · Minko Gechev's blog


http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/


Progressive Web Applications help us build native-like web apps, thanks to amazing tools such as Service Workers, IndexDB, App Shell etc. Once the browser downloads all the static assets required by o...





ES6 Promises (with Angular 2) Explained - YouTube


https://www.youtube.com/watch?v=viaF0hM8G94


An introduction to ES6 Promises. The example uses Angular 2 but the concepts apply to any ES6/ES2015 JavaScript code.


Great and easy to understand - compares callback code to promises...





Async/Await with Angular 2 – Encoded Labs


https://labs.encoded.io/2016/12/08/asyncawait-with-angular/





Angular Authentication: Using the Http Client and Http Interceptors


https://medium.com/@ryanchenkie_40935/angular-authentication-using-the-http-client-and-http-intercep...


Let’s take a look at how to use Angular’s HttpInterceptor interface to make authenticated HTTP requests. It also suggest how to react in case the token expired.





The New HTTP Client in Angular 4.3 – Austin – Medium


https://medium.com/@amcdnl/the-new-http-client-in-angular-4-3-754bd3ff83a8


In Angular 4.3, a new HTTP Client was introduced. This new client replaces the @angular/http module you are using right now. To prevent breaking changes (👍), it was released under a different name…
...


    

  • :calendar: published on: 2017-07-25
    • 

  • tags: angular, jwt
    • 





Angular, React, or Vue JS: Which one is for me? | Object Partners


https://objectpartners.com/2017/07/25/angular-react-or-vue-js-which-one-is-for-me/


I’ve chosen to put together a brief and simple comparison between three of the most popular front-end frameworks in the hope that maybe it will help simplify these choices for at least one developer. ...





Angular Http


https://angular.io/guide/http


With HttpClient, @angular/common/http provides a simplified API for HTTP functionality for use with Angular applications, building on top of the XMLHttpRequest interface exposed by browsers. Add...





Angular User Input


https://angular.io/guide/user-input


User actions such as clicking a link, pushing a button, and entering text raise DOM events. This page explains how to bind those events to component event handlers using the Angular event binding synt...





Angular NgRx Store and Redux - When to use a Store and Why ?


https://blog.angular-university.io/angular-2-redux-ngrx-rxjs/


In this post we will cover the following topics: When to use Redux or stores in general ?Do we usually need a store ? Why is Redux so popular in the React world ? Are the issues solved by Redux also p...


    

  • :calendar: published on: 2016-09-22
    • 

  • tags: angular
    • 





Angular Components and Directives - a Beginner Friendly Introduction


https://blog.angular-university.io/angular-components-and-directives-for-beginners/


Learn about the Shadow DOM, how to extend the existing browser features using Angular, build your own HTML Input box - Directives and Components


    

  • :calendar: published on: 2017-05-08
    • 

  • tags: angular
    • 





Angular Security - Authentication With JWT: The  Complete Guide


https://blog.angular-university.io/angular-authentication-jwt/


A Step-by-Step Guide for learning how to implement JWT-based Authentication in Angular, includes what to do in the backend (using Node / Typescript)





Angular HTTP Client - QuickStart Guide


http://blog.angular-university.io/angular-http/


This post will be a quick practical guide for the Angular HTTP Client module. We will cover how to do HTTP in Angular in general. We will be using the new @angular/common/http module, but a good...





How to configure Nginx in production to serve an Angular app and reverse proxy NodeJS – CodingpediaOrg


http://www.codingpedia.org/ama/how-to-configure-nginx-in-production-to-serve-angular-app-and-reverse...


In this guide we are going to:


    

  • install the latest NGINX version in Ubuntu 16.04.1
    • 

  • understand configuration files
    • 

  • generate SSL certificates and configure them in NGINX
    • 

  • configure NGINX as rever...
    • 

  • :calendar: published on: 2017-05-21
    • 

  • tags: nginx, angular, node.js
    • 





Angular Bootstrap


https://valor-software.com/ngx-bootstrap/#/


Native Angular directives for Bootstrap





Fast, faster, Angular CLI - how I converted my Angular project to use Angular CLI – CodepediaOrg


https://www.codepedia.org/ama/fast-faster-angular-cli-how-i-converted-my-angular-project-to-use-angu...


Blog post presenting how to convert an Angular project that used webpack to Angular-CLI project...





A Deep, Deep, Deep, Deep, Deep Dive into the Angular Compiler


https://medium.com/@urish/a-deep-deep-deep-deep-deep-dive-into-the-angular-compiler-5379171ffb7a


As you know, I love Angular, and all the magical things you can do with it, and I thought it would be an interesting challenge to take a peek into the compiler in Angular 4, try to reverse engineer it...


    

  • :calendar: published on: 2017-07-06
    • 

  • tags: angular
    • 





RxJs SwitchMap Operator Deep Dive : How Does It Work ? Learn Selectors


http://blog.angular-university.io/rxjs-switchmap-operator/


Although RxJs has a large number of operators, in practice we end up using a relatively small number of them.


And right after the most familiar operators that are also available in arrays (like map, ...


    

  • :calendar: published on: 2017-05-05
    • 

  • tags: angular, rxjs
    • 





Angular Router - Routing & Navigation


https://angular.io/guide/router


The Angular Router enables navigation from one view to the next as users perform application tasks.


This guide covers the router's primary features, illustrating them through the evolution of a small...





Sharing coding knowledge – CodingpediaOrg


http://www.codingpedia.org/





Architecture overview


https://angular.io/guide/architecture


Learn the basics about the eight main building blocks of an Angular application:


    

  • Modules
    • 

  • Components
    • 

  • Templates
    • 

  • Metadata
    • 

  • Data binding
    • 

  • Directives
    • 

  • Services
    • 

  • Dependency injection
    • 

  • tags: angular, docs
    • 





Exploring Angular DOM manipulation techniques using ViewContainerRef


https://hackernoon.com/exploring-angular-dom-abstractions-80b3ebcfc02


Whenever I read about working with DOM in Angular I always see one or few of these classes mentioned: ElementRef, TemplateRef, ViewContainerRef and others. Unfortunately, although some of them a...


    

  • :calendar: published on: 2017-03-08
    • 

  • tags: angular
    • 





Angular powered Bootstrap


https://ng-bootstrap.github.io





Angular Browser Support


https://angular.io/guide/browser-support





Dynamic Component Loader


https://angular.io/guide/dynamic-component-loader


Component templates are not always fixed. An application may need to load new components at runtime.


This cookbook shows you how to use ComponentFactoryResolver to add components dynamically.


See th...





html - Binding select element to object in Angular 2 - Stack Overflow


https://stackoverflow.com/questions/35945001/binding-select-element-to-object-in-angular-2


<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
  <option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>
</select>



NOTE: you can use [ngValue]="c" instead of `[...


    

  • :calendar: published on: 2016-03-03
    • 

  • tags: angular, html
    • 





Taking advantage of Observables in Angular by thoughtram


https://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html


In this article we like to focus on some practical advantages that Observables introduce for server communication. Among others:


    

  • Don’t hit me twice - distinctUntilChanged 
    • 

  • :calendar: published on: 2016-01-06
    • 

  • tags: angular
    • 





Introduction to Unit Testing in Angular ← Alligator.io


https://alligator.io/angular/introduction-unit-testing/


It’s easy to get started with unit testing for Angular 2+ apps. If your projects was setup using the Angular CLI, everything will be ready for you to start writing tests using Jasmine as the testing f...





Angular myths busted / Webagility


http://webagility.com/posts/angular-myths-busted


Whether you are into web development or not, you probably have heard some rumors about Angular JS. Let’s go through most common of them and see if they are true.


    

  • :calendar: published on: 2017-06-04
    • 

  • tags: angular
    • 





GitHub - mgechev/angular-performance-checklist: Cheatsheet for developing ⚡lightning⚡ fast Angular applications.


https://github.com/mgechev/angular-performance-checklist


Cheatsheet for developing ⚡lightning⚡ fast Angular applications.





Stateful and stateless components, the missing manual


https://toddmotto.com/stateful-stateless-components


The goals of this article are to define what stateful and stateless components are, otherwise known as smart and dumb - or container and presentational components. For the purposes of the article, we’...





Getting Started With Angular - Development Environment Best Practices


http://blog.angular-university.io/getting-started-with-angular-setup-a-development-environment-with-...


This post is a guide for setting up a solid development environment, for having the best Angular learning and working experience.


In this post we are going to:





build · angular/angular-cli Wiki · GitHub


https://github.com/angular/angular-cli/wiki/build


Shows how to use ng build, what options you can use and how to setup your own environment. For example, build for prod with aot support:





Angular Improved Reactive Programming Support


http://blog.angular-university.io/new-in-angular-4-better-reactive-programming-support/


If we have a look at the Angular core roadmap, one of the main items is the continuous improvement of the support for building Angular Applications in Reactive style.


There are a couple new features ...


    

  • :calendar: published on: 2017-03-03
    • 

  • tags: angular
    • 





GitHub - MrZaYaC/ng2-webstorm-snippets


https://github.com/MrZaYaC/ng2-webstorm-snippets


This script convert Angular 2 for TypeScript and HTML snippets from Visual Studio Code (Written by John Papa) to WebStorm Live Templates.





7 Angular Tools That You Should Consider – Minko Gechev's blog


http://blog.mgechev.com/2017/04/23/angular-tooling-codelyzer-angular-cli-ngrev/


In this article we’re going to quickly explore 7 Angular development tools which can make our everyday life easier. The purpose of the list is to not be opinionated architecture wise.The software belo...





Angular2 Beta, RxJS, TypeScript - YouTube (1h40min)


https://youtu.be/R62iQvZ0bdQ?t=1633


Talk on RxJs and Observables by @BenLesh. Explanation of the difference between the merge, concat and switch strategies for combining Observables.





TypeScript Configuration - ts - GUIDE


https://angular.io/docs/ts/latest/guide/typescript-configuration.html


This page covers some aspects of TypeScript configuration and the TypeScript environment that are important to Angular developers, including details about the following files:





Webpack: an introduction - ts - GUIDE


https://angular.io/guide/webpack


Webpack is a popular module bundler, a tool for bundling application source code in convenient chunks and for loading that code from a server into a browser.


It's an exc...





Your first unit test using Angular CLI, Karma and WebStorm | WebStorm Blog


https://blog.jetbrains.com/webstorm/2017/02/your-first-unit-test-using-angular-cli-karma-and-webstor...


In this article we will use WebStorm 2016.3 with its built-in support for the Angular CLI and Karma test runner. We will write a single un...





AppModule: the root module - ts - GUIDE


https://angular.io/docs/ts/latest/guide/appmodule.html


An Angular module class describes how the application parts fit together. Every application has at least one Angular module, the root module that you bootstrap to launch the application. You can call ...





NgModules - ts - GUIDE


https://angular.io/guide/ngmodule


Angular Modules - NgModules help organize an application into cohesive blocks of functionality.


An NgModule is a class adorned with the @NgModule decorator function. @NgModule takes a metadata ...





Angular 2 AoT Compilation with webpack – Suguru Inatomi – Medium


https://medium.com/@laco0416/aot-compilation-with-webpack-359ac9f4916f


@ngtools/webpack package provides a very easy way to switch compilations of an Angular application from JiT to AoT. It’s used in Angular-CLI. The tool allows us enable AoT compilation without any chan...





Style Guide - ts - GUIDE


https://angular.io/styleguide


Looking for an opinionated guide to Angular syntax, conventions, and application structure? Step right in! This style guide presents preferred conventions and, as importantly, explains why.





angular/CHANGELOG.md at master · angular/angular · GitHub


https://github.com/angular/angular/blob/master/CHANGELOG.md





Adventures in Angular


https://devchat.tv/adv-in-angular


Adventures in Angular is a weekly podcast dedicated to the Angular JavaScript framework and related technologies, tools, languages, and practices.





Angular Air


https://angularair.com/


A live videocast all about Angular





Top 10 Angular Tutorials, Blogs and Podcasts


http://blog.angular-university.io/top-10-angular-2-tutorials-blogs-and-podcasts/


This is a compilation of the best Angular resources (tutorials, blogs and podcasts) that we can systematically use and rely on to Learn and Keep Up with Angular.


    

  • :calendar: published on: 2016-07-06
    • 

  • tags: angular
    • 





Ahead-of-Time Compilation in Angular – Minko Gechev's blog


http://blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline-precompilation/


Recently I added Ahead-of-Time (AoT) compilation support to angular-seed and got a lot of questions about the new feature. In order to answer most of them, we will start from the beginning by explaini...





The Angular 2 Compiler   Tobias Bosch - YouTube


https://www.youtube.com/watch?v=kW9cJsvcsGo


AngularConnect


    

  • :calendar: published on: 2016-09-27
    • 

  • tags: angular
    • 





GitHub - mgechev/angular-seed


https://github.com/mgechev/angular-seed


Extensible, reliable and modular starter project for Angular 2 (and beyond) with statically typed build and AoT compilation [https://mgechev.github.io/angular-seed](https://mgechev.github.io/angular-s...





Angular 2 NgModule Intro - Ahead Of Time Compilation And Lazy Loading


http://blog.angular-university.io/angular2-ngmodule/


In this post we are going to do an introduction to Angular Modularity (the NgModule functionality) and understand why it enables several important features like ahead of time compilation and lazy load...





GitHub - preboot/angular-webpack seed


https://github.com/preboot/angular-webpack


A complete, yet simple, starter for Angular v2+ using webpack





GitHub - AngularClass/angular2-webpack-starter


https://github.com/AngularClass/angular2-webpack-starter


An Angular Starter kit/seed featuring Angular 2 and Angular 4 (Router, Http, Forms, Services, Tests, E2E, Dev/Prod, HMR, Async/Lazy Routes, AoT via ngc), Karma, Protractor, Jasmine, Istanbul, TypeScri...





@ngtools/webpack - npm


https://www.npmjs.com/package/@ngtools/webpack


Webpack plugin that AoT compiles your Angular components and modules.





Angular Lifecycle Hooks


https://angular.io/guide/lifecycle-hooks


Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them. Learn about:


    

  • Lifecycle sequence
    • 

  • Syping OnInit and OnDestroy
    • 

  • OnChanges
    • 

  • DoCheck
    • 

  • Af...
    • 

  • tags: angular, docs
    • 





Change Detection in Angular 2 – Angular


https://vsavkin.com/change-detection-in-angular-2-4f216b855d4c


In this article I will talk in depth about the Angular 2 change detection system.





3 Ways to Pass Async Data to Angular 2+ Child Components | Scotch


https://scotch.io/tutorials/3-ways-to-pass-async-data-to-angular-2-child-components


The three ways :


    

  1. Use ngIf
    2. 

  2. Use ngOnChanges
    3. 

  3. Use RxJs BehaviorSubject
    4. 






How I optimized Minesweeper using Angular 2 and Immutable.js to make it insanely fast


http://www.jvandemo.com/how-i-optimized-minesweeper-using-angular-2-and-immutable-js-to-make-it-insa...


ChangeDetectionStrategy.OnPush





Immutability vs Encapsulation – Angular


http://victorsavkin.com/post/133936129316/angular-immutability-and-encapsulation


Using mutable objects for modeling application state makes tracking changes hard and incurs a sizable performance cost. Switching to immutable objects solves these problems, but brings new ones. This ...





Understanding Zones by thoughtram


https://blog.thoughtram.io/angular/2016/01/22/understanding-zones.html





Angular Change Detection Explained by thoughtram


https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html


NG-NL has happened and it was awesome! I had the honour of giving a talk about change detection in Angular and it seemed to be a huge success as attendees liked it a lot. With this article, we’d like ...





Passing data to and from a nested component in Angular 2


https://www.themarketingtechnologist.co/building-nested-components-in-angular-2/


Shows you how to pass data to and from a nested component in Angular 2.





Testing Angular 2 Services and Http with Jasmine


http://chariotsolutions.com/blog/post/testing-angular-2-0-x-services-http-jasmine-karma/


Example on how to test Angular Service and how to mock the HTTP service with MockBackend





Testing - ts - GUIDE


https://angular.io/docs/ts/latest/guide/testing.html


This guide offers tips and techniques for testing Angular applications. Though this page includes some general testing principles and techniques, the focus is on testing applications written with Angu...





Patching my way through FormGroups and FormControls in Angular reactive forms – CodingpediaOrg


http://www.codingpedia.org/ama/patching-my-way-through-formgroups-and-formcontrols-in-angular-reacti...


Shows how to update a field value in reactive form, based on data from another input field...


...





Cold vs Hot Observables by thoughtram


https://blog.thoughtram.io/angular/2016/06/16/cold-vs-hot-observables.html


Helps with simple examples understand the nature of hot and cold observables.


TABLE OF CONTENTS


    

  • Hot vs Cold Observables
    • 

  • Making Cold Observables Hot
    • 

  • Understanding publish, refCount and ...
    • 

  • tags: angular, observable, rxjs
    • 





Angular.io - Component Interaction


https://angular.io/guide/component-interaction


This cookbook contains recipes for common component communication scenarios in which two or more components share information.


Contents





Angular 2 Application Architecture: Build Reux-like Apps with RxJs


http://blog.angular-university.io/angular-2-application-architecture-building-applications-using-rxj...


In this post, we are going to walk through how Angular 2 applications can be built in a Functional Reactive style using the RxJs library that is part of Angular 2 (see Managing State in Angular 2 Appl...





Tackling State – Angular 2


http://victorsavkin.com/post/137821436516/managing-state-in-angular-2-applications


Managing application state is a hard problem. You need to coordinate between multiple backends, web workers, and UI components. Patterns like Redux and Flux are designed to address this problem by mak...





How to build Angular App with Observable Data Services - Pitfalls


http://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pit...


How to build an Angular 2 application around the concept of observable data services.





Quickstart - ts - QUICKSTART


https://angular.io/guide/quickstart


A quick look at Angular basics





Introduction to Angular 2 Forms - Template Driven vs Model Driven or Reactive Forms


http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/


In this post we will see how the Angular 2 Forms API works and how it can be used to build complex forms. We will go through the following topics:


    

  • What is Angular 2 Forms all about
    • 

  • Template Drive...
    • 

  • :calendar: published on: 2016-06-21
    • 

  • tags: angular
    • 





Reactive Forms in Angular


https://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html


Nice introduction to angular reactive forms (model driven forms) with nice explanations on how everything binds, introduces validators etc...


    

  • :calendar: published on: 2016-06-22
    • 

  • tags: angular
    • 





JWT authentication with Vert.x, Keycloak and Angular 2


http://paulbakker.io/java/jwt-keycloak-angular2/


Example on how to integrate angular 2 with keycloak. Front end with login-required and backend is using angular2-jwt, created by Auth0