Bootstrap 4 and Angular: A Beginner’s Guide to Customizing a Theme

If you have created new Angular projects from the Angular CLI, you’ll know they come with a bare-bones UI layout. No UI framework or guidance is provided out-of-the-box. In this article, we’ll look at how to add Bootstrap 4 in a new Angular project and style the application using Sass.
We’ll install Bootstrap 4 using npm, wire up Bootstrap and highlight the differences between a CSS and Sass (.scss) configuration. We’ll also install Kendo UI for Angular ‘s Bootstrap 4 theme and integrate our custom theme.


Angular 5 Basic Demo Project Overview

This post is a continuation of the Angular 5 series and you can find the first part of this series here What Is New and How to Set Up our First Angular 5 Application. So if you haven’t gone through the first part yet, I strongly recommend you to do that. In our first part, we saw the Angular 5 updates and how to set up your first application in Angular 5. In this post, we are going to discuss a few files and give an application overview. We will also be discussing some key points like Components, Declarations, Modules, Providers, etc. So at the end of this article, you will have some basic understanding of Angular project structures and why it really matter when it comes to the project. I hope you will like this article.
Source Code
You can always clone or download the source code here.


5 Usage Ideas for Angular Pipes

Pipes are a useful feature in Angular. They are a simple way to transform values in an Angular template. There are some built-in pipes, but you can also build your own pipes.
A pipe takes in a value or values and then returns a value. This is great for simple transformations on data but it can also be used in other unique ways. This post will highlight a few useful or unique use cases that we found for pipes.


What Is New and How to Set Up Our First Angular 5 Application

We all know that the Angular version 5 was released a few weeks back, aren’t you eager to know what’s new in Angular 5? What helps make development easier? Well, here in this post I am going to discuss a few updates in Angular 5. By saying that, I will not be discussing all the items which have been released with this version. Here, we will also be checking how to create our first Angular 5 application. So at the end of this article, you will have your own sample application with you. Cheers for that. I hope you will like this article.
Source Code
You can always clone or download the source code here.


Angular 5 Release: What’s New?

Angular is an all-encompassing JavaScript framework that is frequently used by developers all over the world for building web, desktop, and mobile applications. In this article, I’ll cover the new features in Angular 5 and several other changes and deprecations.
Angular is built and maintained by Google. It is a platform that combines declarative templates, dependency injection, end-to-end tooling, and integrated best practices to solve development challenges. Web platforms such as Google Adwords, Google Fiber, Adsense, and Winc use Angular to build their user interfaces.


Top 12 Productivity Tips for WebStorm and Angular – Part 2

In this 2-part series, Google Developer Experts Jurgen Van de Moere and Todd Motto share their 12 favorite productivity tips for developing Angular applications using WebStorm.
You can check out part one here. In this second part, Todd shares his personal top 7 WebStorm features that allow him to increase his productivity on a daily basis:

Use Import Path Calculation
Live Templates
Run Tests within the IDE
Travel through Time
Use TypeScript Parameter Hints
Navigate using Breadcrumbs
And using WebStorm to look up Angular Documentation

Each tip will power up your productivity while developing Angular applications in WebStorm. Let’s explore these tips.
Before we get started!
When making changes to settings, remember that WebStorm allows you to change Settings/Preferences at an IDE scope and at a project scope separately.
Tip 6: Import Path Calculation
By default, WebStorm will resolve your import paths relative to the file. This setting will satisfy most projects and avoid unnecessary path editing. It’s also the method used for projects generated with the Angular CLI.
What’s fantastic about WebStorm is that you don’t have to type these import statements yourself! When you need to use a construct that would usually be imported, just type it where you need it. WebStorm will either suggest the construct to import through the AutoComplete context menu, or highlight the construct and give you the option to import it by pressing Option + Enter.
WebStorm will create a new import statement at the top of the document for you, or add the construct to an existing import group that is using the same source library.

