angular 4

Story of File Uploading in ASP.NET Core (Part II - Angular/AJAX)

Uploading files from Angular end to an ASP.NET Core Web API can be done using the same IFormFile interface; introduced in the previous post. To keep things separated, a new API controller (UserController) has been created with the following POST action, [HttpPost] public async Task<IActionResult> PostUser([FromForm]UserVM vm) { if (!ModelState.IsValid) { return BadRequest(ModelState); } /* Use Automapper for mapping UserVM to User */ User user = new User { Name = vm.Name }; using (var memoryStream = new MemoryStream()) { await vm.Avatar.CopyToAsync(memoryStream); user.Avatar = memoryStream.ToArray(); } _context.Users.Add(…

Keep reading

Asynchronous Validation in Angular's Reactive Forms Control

I've been playing around with Angular for some time now. When it comes to building forms, I tend to go with reactive forms. In short, while using reactive forms; you create a form model consists of different form controls directly in your component class. Once you are done, you bind them (form controls) to your native form control elements defined in the component's view. But that is all about reactive forms and the official documentation talks at length about it here, https://angular.io/guide/reactive-forms I'm assuming that you…

Keep reading

Lazy-loading NgModules in ASP.NET Core AngularSPA

Angular has this cool feature of loading a module lazily. Modules that are set up to load lazily can significantly save application startup time. Lazy-load module set up is done in application's routing configuration section. As the title suggests we will be using the AngularSPA template shipped with Visual Studio 2017 Preview (2) for demonstration. Route that is configured to lazy-load a module sends an HTTP GET to the server which in turns return the module in a chunk of code block. This only happens when the router is activated…

Keep reading

Handling Boolean Types on Angular with Pipe

This post shows you how you can handle .NET Boolean types on Angular client using Pipe. The Pipe formerly known as Filter in AngularJs is an Angular (2,3,4) framework feature that helps transform data. Here goes a very simple pipe which converts a boolean value to a specific Yes/No string. import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'questionableBoolean' }) export class QuestionableBooleanPipe implements PipeTransform { transform(value: boolean): string { return value == true ? 'Yes' : 'No' }; } Next, make the questionableBoolean pipe globally available so that you can use it…

Keep reading

Adding Angular Material in ASP.NET Core Angular SPA template (Update 2.0.0)

If you are not familiar with ASP.NET Core SpaServices, take a look at this repository: https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.SpaServices Lots of SPA templates (Angular, React, Vue, Aurelia etc.) are available in this repo that uses NodeServices for server side rendering. We will work with the AngularSpa template and add Angular Material in it. To install the Spa templates via yeoman, first intall the template generator with the following command: npm install -g generator-aspnetcore-spa@next Create a directory where you will initialize the…

Keep reading