Showing posts with the label Angular 6

Log exception to file in c# .net core application explained

In production environment when any bug gets reported at that time as developer wants to get the exception details of bug to resolve the issue on high priority.
In some case there might be situation where exception is not logged in table but developer wants to check the bug immediately. for that purpose we need to write the
exception details including stack trace of bug in file. To implement this easily i am going to demonstrate the implementation of custom logging in file as below.

First we need to construct the exception and logger method in custom logger class as shown below.

public class CustomLogger { public static List<string> ConstructExceptionDetails(Exception ex,string FunctionName) { return new List<string>() { $"{DateTime.Now} - {FunctionName}", $"Exception: {ex.Message}", $"StackTrace: {ex.StackTrace}", $"InnerException: {ex.InnerException?.…

Devexpress Datebox date formatting in angular 6 with example

The Devexpress DateBox in Angular is a widget that displays the date and time in one of DevExtreme predefined formats or a format defined in an
external localization library, or a type in the required date/time value. In this article,
the i will provide you different date-format which we can set on DateBox to show date and time to user.

Following is the code snippet to add Datebox in your Angular form if the you want to capture only date

<dx-date-box [value]="now" displayFormat="EEEE, MMM dd" type="date" > </dx-date-box>

Following is the custom formats we can set and depending upon its converted values will be shown.

"dd-MM-yyyy" => 28-10-2018 "EEEE, MMM dd" => Sunday, Oct 28 "dd MMM yyyy EEEE" => 28 Oct 2018 Sunday "dd-MM-yyyy EEEE" => 28-10-2018 Sunday
alternatively you can change the format as way you want

Following is the code snippet to…

Angular User Session Timeout example step by step

This functionality let the user know that their session is about to expire and that they would be logged out if they didn’t take action. I have written this functionality in Angular for my latest application. 

If you are new to Angular 6 then read my article about Setting up Angular 6 step by step before jump to this article to get handy in Angular 6.

Dealing with timers in Angular can be significantly different when using React components and subscriptions. The basic premises remains the same, though. We’ll have a service with a timer that will provide a Subject to which consumers of the service can subscribe. A React Subject provides an easy mechanism to trigger a “next” subscription to alert consumers that the timer has expired.

import{ Injectable } from '@angular/core';
import{ Observable, Subject, Subscription, BehaviorSubject} from 'rxjs/Rx';
exportclassIdleTimeoutService {
private_count: number = 0;
private_serviceId: string = 'idleTimeoutS…

How to upload a file from Angular 6 to ASP.NET Core 2.1 Web API Application step by step

This post talks about how to upload a file from Angular 6 to ASP.NET Core 2.1 Web API. 

First thing first, let’s create an Angular 6 app with Visual Studio 2017. To do that, open Visual Studio 2017  community edition , hit Ctrl+Shift+N and select the ASP.NET Core Web Application (.NET Core) project type from the templates. When you click Ok, you will get the following prompt,

Make sure to select “ASP.NET Core 2.1” from the version dropdown and choose Angular. The Visual Studio will create an ASP.NET Core 2.1 based project with Angular 6 configured. This should create an Angular 6 app. You should run the app to make sure that there are no errors.
Create Upload API in ASP.NET CoreTo support uploading on the server, add a Web API controller named UploadController in the Controller folder. This controller has the API to upload the file and store it at a location. Add the controller with the following code.

using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Syste…

Getting Started Build Angular 6 Web Application step by step

In this article we will be building an Angular 6 application step by step from scratch with sample example. We will be generating our Angular 6 hello world application using angular CLI and then modify it to have a user management project where there will be a login screen for an admin and post login he can perform CRUD operations such as create, read, update and delete user with the sample REST API exposed using HttpClientModule. We will also be using RouterModule to have routing enabled. Also, at the end we will be integrating material designing with our Angular 6 app.

Table of Contents1. Angular 6 Highlights 2. Generating Angular 6 Project 3. Angular 6 Project Structure 4. Angular CLI Useful Commands 5. Angular 6 Routing 6. Spring Boot Implementation 7. Service in Angular 6 Application 8. Creating Components in Angular 6 9. Testing Angular 6 Application 10. Adding Material Design in Angular 6 App Angular 6 Release Highlights Angular v6 is the first release of Angular tha…