WebStorm gives you other specialized options to handle your imports. For projects that require it, you can instruct WebStorm to calculate import paths relative to the tsconfig.json file location. If you decide to roll up your exports using a barrel index.ts file to import your components (read more about the Barrel technique) then you can use Use directory import (Node-style module resolution). This will use the Node.js module resolution strategy, instead of TypeScript’s classic module resolution strategy.
When importing submodules that don’t require the entire module to be imported, add that module to the Do not import exactly from list. WebStorm will skip the specified path during the automatic import. For example, instead of having:
import {Observable} from ‘rxjs’

Adding rxjs to the list yields:
import {Observable} from ‘rxjs/Observable’

WebStorms skips the rxjs module and imports the Observable submodule automatically for you!

Extra tip: Format input to use space inside curly brackets in Preferences | Editor | Code style | TypeScript – Spaces – Within – ES6 import/export braces.

Tip 7: Use Live Templates
When you find yourself writing certain patterns of code repeatedly, create a Live Template to quickly scaffold the block of code. WebStorm already comes with some predefined Live Templates that you may modify to fit your development style.
To create a Live Template, navigate to:

[macOS] WebStorm | Preferences | Editor | Live Templates
[Windows / Linux] File | Settings | Editor | Live Templates

You’ll see that WebStorm has already bundled the predefined Templates into categories. I created a category to bundle my ngrx Live Templates by clicking on the + sign and choosing “Template Group." I then created a new Live template within it by clicking on the + sign again, but choosing Live Template this time.
Let me walk you briefly through the elements that make a Live Template a productivity success:

Abbreviation: The shortcut you’ll type into the Editor to invoke your template.
Description: Tells you what the template does when invoked.
Template text: This is the code fragment to be scaffolded upon invocation. Take advantage of the powerful Live Template Variables that allow you to replace them with your desired text upon scaffolding.
Context: Choose in which language or pieces of code WebStorm should be sensitive to the Template.
Options: Define which key will allow you to expand the template and reformat it, according to the style settings defined on WebStorm | Preferences | Editor | Code Style.

You are ready to try out your template. Open a file that honors the context you defined and type your shortcut, press the defined expansion key and watch your template appear for you! If you defined any variables, the cursor will be placed where the first variable should be entered. If there are other variables defined, you can use tab to navigate to them – no need to click.

Tip 8: Running Tests
WebStorm is an excellent testing tool. You can run a variety of JavaScript tests right from the IDE, as long as you have the Node.js runtime environment installed on your computer and the NodeJS plugin enabled. Here are some productivity tips when running tests.
Continue reading %Top 12 Productivity Tips for WebStorm and Angular – Part 2%


Angular and Spring Webflux

Reactive in the Frontend and the Backend
The project AngularAndSpring shows how to be reactive in the frontend by using Angular and in the backend by using Spring Webflux and the reactive driver of MongoDB. Angular is reactive (non-blocking) by using Observables or Promises. Spring Webflux uses Flux and Mono<T> to be reactive.
Why Reactive?
Normal rest controllers receive a request and a thread is used until the response is sent. In that time, the controller has to retrieve the data the thread is blocking while the data store performs the query. That turns in a performance bottleneck with rising concurrent requests. With reactive programming, the thread can perform other tasks while the data store retrieves the data. That offers a performance boost but requires a change to the reactive programming style.


Quickly Create Simple yet Powerful Angular Forms

Forms are an essential part of many web applications, being the most common way to enter and edit text-based data. Front-end JavaScript frameworks such as Angular, often have their own idiomatic ways of creating and validating forms that you need to get to grips with to be productive.
Angular allows you to streamline this common task by providing two types of forms that you can create:

Template-driven forms – simple forms that can be made rather quickly.
Reactive forms – more complex forms that give you greater control over the elements in the form.

In this article, we’ll make a simple example form with each method to see how it’s done.
You do not need to know all the details of how to create an Angular application to understand the framework’s usefulness when it comes to forms. However, if you want to get a better grasp of Angular, you can take a look at this SitePoint article series on building a CRUD app with Angular.
We will use Bootstrap in this tutorial. It is not an integral part of an Angular application, but it will help us streamline our efforts even further by providing ready-made styles.
This is how you can add it to your application:

Open the command prompt and navigate to the folder of your project

Type npm install bootstrap@next. This will add the latest version of bootstrap to the project

