Building an Angular 4 Drag And Drop Application in 15 Minutes

Last week, I had to build an application that required drag and drop functionality. This made me learn about couple of third party Angular 4 drag-and-drop APIs. The popular options in Angular 2+ world are ng2-dragula and ng2-dnd. I found ng2-dnd more extensible and feature rich so I used it in my application. In today’s blog, we will learn how to add drag-and-drop functionality to a todo application. We will use Addy Osmani Angular 4 todomvc application as the starting point. This post does not cover basics of how to build Angular 4 applications. There are many good references on the web that can teach you building Angular 4 applications from scratch.

Continue reading “Building an Angular 4 Drag And Drop Application in 15 Minutes”

Advertisements

Angular 4 Karma Loading CSS in Unit Testing

Today, while writing unit test for one of my Angular 4 application I wanted to load bootstrap css. My components uses Bootstrap for styling. The problem is when test run they don’t load CSS so they are not rendered correctly during unit tests. Angular 4 relies on Karma as test runner for unit tests. To load your external CSS file like bootstrap, you have to add files option to karma.conf.js. After making the change, run your test cases again.

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    singleRun: false,
    files: [
      "node_modules/bootstrap/bootstrap.min.css",
      "node_modules/jquery/dist/jquery.min.js"
    ]
  });
};

Unit testing ngModel in Angular 4

Angular 4 is a good choice for building modern web applications. It comes bundled with Test utilities that makes it easy to write good quality test cases quite easily. Angular official testing guide does a good job explaining how to get started with testing Angular components. One thing that it does not cover is how to test components that use two way data binding using ngModel directive. Last week I had to write test case for a component that uses data binding so I end up learning a lot about testing such components. In this blog, I will share my learnings with you.

Continue reading “Unit testing ngModel in Angular 4”

Angular 4: Use of base-href and deploy-url build options

I use Angular 4 at work for building a single page application. Today, I faced the problem where I had to use different base paths for router and static assets. Angular makes use of the base href to tell router how to compose navigation URLs. If your application exists at the root, then you can use / as the href value as shown below.

<base href="/">

I wanted to use /users as my application base for router and /public as base for my assets.

If you build the project the Angular project for the production environment using the default values you will get the following index.html generated.

$ ng build -prod
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SampleNgApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="styles.xxxx.bundle.css" rel="stylesheet"/></head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

This generated page will not work as it router will use / as base for composing navigation URLs and static assets will be looked in the current directory.

To solve my problem, I used —-base-href and —-deploy-url options as shown below.

$ ng build -prod --base-href /users --deploy-url /public
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SampleNgApp</title>
  <base href="/users">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="/public/styles.xxxx.bundle.css" rel="stylesheet"/></head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

This way I solved my problem.

Teradata Covalent with Angular 4 Compilation Error

Today, I decided use Teradata Covalent components in my Angular 4 application. After adding the dependency, my project stopped compiling. I started getting following errors

ERROR in /Users/dev/app//node_modules/@covalent/core/common/animations/toggle/toggle.directive.d.ts (2,10): Module "/Users/dev/app/node_modules/@angular/animations/animations" has no exported member 'AnimationBuilder'.
ERROR in /Users/dev/app/node_modules/@covalent/core/common/animations/fade/fade.directive.d.ts (2,10): Module "/Users/dev/app/node_modules/@angular/animations/animations:" has no exported member 'AnimationBuilder'.

I tried googling this error but couldn’t find a fix. Then, i looked at the Covalent Github repository to find the Angular version  they are using. It turned out to be Angular version issue. I was using Angular 4.1.3 and Covalent needs Angular version 4.2.0 and above. After making the change, I was able to get my app working.