Image for post
Image for post
Photo by Austin Chan on Unsplash

In one of my Vue project, I needed to generate word documents with different templates. I did a small R&D and came across several libraries and APIs to achieve this. All of them were not free and we have to buy a subscription which is very expensive for me. The available free libraries used an approach where we have to design the template with HTML first and then render them as a word document. This approach did not fit to my need as there were many templates and they could frequently change as per the client’s need.

Finally I came across a great library ( which was the only library available on the Internet) to generate word documents from a given template that includes tags that can be replaced with contemporary data when generating the report. It was a JavaScript library but my Vue project was in Typescript. …


Real-time web functionality to applications for a better user experience

Image for post
Image for post
Photo by Jessica Sysengrath on Unsplash

Introduction

Nowadays, almost all the applications are expected to deliver up-to-date information to the end-users without hitting a refresh button. That is, we need a real-time connection with the servers to fetch information. With .NET frameworks, a framework called SignalR comes to enable real-time data transferring.

In my article, I use this SignalR to create a chat application with a combination of Angular 10 ( but the implementation is similar to Angular 9, 8,7, and 6 too) and ASP.NET Core. The diagram below shows an overview of my project.


Creating Text Animations using Anime.js

Image for post
Image for post
Screen Record by Author

Yes, of course, Angular provides us with a handy way of creating animations in your Angular applications. But, this article is for those who are lazy to code but need simple but cool looking text animations that satisfy the requirements and make the website attractive.

First of all, I will quickly explain how to enable animations in anime.js in your Angular application and then go through some different text animations that you can use quickly.

Importing anime.js to the App

  1. In your Angular app, go to the index.html file and paste the following CDN script inside the content of<head> tag.
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

2. Next, you have to declare the anime function in the component which you hope to create the text animation in. I here use the app.component in my demo, so I do the declaration in the app.component.ts file. …


Image for post
Image for post
Photo by Alex Holyoake on Unsplash

Introduction

In the previous article , I explained how to set up Firebase in your Angular application. In this article, I am going to explain how to upload images or any other files to the Angular storage and get a downloadable URL which can be used to view the image back in the application or to save the URL in Firebase Database or in another Server side Database.

As per the previous article, we imported AngularFireDatabaseModule to enable Firebase’s' database functions (along with Firestore) in the module.


Image for post
Image for post
@codequs.com

Introduction

This is a short article to tell you how to set up Firebase for your Angular app first time. With latest versions of Firebase, there are small changes in the setup files when compared to the earlier procedures. Therefore, through this article , the latest way of setting up Firebase is explained.

I am explaining this with a simple project to upload data to the firebase database.

Step 1 (Setting up the Firebase Account)

  1. Go to https://console.firebase.google.com/ and login with your Google Account’s' credentials. Then you can see a page like this.


Image for post
Image for post
Photo by Ishan on Unsplash

Content

This article consists of two parts as Part 1 and Part 2.

Part 1 — Introduction , Some Advantages of Angular Interceptor.

Part 2 — A Practical Explanation of Implementing Interceptor . ( This )

Introduction

As I have explained in the previous article, there are lots of advantages of using Interceptors in Angular. We can create many interceptors for different purposes in one application. Here I am going to explain how to implement interceptors for

I. Altering the requests sent out and attach headers

II. Replying a request with fake backend data

Let’s Begin

Step 1

First I create a file named “Interceptor-list.ts” inside Interceptors folder in the app folder in src folder. …


Image for post
Image for post
Photo by wu yi on Unsplash

Introduction

The World is totally a mess with lots of problems that need to be solved.When introducing IT based solutions to those problems, it is getting more complicated. If we can model the real world scenario as it is , in a program, it is very easy to cope with that problem. To model the real world into a program, Object-Oriented Programming (OOP) Concept has been introduced.

OOP Concept is indeed for modelling the real World into a program and reducing the complexity of the problem to a level where everything is considered as an object.

In addition to classes and objects, the main 4 concepts of OOP…


Image for post
Image for post
Photo by Denys Nevozhai on Unsplash

Content

This article consists of two parts as Part 1 and Part 2.

Part 1 -- Introduction , Some Advantages of Angular Interceptor.

Part 2 -- A Practical Explanation of Implementing Interceptor .

Introduction

Since Angular 4.3 , a new feature has been coming to modify all outgoing http requests and incoming responses globally. In other words, we can pre-process all the http requests and responses. With this new feature, an Angular developer has been enabled to reduce unnecessary efforts and do the tasks with less effort and less set of lines.

Before going to the coding and implementation part, let me list out what the http interceptors can do so that you can get a good idea why we need and where we need interceptors. …


Image for post
Image for post
Photo by 童 彤 on Unsplash

A software Architecture:

A software architecture is the way that different functioning modules or the components are interrelated in a system to achieve a single task or set of tasks , fulfilling the requirements with best performance.

There are several software architectures used to design a software at different scales, such as MVC architecture, Layered Architecture, Component Architecture, Service Oriented Architecture etc.

MVC Architecture

This is one of the mostly-used architectural pattern for developing various applications. MVC stands for Model , View , and Controller which a MVC framework consists of. These three categories have its own functions.

Model: This represents the data that you need to display to the view. We can basically say Model class represents the data in your database. …


Image for post
Image for post

Without any server-side code hosted on a server, you can send emails through your Angular application with smtpJS, a client-side Javascript library.

First you need to download this library and include it into the necessary component of the Angular Application.
Click here to download the library file. (If you cannot download the js file, please follow this link and click download)

Next , put this downloaded js file into the assets folder found in src directory of the project.

Next we have to get the help of an email service provider to send the email. I here use Elastic Email site for this. First go to the Elastic Email site to create an account. Just complete the sign up process, it’s that simple. …

About

Udith Gayan Indrakantha

Technology Enthusiast | Full Stack web Developer | https://udith.netlify.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store