Ex 10
Angular with MongoDB integration
Ref : https://www.freakyjolly.com/angular-12-how-to-load-json-data-from-assets-folder/
Step 1
Create a new app by
ng new json-demo
cd json-demo
code . to open Visual Studio Code Editor
open app.component.ts file
add
import EmployeesJson from '../assets/employee.json';
and modify AppComponent class by
interface EMPLOYEE {
ids: number;
name: string;
}
export class AppComponent {
title = 'Demo for angular-json interaction';
Employees: EMPLOYEE[] = EmployeesJson;
constructor(){
console.log(this.Employees);
}
Step 2
Create JSON File: employees.json in assets Folder
Step 3
In app folder, create a file name as json-typings.d.ts + add the following contents and save.
declare module "*.json" {
const value: any;
export default value;
}
Step 4
Modify file: app.component.html in app folder as below:
Step 5
Modify file: app.component.html in app folder as below:
Step 6:<div class="container mt-5"><h1>{{title}}</h1><div><table class="table"><thead><tr><th>Ids</th><th>Name</th></tr></thead><br><tbody><tr *ngFor="let employee of Employees"><th scope="row">{{ employee.ids }}</th><td style="color: #ff00ff">{{ employee.name }}</td></tr></tbody></table></div>
Install bootstrap by this command in New Terminal of VS code Editor
npm install bootstrap --save
After bootstrap installation: Open angular.json file.
update "styles.css" file at app root with
body {background-color: coral;}
In terminal type:
ng serve -o
Check the browser window will appear similar to this:
Happy ☺☺☺☺Angular App Development!!!
