Angular – Spikes Apps

NG Components – Treeview

Ruben B — Tue, 22 Aug 2017 13:08:59 +0000

Intro

I’m creating some open source angular components to use across multiple projects within the organization. This might be useful for other people as well. The components will be open source and reside in a Github repo and will be packaged into an npm package.

The first component in this library will be a Treeview. At the core this is a pretty easy component to build, but further on I will tell you about a small bump on the road and the design decision that was made to bypass that bump.

Let’s get to it.

Treeview

I needed a treeview for a project with the following requirements:

Recursive
Tri-state select visualization
Retrieve selected items on a level per level basis

spikes-treeview

In theory, we could do without a main component for a simple treeview. But if you would like to show Collapse/Expand All buttons, they would need to live outside of the treeview items.

Later, other functionalities can be added like e.g. search.

But I digress. This is the main tree-view component:

html

The main component exists out of 2 parts:

Toggle All buttons:
Through configuration there can be decided to show the Expand All/Collapse All The default setting is false.
Spikes-treeview-item:
Explained below.

ts

@Component({  selector: 'spikes-treeview',  templateUrl: './spikes-treeview.component.html',  styleUrls: ['./spikes-treeview.component.css']})export class SpikesTreeviewComponent implements OnInit {  private _treeviewConfiguration: models.ITreeviewConfiguration;  private _treeviewItems: Array = [];@Input()  set treeviewConfiguration(config: models.ITreeviewConfiguration){this._treeviewConfiguration = new models.TreeviewConfiguration();Object.assign(this._treeviewConfiguration, models.TreeviewConfiguration.defaultTreeviewConfiguration, config);  }  get treeviewConfiguration(){if (this._treeviewConfiguration == null){  this._treeviewConfiguration = new models.TreeviewConfiguration();  Object.assign(this._treeviewConfiguration, models.TreeviewConfiguration.defaultTreeviewConfiguration);}return this._treeviewConfiguration;  }  @Input()  set treeviewItems(items: Array) {this._treeviewItems = [...items];  };  get treeviewItems() {return this._treeviewItems;  }  constructor() { }  ngOnInit() { }}

The main component takes 2 inputs:

treeviewConfiguration: configuration of the treeview (url github)
treeviewItems: items to show

spikes-treeview-item

The treeview item is the recursive component of the treeview. It has a reference to itself as you can see in the html below.

html

{{ item.displayText }}

So what’s going on here:

We loop through all the items passed to the spikes-treeview-item component.

wrapper for the expand/collapse icon for each item.
Hidden when the current treeview-item does not have any child items.

open or close the underlying child-items

an icon that is styled through css classes.
Default: font-awesome

wrapper for the checkbox icon for each item.
Through configuration we can indicate if we want to show checkboxes. The default is true.

select or unselect the treeview-item.
Selecting (or unselecting) has an effect on the underlying child-items as well as on the parent items above. (Recursively)

an icon that is styled through css classes.
Default: font-awesome

shows the displaytext of the treeview-item.
Has the same click response as the checkbox icon.

when the current item has child-items and is expanded, the contents of this div are shown.

the child items of the current treeview-item.

ts

@Component({  selector: 'spikes-treeview-item',  templateUrl: './spikes-treeview-item.component.html',  styleUrls: ['./spikes-treeview-item.component.css']})export class SpikesTreeviewItemComponent implements OnInit {  private _treeviewConfiguration: models.ITreeviewConfiguration;  private _treeviewItems: Array = [];  @Input()  set treeviewConfiguration(config: models.ITreeviewConfiguration){this._treeviewConfiguration = new models.TreeviewConfiguration();Object.assign(this._treeviewConfiguration, models.TreeviewConfiguration.defaultTreeviewConfiguration, config);  }  get treeviewConfiguration(){if (this._treeviewConfiguration == null){  this._treeviewConfiguration = new models.TreeviewConfiguration();  Object.assign(this._treeviewConfiguration, models.TreeviewConfiguration.defaultTreeviewConfiguration);}return this._treeviewConfiguration;  }  @Input()  set treeviewItems(items: Array) {this._treeviewItems = [...items];this.normalizeTreeviewItemParents();  };  get treeviewItems() {return this._treeviewItems;  }  constructor() { }  ngOnInit() { }}

