Author: sanqunbao

Angular

Introduction to Unit Testing in Angular

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 framework and Karma as the test runner. Angular also provides utilities like TestBed and async to make testing asynchronous […]

Angular

Firebase Authentication in Angular with AngularFire2

Firebase provides a very simple way to setup authentication in your apps. Here we’ll explore how to setup a simple email/password signup and authentication workflow for Angular 2+ apps using the AngularFire2 library. The first step will be to create a new Firebase project and enable the Email/Password sign-in method under the Authentication section of […]

Angular

Angular Router: Query Parameters

Query parameters in Angular allow for passing optional parameters across any route in the application. Query params are different from regular route parameters, which are only available on one route and are not optional (e.g.: /product/:id). Let’s see how to work with query parameters. Let’s use a very simple example where we want to route […]

Angular

Drag & Drop in Your Angular Apps With ng2-dragula

Dragula is a popular JavaScript library for drag & drop, and ng2-dragula is a wrapper to use Dragula in Angular 2+ apps. Let’s see how it’s used. Installation First add ng2-dragula to your project using Yarn or npm: # Yarn $ yarn add ng2-dragula # npm $ npm install ng2-dragula –save Now import DragulaModule and […]

Angular

Using Bootstrap in Your Angular Apps with ng-bootstrap

ng-bootstrap is a set of components and directives that wrap the latest version of Bootstrap (v4.0.0 alpha 6 at the time of this writing). This makes it easy to use Bootstrap in your Angular apps. Angular 4+ is required to use ng-bootstrap. ng-bootstrap depends on Bootstrap’s CSS being available, but you don’t need the Bootstrap […]

Angular

Angular Router: Using Route Guards

The Angular router’s navigation guards allow to grant or remove access to certain parts of the navigation. Another route guard, the CanDeactivate guard, even allows you to prevent a user from accidentally leaving a component with unsaved changes. Note that client-side route guards like this are not meant to be a security feature. They won’t […]

Angular

Managing Subscriptions in Angular With the Async Pipe

The built-in async pipe in Angular 2+ gives us a great tool to easily manage observable subscriptions. With it, we can learn to avoid having to manually subscribe to observables in component classes for most cases. Let’s say we want to have an observable that gives us the current time every second. Without using the […]