Edit the .angular-cli.json file and add a link to the Bootstrap CSS file
“apps": [
"styles": [

We will not use the Bootstrap JavaScript file in this application.

Both template-driven Forms and Reactive Forms require the FormsModule. It should be added to the application in app.module:
import { FormsModule } from ‘@angular/forms’;
imports: [

With that out of the way, we can proceed with the forms themselves.
Template-Driven Forms
Let us assume you want to create a simple form as quickly as possible. For example, you need a company registration form. How can you create the form?
The first step is to create the

tag in your view.
<form #companyForm="ngForm">

We need to modify this tag in two ways in order to submit the form and use the information from the input fields in our component:

We will declare a template variable using the ngForm directive.
We will bind the ngSubmit event to a method we will create in our component

<form #companyForm="ngForm" (ngSubmit)="submitCompany(companyForm.form);">

We will create the submitCompany method in the component a bit later. It will be called when the form is submitted and we will pass it the data from the form via companyForm.form.
We also need a submit button, regardless of the content of the form. We will use a few Bootstrap classes to style the button. It is good practice to disable the button before all the data validation requirements are met. We can use the template variable we created for the form to achieve this. We will bind the disabled property to the valid property of the companyForm object. This way the button will be disabled if the form is not valid.
<button class="btn btn-primary" [disabled]="!companyForm.valid">Submit</button>

Let us assume our simple form will have two fields – an input field for the name of the company and a drop-down field for the company’s industry.
Creating form inputs
First, we create an input field for the name:
<input type="text"

Right now we have a standard input with the type, name and class attributes. What do we need to do to use the Angular approach on our input?
We need to apply the ngModel directive to it. Angular will create a control object and associate it with the field. Essentially, Angular does some of the work for you behind the scenes.
This is a good time to mention that ngModel requires the input field to have a name or the form control must be defined as standalone in ngModelOptions. This is not a problem because our form already has a name. Angular will use the name attribute to distinguish between the control objects.
In addition, we should specify a template variable for the input: #nameField in this case. Angular will set nameField to the ngModel directive that is applied to the input field. We will use this later for the input field’s validation. This variable will also allow us to perform an action based on the value of the field while we are typing in it.
Now our input looks like this:
<input type="text"

It is almost the same, but with a few key changes.
Let us assume we want the company name field to be required and to have a minimum length of 3 characters. This means we have to add the required and minlength attributes to our input:
<input type="text"

Sounds simple enough, right? We will also need to display an error message if any of these two requirements are not met. Angular allows us to check the input’s value and display the appropriate error message before the form is submitted.
We can perform such a check while the user is typing in the form. First of all, it is a good idea to display an error only after the user has started to interact with the form. There is no use in displaying an error message right after we load the page. This is why we will insert all the error messages for this input inside the following div:
<div *ngIf="nameField.touched && nameField.errors"></div>

The ngIf directive allows us to show the div only when a specific condition is true. We will use the nameField template variable again here because it is associated with the input. In our case, the div will be visible only, if the input has been touched and there is a problem with it. Alright, what about the error messages themselves?
We will place another div inside the aforementioned one for each error message we want. We will create a new div for the error message and use the nameField template variable again:
<div class="alert alert-danger"
The company name is required

We are using the "alert alert-danger" bootstrap classes to style the text field. The nameField variable has the property errors, which contains an object with key-value pairs for all the current errors. The ngIf directive allows us to show this error message only when the ‘required’ condition is not met. We will use the same approach for the error message about the minimum length.
Continue reading %Quickly Create Simple yet Powerful Angular Forms%


NativeScript Developer Day – Optimizing Startup Time of Angular Apps [Video]

NativeScript Developer Day took place in New York City on September 18th and 19th, 2017. Developer Day is all about providing a dedicated time and space for developers to interface with community experts (and core NativeScript engineering!) to talk all things NativeScript. In the coming days and weeks we will be providing the recordings of each session delivered at NativeScript Developer Day NYC.


Top 12 Productivity Tips for WebStorm and Angular – Part 1

This article was sponsored by JetBrains. Thank you for supporting the partners who make SitePoint possible.
In this 2-part series, Google Developer Experts Jurgen Van de Moere and Todd Motto share their favorite productivity tips for developing Angular applications using WebStorm.
In this first part, Jurgen shares his personal top 5 WebStorm features that allow him to increase his productivity on a daily basis:

Use Angular CLI from within WebStorm
Navigate like a pro
Take advantage of Angular Language Service
Auto format your code
Optimize your imports

Each tip can tremendously increase your development productivity, so let’s dig into them a little deeper one by one.
Tip 1: Use Angular CLI from Within WebStorm
Angular CLI is a Command Line Interface (CLI), written and maintained by the Angular team, to help automate your development workflow. You can use it to quickly create new Angular projects and add new features such as components, services and directives to existing Angular projects.
WebStorm’s integration with Angular CLI provides you with all its power right from within WebStorm, without using the terminal.
To create a new Angular Project, choose File | New | Project and select Angular CLI.
Enter a project location and hit the Create button. WebStorm uses Angular CLI to create a new Angular project and install dependencies.
When your new Angular application is in place, you can easily add new Angular features. Right click on src/app and choose New | Angular CLI to pick the type of feature you wish to add.
Once you’ve selected a feature, you can specify the name and optional parameters, just as you would with Angular CLI on the command line:

To learn more about Angular CLI options and parameters, make sure to check out The Ultimate Angular CLI Reference.

What’s really awesome is that WebStorm automatically adds the component to the right Angular module for you, in this case AppModule.
If your application has multiple Angular modules, right click on the module you wish to add the feature to and choose New | Angular CLI. WebStorm will make sure the new files are created in the right location and that the new feature is added to the correct Angular module.
How sweet is that!
Tip 2: Navigate Like a Pro
Use cmd-click or cmd-B to easily jump to any definition within your project.
If you are a keyboard user, just put your cursor on a term and hit cmd-B. If you are a mouse user, hold down the cmd button and all terms you hover will turn into links to their definition.
WebStorm automatically recognizes Angular components and directives in your HTML, links to stylesheets, links to templates, classes, interfaces and much more.
No need to open file(s) manually, just jump to any definition you need:

When looking for a file that you don’t have an immediate reference to, hit shift twice to open the Search everywhere dialog. You don’t have to type the entire search string. If you want to open AppComponent, just type the first letter of each part — i.e. ac — and WebStorm will immediately narrow down the result list for you, so you can quickly pick the suggestion you wish to open:

Another super useful navigation shortcut is cmd-E, which presents you with a list of recently edited files so you can easily navigate back and forth between them.

Knowing how to quickly navigate to the code you need will save you a tremendous amount of time every single day.
Tip 3: Take Advantage of Angular Language Service
Angular Language Service is a service, designed by the Angular Team, to provide IDEs with error checking and type completion within Angular templates.
WebStorm integrates with Angular Language Service to better understand your code. To enable Angular Language Service, first make sure it is installed:
npm install @angular/language-service –save-dev

If you use Angular CLI to generate an Angular application, Angular Language Service is automatically installed.

Next, go to Preferences | Languages & Frameworks | TypeScript, make sure Use TypeScript Service is checked and click Configure…:

The Service Options modal will pop up. Enable Use Angular service and apply the changes:

By default, WebStorm already provides great assistance for writing Angular code.
When editing a script, WebStorm automatically imports the required JavaScript modules so you don’t have to import them manually.
If you open up the TypeScript panel, WebStorm provides you with immediate feedback on the validity of your code, so you can quickly resolve issues before having to compile your project.
Watch how the OnInit interface is automatically imported and how the live TypeScript feedback immediately tells you whether or not your TypeScript code is valid:

When you edit a template, WebStorm provides you with smart code completion that recognizes components, directives and even input and output properties:

With Angular Language Service enabled, WebStorm is able to improve code completion in template expressions:

… and report template errors more precisely right inside your editor:

Catching errors without having to compile your project saves you incredible amounts of time.
Tip 4: Auto-format Your Code
Don’t worry about formatting your code manually. WebStorm has you covered.
Whether your are in a template, a script, a stylesheet or even a JSON file, just hit cmd-option-L and WebStorm will automatically format all code for you:
Continue reading %Top 12 Productivity Tips for WebStorm and Angular – Part 1%