The item component takes the same 2 inputs:

treeviewConfiguration: configuration of the treeview (url github)
treeviewItems: items to show

You might notice that I’m not using an input tag for the checkbox. I tried using it at first, but then I hit a snag.

Tri-state checkbox

There is this property on a checkbox input called “indeterminate”, it cannot be set through HTML, only through script and can be used to indicate that a checkbox is in an “indeterminate” state. You see this kind of thing often when you have a treeview with checkboxes where a parent is “indeterminate” when one or more of its child items, but not all of them, are checked.

At first, I wanted to make use of this property on the checkbox, but I soon found out that browsers handle a click on an indeterminate checkbox differently. This is the small bump that I referred to earlier.

Chrome :

Edge :

As you can see, in the gifs above, a checkbox that is checked and set to indeterminate gets either unchecked (Chrome) or checked (Edge) after clicking it.
Because of this, I changed this to using i-tag and setting an appropriate class to it. I used font-awesome as a default font set for setting the icons. But I left the option to replace them through configuration.

Get selected items

I added a helper class that lets you retrieve the selected items from the treeview:

getTreeviewSelectedItems(treeviewItems)

Input:
the treeviewItems of the treeview
Output:
a flat list of all selected items, without any information about the level on which the item resides.

getTreeviewSelectedItemsPerLevel(treeviewItems)

Input:
the treeviewItems of the treeview
Output:
a list of TreeviewLevel Each level has an array of selected items. The level is a number indicator starting from level 1.

Full code and demo app

The code for this component is available on Github under src/components/spikes-treeview.
A demo app showing this component is also available.

Feel free to comment below!

Ruben Biesemans

Analyst Developer @ Spikes

How to implement Windows Authentication in an Angular (^4.3.1) application with a stand-alone Web API

Ruben B — Fri, 04 Aug 2017 09:45:41 +0000

I’ve noticed that my post about Windows Authentication in an AngularJS application has gotten a lot of attention.
With the new HttpClient introduced in Angular 4.3.1, I think it’s a good moment to write a little update.
I’m following the same setup as the previous post:
Angular project
Web Api project
Windows Authentication
Let’s get started.
Web Api
Little has changed for the Web Api part. The short version is:
application.config
Web API
Add CORS
Configure CORS
var cors = new EnableCorsAttribute("http://localhost:30033", "*", "*") { SupportsCredentials = true };
Configure for json instead of XML
config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
Web.config settings

