DEV Community: Em

Fetch data from JSON using HttpClient in Angular 15

Em — Wed, 12 Jul 2023 08:37:52 +0000

As I said in my previous post, I am here to share what I learn with the hopes others who are also on the path of learning will find it useful and helpful.

The other day I started developing an app and wanted to fetch data from JSON, so that I don't have to create backend part with connection to database. And here is a guide how you can fetch data from JSON in Angular 15.

Let's start:

1. CREATE A PROJECT

Create an app using NPM or use StackBlitz Angular project.

2. CREATE JSON FILE

Inside assets/data folder create a data.json file and you can use any structure you like or want to use to practice. Here is what my JSON file looks like.

{
  "one": {
    "name": "Title for One",
    "image": "https://as1.ftcdn.net/v2/jpg/05/73/34/56/1000_F_573345670_BCRyuEIVJMDZZOuJgbi2GDMxOyxWcr7p.jpg",
    "description": [
      "Some description of One",
      "Some description of One",
      "Some description of One",
      "Some description of One"
    ]
  },
  "two": {
    "name": "Title for Two",
    "image": "https://as1.ftcdn.net/v2/jpg/04/90/51/96/1000_F_490519696_8s6Vun3SKBcvGIABSNH1xhfMAloubVJE.jpg",
    "description": [
      "Some description of Two",
      "Some description of Two",
      "Some description of Two",
      "Some description of Two"
    ]
  },
  "three": {
    "name": "Title for Three",
    "image": "https://as1.ftcdn.net/v2/jpg/04/57/88/18/1000_F_457881854_lLMVVJes5MgCv74Hr6s2DyX3in7omdLT.jpg",
    "description": [
      "Some description of Three",
      "Some description of Three",
      "Some description of Three",
      "Some description of Three"
    ]
  }
}

I used links from the internet for the images, but you can use links for images that are placed in assets/images folder as well.

3. IMPORT HTTP CLIENT

Since Angular 15 works with standalone components you will get an error message if you try to import HttpClientModule and then import HttpClient. This is why you need to import provideHttpClient so you can use HttpClient in components and services. In main.ts add:
import { provideHttpClient } from '@angular/common/http';

In bootstrapApplication add the same in the providers array:
bootstrapApplication(App, { providers: [provideHttpClient()], }).catch((err) => console.error(err));

4. CREATE A SERVICE FOR FETCHING DATA
Create a service using ng g s serviceName command. I placed mine in services folder, but this is optional.
In the service import HttpClient:
import { HttpClient } from '@angular/common/http';

Inject it in the constructor:
constructor(private http: HttpClient) {}

Define a url string variable that will contain a path to the JSON file.
private url: string = 'assets/data/data.json';

Create a method to get the data:
getData(): Observable<any> { return this.http.get(this.url); }

The dataService looks like this:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';



@Injectable({ providedIn: 'root' })
export class DataService {
  private url: string = 'assets/data/data.json';

  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get(this.url);
  }
}

4. USE THE SERVICE

Create the component to use the service to fetch data from JSON file. You can use any type of HTML representation of the structure of JSON file you like.

- data.component.ts

Add standalone flag to the component and import CommonModule in the imports array, if you do not do this you'll get an error.

import { CommonModule } from '@angular/common';
import { DataService } from '../services/data.service';

@Component({
  selector: 'app-data',
  standalone: true,
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css'],
  imports: [CommonModule],
})

Inject the service into the constructor:
constructor(private dataService: DataService) {}

On component initialization subscribe to dataService method and fetch the data.

this.dataService.getData().subscribe((data) => {
        this.data = data;});

Now you can access all JSON data inside the component and display it the way you like.

I made a StackBlitz project for this post, but I decided to implement routing and an option for user to pick what data will be displayed and I used the same logic.

You can check the project here and I hope you will find it helpful:

3 ways to change body background color in different components in Angular 15

Em — Wed, 05 Jul 2023 13:25:31 +0000

Coding apps, as a beginner, lead me to Dev, probably more than 100 times, in search for answers related to many problems beginners face while developing. Did I found my answers? Absolutely YES. This is why I am here now. Sharing small steps for beginners, like me, who are on the same path. Path of evolving, learning growing as a developer.

Here are 3 ways that worked for me, when I had to change body background color with different paths.

Disclaimer: I am not saying these are perfect solutions, nor the only ones, these are just the solutions that worked for me.

Let's begin - creating app and components

For the sake of this post and learning how to change background color in different ways we will make an Angular app with 4 different components. Before this step make sure you have properly installed node.js and Angular cli. You can check this link to learn how to do this.

ng new angular-background-color

We will call our app Angular Background Color.
Now let's make 4 different components.

ng g c One --standalone --skip-tests
ng g c Two --standalone --skip-tests
ng g c Three --standalone --skip-tests
ng g c Four --standalone --skip-tests

Including Bootstrap in the app

You can include bootstrap in the app in any way you like (look at the Bootstrap documentation). I decided to install Bootstrap using:
npm install bootstrap
command and including the Bootstrap in angular.json file. Edit the styles and scripts sections like this:

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
"scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ]

1. Setting global styles

We are going to set some global styles in the styles.css:

body {
/* Default background color */
  background-color: #f8ffcc;
}

h1 {
  color: #ae4cd5;
  border-radius: 5px;
  font-weight: 700;
}

