Today, I was trying to figure out how to dynamically load CSS in an Angular 5 application and found out a workable solution. In this short post, I will show you how I managed to do that.
Continue reading “Dynamically Loading CSS in Angular 5 application”
Today, I had to work on an application that required copy to clipboard functionality. Below is a step by step tutorial that will help you add copy to clipboard functionality. The reason I had to implement copy to clipboard functionality is that with dnd-list copy feature gets broken so I needed a way to give user a copy functionality.
Angular version being used in Angular 5.
$ ng new myapp
$ npm install --save ng2-toastr ngx-clipboard
In the app.module.ts, add ClipboardModule and ToastModule
import { ToastModule } from 'ng2-toastr/ng2-toastr';
import { ClipboardModule } from 'ngx-clipboard';
@NgModule({
imports: [
BrowserAnimationsModule,
ToastModule.forRoot(),
ClipboardModule
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
Update app.component.html
<div class="col-11 p-2 lh-condensed">
<h6 class="font-weight-bold">
{{task.title}}
<div class="float-right">
<i class="ft-chevron-down"></i>
<div class="dropdown-menu">
Copy
Edit
Delete
</div>
</div>
</h6>
</div>
Update app.component.html
copyToClipboard() {
this.toastr.success('Copied to clipboard', 'Success!');
}
A couple of days back I faced trouble adding autofocus to an input field that was rendered inside a Bootstrap modal. The project is built using Angular 5 and Bootstrap 4. Also, I was using ng-bootstrap component library. The issue was that input field was auto focussed only the first time I opened the modal. In subsequent requests, the input field was not auto-focussed. It took me sometime to figure out why this is happening and how to fix the problem. In this quick post, I will walk you through how to enable autofocus in an input field in an Angular 5 Bootstrap 4 application. Continue reading “Adding autofocus to an input field in an Angular 5 Bootstrap 4 application”
Today, I wanted to update one of my starter projects to use the latest version of Angular. I built starter project with Angular 5.0.0 and I wanted to update it to latest Angular version which is 5.0.4. Below are the steps, you need to follow to update your project. Navigate to your project working directory and do the following:
$ rm -rf node_modules/
You can check latest version at https://github.com/angular/angular-cli/releases.
Once you know the version, update the @angular/cli version in the package.json to the latest version.
$ yarn install
$ yarn upgrade
yarn upgrade will update all the dependencies to the latest version.
Now, you can run the application using the yarn start -o command.
Over the last year, I have worked with many teams using Spring Boot with Angular/React for developing Java web applications. I consider Spring Boot a pragmatic opinionated way to build Spring applications. Spring Boot makes it easy to build web applications in Java and provides a productive environment for development.
Continue reading “A Minimalist Guide to Building Spring Boot Angular 5 Applications”
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.
Pro Programming Tip : Migrate your software development/testing environment into the hassle free cloud with high performance citrix xendesktop at an affordable xendesktop pricing from CloudDesktopOnline and remotely access your preferred programming tools such as emulators and IDE`s on your preferred device(PC/mac/Linux/android/iOS). Learn more about MS Azure and managed azure services by visiting Apps4Rent.
Continue reading “Building an Angular 4 Drag And Drop Application in 15 Minutes”
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"
]
});
};
Today, I faced a requirement where I need to implement file save functionality in an Angular 4 application. In this quick post, I will show you how to implement this functionality in Angular 4 using FileSaver.js module.
Continue reading “Implementing file save functionality with 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.
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.
Shekhar Gulati 