You can find the in-detail version here.
Some points of interest in the Web API setup:
In the CORS configuration we need to set which url’s are can contact our api. I’m developing an angular project with the angular-cli. The default is http://localhost:4200
var cors = new EnableCorsAttribute("http://localhost:30033,http://localhost:4200", "*", "*") { SupportsCredentials = true };
I’ve noticed that while setting up a project, as described in my previous post, works as expected if you start from scratch. Starting from the github repo of my sample, sometimes you keep getting a 401 unauthorized on the post request.
If that’s the case, you can easily solve this by selecting the web api project in visual studio and open up the properties. Make sure to set Anonymous Authentication to Enabled.
Setting up our Angular application
I’m using the angular-cli. If you don’t know how to use it, check out their getting started information before continuing.
After setting up the application, we include the new HttpClientModule in the app.module:
import { HttpClientModule } from '@angular/common/http';@NgModule({ declarations: [AppComponent ], imports: [BrowserModule,HttpClientModule ], providers: [ ], bootstrap: [AppComponent]})export class AppModule { }
Note: take special note of the fact that I’m using the new http import from @angular/common/http and not the old(er) one from @angular/http which still exists and works as before. I want to make use of newer functionality so I’m going for the new http implementation.
Next, add 2 services to the application.
AuthenticationService
getUser(): Observable {console.log('Calling getUser');let serviceUrl: string = `${environment.serviceBaseUrl}auth/getuser`;return this.http.get(serviceUrl, {responseType: 'text'}) .map((rslt: string) =>{return rslt; }); }
DataServices
save(data: models.IPostDataModel): Observable {console.log('Calling getUser');let serviceUrl: string = `${environment.serviceBaseUrl}data/save`;return this.http.post(serviceUrl, data, {responseType: 'text'}) .map((rslt: string) => {return rslt; }); }
Note: the new http client uses json by default. And tries to parse what is returned by a request as json. In our sample web api we return a string, so we need to specify another responseType. Which in our case will be text. More about this can be found here.
Import and provide those services in the app module :
import * as svcs from './services/';providers: [svcs.AuthenticationServiceService,svcs.DataServiceService],
Create the necessary data model for our server side PostData object.
export interface IPostDataModel {Id: number;Name: string;IsTrue: boolean;CreatedOn: Date;}export class PostDataModel implements IPostDataModel {public Id: number;public Name: string;public IsTrue: boolean;public CreatedOn: Date;constructor(obj?: IPostDataModel) {if (obj != null) {Object.assign(this, obj);}}}

I’m using the AppComponent for demonstrating the windows authentication by adding 2 buttons to it.

{{authRslt}}
{{postRslt}}

And of course the functions that will be executed when clicking the buttons.
testAuthentication(): void {this.authSvc.getUser() .subscribe(r => {this.authRslt = r; this.authBack = 'success';},e => {console.log(e); this.authBack = 'error';} ); } testPostData(): void {this.dataSvc.save(new models.PostDataModel({Id: 1, Name: 'DeBiese', IsTrue: false, CreatedOn: new Date()})) .subscribe(r => {this.postRslt = r; this.postBack = 'success';},e => {console.log(e); this.postBack = 'error';} ); }
HttpInterceptor
In the new http client module, intercepting a request and/or response is very easy. Writing an interceptor is like writing an angular service that implements the HttpInterceptor interface.
An example of an interceptor is the following:
import { Injectable } from '@angular/core';import { HttpRequest, HttpHandler, HttpInterceptor, HttpEvent} from '@angular/common/http';import { Observable } from 'rxjs/Observable';@Injectable()export class WinAuthInterceptor implements HttpInterceptor{ constructor(){} intercept(req: HttpRequest, next: HttpHandler): Observable> {return next.handle(req); }}
This interceptor is doing nothing now. It intercepts a request and passes it on without change.
In our case, we want to make sure that every request adds the current user’s windows credentials. The intercept method changes to this:
intercept(req: HttpRequest, next: HttpHandler): Observable> {req = req.clone({ withCredentials: true});return next.handle(req); }
The request (response) object needs to be immutable, so we need to clone the original request before we return it. We set the withCredentials parameter to true so that every outgoing request adds those credentials.
Lastly, we need to make sure that this interceptor is being used. So we need to register it in the app module.
providers: [{ provide: HTTP_INTERCEPTORS, useClass: int.WinAuthInterceptor, multi: true},svcs.AuthenticationServiceService,svcs.DataServiceService ],
Testing the application
Let’s fire up both the Web API and the angular application:
After clicking the buttons:
Both requests are successful, meaning the windows authentication is working the way we want it to work.
Conclusion
Using windows authentication with the new HttpClientModule in Angular 4.3.1 (or higher) is fairly easy. Just write an interceptor and make sure it is being used by providing it in your app module.
I hope this post provides you with enough information to set this up yourself.
The full code base of this test project can be found on github.
Feel free to comment below!
Ruben Biesemans
Analyst Developer @ Spikes