DEV Community: Udith Indrakantha

How to Intercept the HTTP Requests in Angular(Part 1)

Udith Indrakantha — Tue, 04 Feb 2020 04:14:33 +0000

How to Intercept the HTTP Requests in Angular (Part 1) | by Udith Gayan Indrakantha | JavaScript In Plain English | Medium

Udith Gayan Indrakantha ・ Feb 2, 2020 ・ 2 min read
Medium

Send Emails without a server-side code with Angular

Udith Indrakantha — Tue, 24 Dec 2019 16:21:22 +0000

Send Emails without a server-side code with Angular | by Udith Gayan Indrakantha | JavaScript In Plain English | Medium

Udith Gayan Indrakantha ・ Apr 8, 2020 ・ 2 min read
Medium

MVC Architecture as a Software Architecture

Udith Indrakantha — Tue, 24 Dec 2019 14:03:45 +0000

MVC Architecture as a Software Architecture | by Udith Gayan Indrakantha | Medium

Udith Gayan Indrakantha ・ Dec 18, 2019 ・ 3 min read
Medium

Simply Deploy your Angular App on Netlify

Udith Indrakantha — Thu, 07 Nov 2019 18:00:48 +0000

Simply Deploy your Angular App on Netlify - Udith Gayan Indrakantha - Medium

Udith Gayan Indrakantha ・ Nov 3, 2019 ・ 4 min read
Medium

All about .replaceAll() in Java

Udith Indrakantha — Wed, 23 Oct 2019 15:30:06 +0000

All about .replaceAll() in Java. java.lang.String class brings you a… | by Udith Gayan Indrakantha | Medium

Udith Gayan Indrakantha ・ Oct 21, 2019 ・ 2 min read
Medium

Fixing 401 Error with CORS Preflights (with Spring boot)

Udith Indrakantha — Sat, 28 Sep 2019 12:27:12 +0000

When the web application runs on a different domain and the server runs on another domain, we have to deal with cross origin requests. But, if we don’t know the mechanism of cross origin resource sharing (CORS), we will end up with errors like 401.

Error in brief

My Angular web application runs on port 4200, and my spring boot application runs on server on port 8080. I could not enable CORS in my backend, so, I got an error when sending a request from my application like this.

Reason

My pre-flight request is not responded with status OK(200).

Solution

I enabled CORS in my backend. To do this, there are several methods. Here in my post, I have shown the easiest way to do that. But, if you are interest in knowing other ways, click me )

By using Web Security in Spring Boot,

You have to create a web security configuration class. I hope everybody creates that class for backend authentication purposes.

If you have already created that class, inside configure( HttpSecurity httpSecurity ) method ,add this line httpSecurity.cors();

It’s that simple !!!
Originally published at https://webtechmora.blogspot.com by Udith.

How to use ng-bootstrapped Popup Modals within Angular Components

Udith Indrakantha — Sat, 21 Sep 2019 03:49:58 +0000

Hello guys, this article is about how to add ng-bootstrapped modals within your components in Angular application. Going through this article, a very beginner can learn how to add and use different bootstrapped gadgets and other stuffs with your Angular application.

I have already created a very simple project but not yet bootstrapped. I just need to add a popup message box when clicking on the button on the page.
Below is how my application looks right now and I have used only app.component.ts and app.component.html files for this.

Initial Web Page

app.component.html

app.component.ts

Now let's begin to add the requirements to continue.

Step 1

Go to the root project folder of your project.

Install ng-bootstrap to your project by running npm install --save @ng-bootstrap/ng-bootstrap

Go to app.module.ts file and import the Ngbmodule inside import array. import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

app.module.ts

Go to index.html and copy the bootstrap CDN code snippent from bootstrap site , within the scope of tags.

( For now, )

Step 2

Go to ng-bootstrap site and find the bootstrap code section for Modal.(Modal-ng-bootstrap)

Section for Modals

Within the section I have circled in , when you click the button with name "</>Code", you can find a code file with the name modal-component.ts with the following code snippet.

Here , in the above code, you can find two classes as NgbdModalContent (squared in red colour) and NgbdModalComponent (squared in purple colour).
Now it's time to copy code from this snippet and paste it into your app.component.ts file.
First, import the modules shown in Section 1 in the above image into your app.component.ts file.
Secondly, Copy the whole code in section two and paste it at the very end of the app.component.ts file.
Thirdly, inject the service into the constructor of your AppComponent class in app.component.ts file ,as shown in section 3 .
And, Lastly, Copy the method "copy()" shown in the section 4 as a netive method of the AppComponent class.
This method can be used in an (click) event within the button in html file now.

Step 3

Enter NgbdModalContent class in declarations array as well as an entryComponent in app.module.ts file.