Angular Basic HTTP Post & Get Tutorial

Data is everything in a web app. Now I'll show you how to do a basic http requests on Angular 11.

For this exercise, we'll use typicode's json placeholder for our data.

To make our lives easier, we will create a reusable service called "dataHTTPService" service wrapper class.

First, we need the HttpClientModule module imported and referenced in the app.module.ts.

import { HttpClientModule } from "@angular/common/http";

It will have these two functions get and post request.

public sendGetRequest(url: string) {

    return this.httpClient.get(url);

  }

  

  public sendPostRequest(url: string, body: any) {

    const _headers = new HttpHeaders().set("Content-Type", "");

    return this.httpClient.post(this.REST_API_SERVER + url, body);

  }

Let's use the photos get request URL so we can display a list of thumbnails for our example.

jsonplaceholder.typicode.com/photos

We can now fetch data in our app module's OnInit function:

ngOnInit(): void {

    this.ds

      .sendGetRequest("http://jsonplaceholder.typicode.com/photos")

      .subscribe((data: any) => {

        console.log(data[0]);

      });

  }

Now you'll see our list of thumbnails:

Play with the StackBlits code.

Buy me a cup of coffee :)

Angular 11 Custom Vertical Pagination on Scroll Tutorial

Working with Angular<ng> is fun but when displaying hundreds of feed items ala facebook the older mobile devices  can't handle it. Good thing there is a virtual scroller from the material CDK but it does not fit my needs. The experimental version is still buggy and jumpy at times.

Now I'll show you how to do virtual scrolling without using any third party library in Angular. It's a very simple solution and only involves a bit of coding.

Keep in mind the page items you want to display. For this exercise we need to display 20 feeds per page.

This line will determine if we loaded enough feeds so we can limit the number of feeds per next load and increment the <beginFeeds> variable accordingly.

if(this.pageLoad > this.beginFeeds + 40){

    this.beginFeeds += 20;

}

If the <pageLoad> is more than 40 items than the <beginFeeds>, it should increment 20 items for the <beginFeeds> variable.

We set the scroll event listener so when our button element's top is above the viewport it will call the feed loader.

ngOnInit(){

    window.addEventListener('scroll', eScroll, false);

}

This line will set the feeds hidden variable to true so we can check it on an *ngIf compare and hide our div

for(i=0; i < this.feeds.length; i++){

        

    this.feeds[i].hidden = true;

    if(i < this.beginFeeds){

        this.feeds[i].hidden = false;

    }

}

This line increments the <pageLoad> variable for the next data fetch.

this.pageLoad += 20;

If we keep loading data it will only show non-hidden items and free some precious resources.

What if the user scrolls to the beginning? Don't worry my friend. We got it handled.

loadLess = () => {

    

    if(this.beginFeeds - 20 < 0 ) return;

    let start = this.beginFeeds - 20;

    let end = this.beginFeeds + 40; 

    for(var i=0; i < this.feeds.length; i++){

        this.feeds[i].hidden = true; //hide all feeds

    }

    for(i=start; i < end; i++){

        

        this.feeds[i].hidden = false; //unhide feeds in range

    }

}

This line will check if our <beginFeeds> variable is greater than zero and get out if it is.

if(this.beginFeeds - 20 < 0 ) return;

Set our beginfeeds to decrement 20 items.

 let start = this.beginFeeds - 20;

Set the range to <beginFeeds> plus 40 items.

let end = this.beginFeeds + 40; 

Loop through the feeds and set feed items inside the range its hidden variable to false so it will show on the page. Then we'll employ Angular's last item check after its done the *ngFor loop and call our special function to seamlessly scroll back to the feed we are in.

    

for(var i=0; i < this.feeds.length; i++){

     this.feeds[i].hidden = true; //hide all feeds

}

for(i=start; i < end; i++){

        

    this.feeds[i].hidden = false; //unhide feeds in range

}

That's it! that will get you a fairly decent vertical scroll pagination on scroll. 

Here's the StackBlitz

Buy me a cup of coffee :)

Building a native Android and iOS app with Flutter

It's been years since I touched app development again for the reason of me focusing mainly on web development of the entirety of  my career. I am a little bit rusty but things seems promising. My current job is at a company that maintains its own Application on web, iOS and Android and I see the gory details every single day. 

Flutter has been popping up on my newsfeed  and it seems an interesting platform since it can do web, iOS and Android app in one go natively. Yes natively. The web part is at beta stage as of writing though but it's not a big deal. 

So I've been thinking of a way to learn flutter and this is by building my own app which is a simple app that I think will be helpful for ordinary folks in their everyday lives.

What you need:

1. A decent computer that has enough ram for debugging.
2. Flutter installer for your OS
3. Android Studio for the SDK
4. An IDE of your choice.
5. Android/iOs Emulator or an actual device

First install Flutter then followed by Android Studio then your IDE. If all goes well you can now follow flutter's getting started tutorial which is explained in great detail.

I will try to write most of my journey on flutter development. Happy Coding!