Angular – routing with multiple query parameters

The Angular Router enables navigation from one view to the next as users perform application tasks. If we need to pass one or more query string parameters to our next view component, we need to divide our parameters into the routing path with '/:' For example, our app.routing.ts should contains: RouterModule.forRoot([ { path: 'homewithparames/:id/:name', component: HomeComponent }, …

Asp Net Core 2 – Angular: download file from Controller

If we have an Angular client app that needs to download a file (for example a PDF file) from an Asp Net Core 2 api Controller , we can follow what is described in this post. The first implementation is on the server side (an Asp Net Core 2 Controller). So, for example into our controller UserController, …

Angular: HTML to PDF with htm2canvas and jsPDF

Sometimes we need to export our HTML page into a PDF file. So how can we do this? There are two helpful tools that we can use to do this. The first is jsPDF that help us to produce a PDF file from an HTML content. The following is the simple example reported into the npm page: …

DevExtreme: set on Angular the ‘iconSrc’ property of dx-map to use a custom icon local image

The Map is an interactive widget that displays a geographic map with markers and routes. If we need to change the default marker icon we can set the markerIconSrc property to set a custom icon on all markers: <dx-map [zoom]="11" [height]="440" width="100%" [controls]="true" [markerIconSrc]="mapMarkerUrl" [markers]="markers"> </dx-map> In the previous code the 'mapMarkerUrl' contains into the .ts component an …

TypeScript: map a property of an objects collection into an array

The map() method is helpful to creates a new array with the results of calling a provided function on every element in the calling array. Suppose we have an Angular service called 'myService' that through a .getObjects() method returns the following data: result = [ { id: 1, name:'Ross'}, { id: 2, name:'Kevin'}, { id: …

Angular/TypeScript – How to resolve: Type ‘true’ (or ‘false’) is not assignable to type ‘Observable’

Sometimes on Angular we can use Observable in the html template to get notification by async operations and change the view when this operations end. To do this we can use the *ngIf directive to check a condition with the async pipe, but we need also an Observable variable that can notify us the end …

DevExtreme/Angular – how to avoid row selection changing on dx-data-grid column click

Sometimes we need to avoid the row selection changing when we click on some columns of a dx-data-grid. For example if we have a grid where we want to manage some function like copy and paste of data between one row to another and we want also to enable the selection of one or more …

Angular: ViewChild with DOM selectors or template reference variables

Using on Angular the ViewChild decorator to get elements with DOM selectors or template reference variables

Angular: differences between Promise and Observable

List of contents: Introduction Promise Convert Observable to Promise Observable Observables for component interaction When use Promise and when use Observable Introduction Both Promises and Observables are special type of objects that with their abstractions provide a behavior to help us make our applications runs in an asynchronous way, allowing it to perform multiple operations at …

DevExtreme dx-data-grid: binding to a complex datasource on Angular

If we have a complex datasource, where each field is a collection of fields, like the following: public dataSource = [ { "StartDate": { "caption": "Header for startdate", "value": "2018-02-27T12:00:00" }, "Field_1": { "caption": "Header for field 1", "value": 1355 }, "Field_2": { "caption": "Header for field 1", "value": 1125 } }];   If we …

DevExtreme: how to change column header text of dx-data-grid with Angular

On an Angular project that use a dx-data-grid the column header could be changed on the column declaration, with the caption property of the dxi-column item, so in the .htlm component template: <dx-data-grid [dataSource]="dataSource" [showRowLines]="true" [showBorders]="true" [rowAlternationEnabled]="true"   [hoverStateEnabled]="true" [allowColumnResizing]="true" [columnResizingMode]="'widget'" [columnAutoWidth]="true"> <dxi-column dataField="Datestart" caption="Start Date" dataType="date"> </dxi-column> </dx-data-grid>   But if no dxi-column is declared (so …

Angular: protecting routes using guards

Introduction Guard Types How to prevent users from accessing areas that they’re not allowed using Guards Deactivating Routes   Introduction To prevent users from accessing areas that they’re not allowed to access, on Angular we can use the protecting routes task. Angular’s router provides a feature called Navigation Guards. In this article, we will try …

Angular: resolve error @ViewChild annotation returns undefined

With Angula you can access to a child component from a parent component using the @ViewChild Annotation. Sometimes, if the component isn't yet initialized when you access it, you get an error that says that the child component is undefined. The first thing to consider is that you need to wait for the view to be initialized …

Angular: how to implement two-way data binding

The two-way data binding on Angular allows you to create interactivity between the various components of the interface and the underlying data model with little effort, but also has a price in terms of performance. Angular 2 (differently from  Angular 1.x) does not have two-way data binding activated by default, however we can activate it …

Angular: how to set component properties using RouterModule class

The Angular Router enables navigation from one view to the next as users perform application tasks. RouterModule.forRoot creates a module that contains all the directives, the given routes, and the router service itself. If you want to set a component input field (in this example the property startValue of the CounterComponent component) with the RouterModule.forRoot method, …