Showing posts with the label Angular 6

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

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'; @Injectable() export class IdleTimeoutService { private _count: number = 0;

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 Core To 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.

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 Contents     1. 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