Angular Cli

Angular 7 is out!! Angular Material received a big update in this year and the two new features of Angular CDK, Virtual Scrolling and Drag and Drop support are now available with Angular 7. Virtual Scrolling loads and unloads elements from the DOM based on the visible parts of a list, where Drag and Drop feature supports dragging, dropping and rearranging elements. In this post, we will look at Virtual Scrolling and Drag and Drop features in action with Angular 7. (more…)

Last week, I posted a guide on upgrading Angular 6 app to Angular 7. But, what if you wish to create Angular 7 app from scratch with VS 2017? At the time of writing this post, default ASP.NET Core SPA templates allow you to create Angular 5/6 based app with Visual Studio without installing any third-party extensions or templates. This post talks about how to create an Angular 7 App with Visual Studio 2017. (more…)

Angular 7 is out!! It’s another major release spanning the entire platform, including the core framework, Angular Material, and the CLI with synchronized major versions. Earlier I posted about creating an Angular 6 app with Visual Studio 2017 using ASP.NET Core 2.1 SPA templates. Now, it’s time to upgrade the same angular app to the latest version which is Angular 7. This post talks about how to upgrade Angular 6 app to Angular 7 with Visual Studio 2017 and we’ll also see an example of Angular 7 Drag and Drop Feature. (more…)

Lazy loading is a technique to load the content only when the user asks for it. Therefore, the initial loading of the webpage is much faster as the complete page is not loaded. In case of lots of images on the webpage, it is always recommended to use lazy loading for the images. As an example, while showing a photo gallery, there is no point loading all the images in one go as the user may leave after only viewing the first few images and this would result in slower loading and waste of bandwidth. In such scenarios, lazy loading is an ideal choice. This post talks about how to lazy load images in Angular 6.(more…)

When Angular CLI was released, it instantly got the attention, and many developers started using it as it took away all the pain to create Angular based applications. Angular CLI performs every activity required for an angular application starting from creating to deploying the app. You don’t have to spend time for webpack configurations, making tests run, fixing source maps as the CLI takes care. But, one will have to remember all the CLI commands to use it efficiently. To address this, a new tool is available called “Angular Console”. It’s a visual representation of angular CLI. In this post, we’ll see how to get started with Angular Console and create an angular application using the same.(more…)

Earlier, I posted about creating an angular 6 based app with VS 2017. It’s a pure Angular 6 app and doesn’t use features comes with the ASP.NET Core SPA template. At the time of writing this post, default ASP.NET Core SPA template for angular points to angular 5. The SPA template uses angular on the client side and ASP.NET Core as back-end. It uses a package Microsoft.AspNetCore.SpaServices as a middleware to provide different configurable options for your application such as HMR (Hot Module Replacement), Routing Helper, SSR (Server Side Rendering) etc.. In this post, let’s find out how to create an angular 6 app with ASP.NET Core 2.1 and implement ASP.NET Core SPA template features in the same app. (more…)