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. Read More
Category: Angular
Upgrade Angular 6 app to Angular 7 with Visual Studio 2017
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. Read More
How to lazy load images in Angular 6
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.
Read More
Angular Console – An UI for Angular CLI
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.
Read More
Angular 6.1 introduces a new KeyValue Pipe
Angular 6.1 is out and it introduces a new KeyValue pipe to help you iterate through objects, maps, and arrays. Today, the ngFor directive doesn’t support iterations over objects or Maps. To fix this issue, Angular 6.1 introduces a new KeyValue pipe. The KeyValue pipe converts an Object or Map into an array of key-value pairs to use with ngFor directive. In this post, we’ll find out how to use this new KeyValue pipe with Angular 6.1 with examples. Read More
Add Angular 6 Material to Angular 6 and ASP.NET Core app
Angular material is material design components for the Angular application to create comprehensive, modern UI components that work across the web, mobile, and desktop. Earlier, I posted about how to create an Angular 6 app with Visual Studio 2017 & ASP.NET Core and also posted about implementing ASP.NET Core SPA template features. In this post, we’ll see how to add angular 6 material to angular 6 and ASP.NET Core app. The steps given in this post are also applicable for any standard angular 6 application. Read More
Add Bootstrap 4 to Angular 6 or Angular 7 application
Bootstrap 4 is the newest version of Bootstrap, the world’s most popular front-end component library to build responsive, mobile-first projects on the web. Angular 6 is the newest version of Angular. A combination of both will make an application fast, visually appealing and modern. In this post, we’ll see how to add bootstrap 4 to Angular 6 or Angular 7 application with some examples. Read More