small{
  color:#ae4cd5;
  text-transform: uppercase;
  font-weight: 400;
}

2. Component One

one.component.html

The Html part of each component will be similar, containing just one Title, subtitle and button.

<div class="container-fluid">
  <div class="row mt-5">
    <div class="col text-center">
      <h1 class="one p-2">Hello from component 1</h1>
    </div>
  </div>
  <div class="row subtitle text-center mt-1">
    <small>This is the inital background color of body tag.</small>
  </div>
  <div class="row buttons mt-5">
    <div class="col text-center">
      <a class="btn two" [routerLink]="['/two']">Component Two</a>
    </div>
  </div>
</div>

one.component.css

.btn.two {
  width: 80%;
  background-color: #ae4cd5;
  border-radius: 5px;
  border: 1px solid #efb2e2;
  color: #f8ffcc;
  text-transform: lowercase;
  font-weight: bold;
  box-shadow: rgba(129, 0, 202, 0.15) 1.95px 1.95px 2.6px;
}

3. Component Two

two.component.html

We will only change few things.
Title:
<h1 class="one p-2">Hello from component 2</h1>
Subtitle:
<small>Body color changed using Element Ref.</small>
Button link and text:
<a class="btn three" [routerLink]="['/three']">Component Three</a>

two.component.css

Change the background color, color and border color of the button to:

.btn.three{
  background-color: #f1ff99;
  border: 1px solid #e688d4;
  color: #ae4cd5;
}

4. Components 3 and 4

We will now do the same changes like in component 2 but adjust them for component 3 and 4.

html changes

Component 3 title: <h1 class="one p-2">Hello from component 3</h1>
Component 3 subtitle: <small>Body color changed using DOCUMENT from angular/common.</small>
Component 3 button: <a class="btn one" [routerLink]="['/four']">Component Four</a>
Component 4 title: <h1 class="one p-2">Hello from component 4</h1>
Component 4 subtitle: <small>Body color changed using css :host-context() function.</small>
Component 4 button: <a class="btn four" [routerLink]="['/']">Component One</a>

css color changes

Component 3 button colors:

.btn.one{
  background-color: #efb2e2;
  border: 1px solid #E688D4;
  color: #ae4cd5;
}

Component 4 button colors:

.btn.four {
  background-color: #f8ffcc;
  border: 1px solid #f1ff99;
  color: #e688d4;
}

- USING ELEMENT REF TO CHANGE BACKGROUND COLOR

This is the first way we will use to change the background color for Component 2. Once the user clicks the button in the component 1 the component 2 loads with different body background. Let's use ElementRef to achieve this. In two.component.ts lets import ElementRef:
import { ElementRef } from '@angular/core';

Than let's inject it in the constructor:
constructor(private elementRef: ElementRef){}

Now let's use the element ref to change background color on component initialization:
ngOnInit() { this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor ='#EFB2E2'; }

And finally let's change the background color back to the default one when the component is being destroyed:
ngOnDestroy() { this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = '#F8FFCC'; }
Don't forget to import onDestroy:
import { OnDestroy } from '@angular/core';

We could also use ElementRef to add a class to body element and set different color in the global styles using the body.classWeAdded selector.

- USING DOCUMENT TO CHANGE BACKGROUND COLOR

Let's use DOCUMENT form angular/common to change the background color of the body tag on component initialization.
Once the user clicks the button 'component three' the component 3 loads and the background color is changed. First step is to import DOCUMENT:
import { DOCUMENT } from '@angular/common';
Than we need to inject it into the component constructor:
constructor(@Inject(DOCUMENT) private _doc: any) {}
And use it on component initialization to change the color:

ngOnInit() {
    this._doc.body.style.background = '#F1FF99';
  }

And on component destroy to set the color back to the initial color:

  ngOnDestroy() {
    this._doc.body.style.background = '#F8FFCC';
  }

- USING CSS :HOST-CONTEXT()

We can also use css :host-context() function to achieve the same result. In this case we do not need to import anything into the component we just need to declare the class to the body element in the index.html and target that class through the functon. This is done in the component 4 css file by adding:

:host-context(body.componentFourColor) {
  background-color: #ea9adb !important;
  display: block;
  height: 100vh;
}

It is very important to use the height of 100vh and display property to block here because otherwise it overrides the body color by applying it only to the height of the component it self.

Adding routes

Our application can not work without routes and we will add them now by making routes.ts file in app folder and pasting this code in it:

import { Routes } from '@angular/router';
import { FourComponent } from './four/four.component';
import { OneComponent } from './one/one.component';
import { ThreeComponent } from './three/three.component';
import { TwoComponent } from './two/two.component';

const routeConfig: Routes = [
  {
    path: '',
    component: OneComponent,
    title: 'Component One',
  },
  {
    path: 'two',
    component: TwoComponent,
    title: 'Component Two',
  },
  {
    path: 'three',
    component: ThreeComponent,
    title: 'Component three',
  },
  {
    path: 'four',
    component: FourComponent,
    title: 'Component four',
  },
];

export default routeConfig;

We also need to import RouterModule into every component so we can use routerLink:
import { RouterModule } from '@angular/router';

This is it. Our application can now be served and every component will have a different color.
Another option for us would be to check the active route and according to that change the background color of the body tag. I am yet to try this approach.

If you need to see the results you can check out the StackBlitz project for this tutorial:

I hope you can find this helpful :)