Category: FrontEnd

Accessibility in Angular example

Accessibility in Angular example

Here’s an example of how to implement accessibility in an Angular application:

1. Use appropriate ARIA roles and attributes: Use ARIA roles and attributes to provide additional information to assistive technologies. For example, use the role=”button” attribute on a button element, and the aria-label attribute to provide a text description of the button’s purpose

2. Provide alternative text for images: Use the alt attribute to provide alternative text for images. This text is read by assistive technologies to describe the image to users who are visually impaired.

Company Logo

3. Use semantic elements: Use semantic elements such as

,

Angular Property binding best practices example code

Angular Property binding best practices example code

Here are some best practices for using property binding in Angular:

1. Use the [property] syntax for property binding: Instead of using the bind-property syntax, use the [property] syntax for property binding. This makes the binding more readable and consistent with other Angular syntax.

2. Use ngIf and ngFor directives to conditionally render elements: Instead of using property binding to conditionally show or hide elements, use the ngIf and ngFor directives. These directives are specifically designed for this purpose and can improve the performance of the application.



Error: {{errorMessage}}




Error: {{errorMessage}}

3. Use one-way binding for read-only properties: Use one-way binding ([property]) for read-only properties and two-way binding ([(ngModel)]) for properties that need to be updated from the template.

4. Use the async pipe for observables: Instead of manually subscribing to observables in the component and updating the view, use the async pipe. The async pipe subscribes to an observable and updates the view automatically.




  {{user.name}}






  {{user.name}}

5. Use property binding with care: Property binding can be useful, but it can also make the code less readable, harder to debug and cause performance issues.

It’s worth noting that using property binding excessively can lead to tight coupling between the component and the template, which can make it harder to test and maintain the component.

It’s recommended to use property binding judiciously and use other Angular features such as directives, services, and the component lifecycle hooks to manage the component’s state and behavior.

Angular Avoid side effects example code

Here’s an example of how to avoid side effects in an Angular component:

1. Isolate component logic: Instead of directly manipulating the DOM or other components, use the component’s input and output properties to communicate with other parts of the application. This makes the component more isolated and easier to test.

// Good
@Input() user: User;

// Bad
@ViewChild('usernameInput') input: ElementRef;

2. Avoid changing input properties: Input properties should be treated as immutable. Avoid changing the values of input properties within the component. This can cause unexpected behavior and make the component harder to reason about.

// Good
sortUsers(users: User[]) {
  return users.sort((a, b) => a.name.localeCompare(b.name));
}

// Bad
@Input() users: User[];

sortUsers() {
  this.users.sort((a, b) => a.name.localeCompare(b.name));
}

3. Avoid subscriptions in the constructor: It’s a best practice to avoid subscribing to observables in the constructor. Instead, use the ngOnInit lifecycle hook and make sure to unsubscribe in the ngOnDestroy lifecycle hook.

// Good
export class ExampleComponent implements OnInit, OnDestroy {

Angular Return the proper type example code

Here’s an example of how to return the proper type in an Angular service:

1. Use a strongly-typed return type: Use a strongly-typed return type for the service’s methods to ensure that the correct type is returned.

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

@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private http: HttpClient) {}

  getUser(): Observable {
    return this.http.get('/api/user');
  }
}

In this example, the getUser method has a return type of Observable, which ensures that the method returns an observable of the User type.

2. Use Typescript’s type inference: If the return type can be inferred from the implementation, Typescript will automatically infer the return type and you don’t have to explicitly specify it.

@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private http: HttpClient) {}

  getUser() {
    return this.http.get('/api/user');
  }
}

In this case, the return type of getUser method is Observable inferred by the type of the http.get request

3. Use the as keyword: If you want to cast the return value to a specific type, use the as keyword.

@Injectable({
  provided

Angular Property binding best practices – Passing in a string example

Here’s an example of how to use property binding best practices when passing in a string:

1. Use one-way binding for read-only properties: When passing in a string as a property value, use one-way binding ([property]) if the value is read-only.

2. Use string literals instead of variables: When passing in a string as a property value, it’s best to use string literals instead of variables. This makes the binding more readable and eliminates the need for unnecessary component state.

3. Avoid complex expressions or function calls: When passing in a string as a property value, avoid using complex expressions or function calls. This can make the binding less readable and harder to debug.

4. Use property binding with care: Property binding can be useful, but it can also make the code less readable, harder to debug and cause performance issues. Therefore, it’s recommended to use property binding judiciously, and use other Angular features such as directives, services, and the component lifecycle hooks to manage the component’s state and behavior.

Angular Property binding best practices – Passing in an object example code

Here’s an example of how to use property binding best practices when passing in an object:

1. Use one-way binding for read-only properties: When passing in an object as a property value, use one-way binding ([property]) if the value is read-only.

2. Use object literals instead of variables: When passing in an object as a property value, it’s best to use object literals instead of variables. This makes the binding more readable and eliminates the need for unnecessary component state.

3. Avoid complex expressions or function calls: When passing in an object as a property value, avoid using complex expressions or function calls. This can make the binding less readable and harder to debug.

4. Use property binding with care: Property binding can be useful, but it can also make the code less readable, harder to debug and cause performance issues. Therefore, it’s recommended to use property binding judiciously, and use other Angular features such as directives, services, and the component lifecycle hooks to manage the component’s state and behavior.
By following these best practices, you can ensure that your component’s property bindings are clear, predictable, and easy to maintain.

It’s also worth noting that, when passing complex objects as properties, it’s important to ensure that the objects are immutable, to avoid unexpected behavior and make the component easier to reason about.

Angular Optimizing client application size with lightweight injection tokens

Angular Optimizing client application size with lightweight injection tokens

In Angular, injection tokens are used to provide dependencies to components and services. These tokens can be used to configure the application with different values at runtime. By default, Angular uses Type as the token for a dependency, which can lead to a large bundle size if there are many different types of dependencies in the application.

One way to optimize the bundle size of an Angular application is to use lightweight injection tokens instead of Type for dependencies. Lightweight injection tokens are a way to reduce the size of the application by replacing the Type token with a smaller token.

Here’s an example of how to create a lightweight injection token for a dependency:

import { InjectionToken } from '@angular/core';

export const LIGHTWEIGHT_TOKEN = new InjectionToken('lightweight_token');

Once you’ve created the lightweight injection token, you can use it to provide the dependency in the @Inject decorator:

import { Component, Inject } from '@angular/core';
import { LIGHTWEIGHT_TOKEN } from './lightweight-token';

@Component({
  selector: 'app-example',
  template: `{{value}}`,
})
export class ExampleComponent {
  constructor(@Inject(LIGHTWEIGHT_TOKEN) public value: string) {}
}

You can also use the lightweight injection token to provide the dependency in the module’s providers array:

import { NgModule } from '@angular/core';
import { LIGHTWEIGHT_TOKEN } from './lightweight-token';

@NgModule({
  providers: [{ provide: LIGHTWEIGHT_TOKEN, useValue: 'lightweight' }],
})
export class AppModule {}

It’s worth mentioning that by using lightweight injection tokens, the token’s name is not included in the final bundle, which can significantly reduce the size of your application. Additionally, it’s also recommended to use the useValue or useExisting instead of useClass or useFactory when providing the dependency in the providers array, which will further reduce the size of your application.

Angular When tokens are retained

In Angular, when a token is retained, it means that the token is not released when it is no longer needed. This can lead to a memory leak, as the token continues to occupy memory even though it is no longer in use.

There are several situations in which tokens can be retained in an Angular application:

Singleton services: When a service is provided as a singleton, it means that the same instance is used throughout the application. If the service holds a reference to a token, the token will be retained until the service is destroyed.

Retained tokens in component constructors: If a component constructor holds a reference to a token, the token will be retained until the component is destroyed.

Retained tokens in observables: If an observable holds a reference to a token, the token will be retained until the observable is unsubscribed.

Retained tokens in subscriptions: If a subscription holds a reference to a token, the token will be retained until the subscription is unsubscribed.

To prevent tokens from being retained, it’s important to ensure that references to tokens are released when they are no longer needed. This can be done by unsubscribing from observables, unsubscribing from subscriptions, and properly destroying components and services.

It’s worth mentioning that Angular’s change detection mechanism can help with preventing retained tokens as well, as it allows the framework to automatically unsubscribe and destroy components that are no longer needed. Additionally, using Angular’s dependency injection mechanism to provide services and tokens can also help to prevent retained tokens.

When to use the lightweight injection token pattern example code

The lightweight injection token pattern is a technique that can be used to reduce the size of an Angular application by replacing the Type token with a smaller token. This pattern can be useful in several scenarios:

1. Large number of dependencies: If your application has a large number of dependencies, using lightweight injection tokens can help to reduce the size of the application by replacing the Type token with a smaller token for each dependency.

2. Large number of components: If your application has a large number of components, each component may have a reference to the Type token for its dependencies, which can lead to a large bundle size. Using lightweight injection tokens can help to reduce the size of the bundle by replacing the Type token with a smaller token for each component.

3. Third-party libraries: If your application uses third-party libraries, they may have a large number of dependencies and components. Using lightweight injection tokens can help to reduce the size of the application by replacing the Type token with a smaller token for each dependency and component in the third-party library.

4. Large applications : In general, for large applications, using lightweight injection tokens can help to reduce the bundle size and improve the application’s performance.

Here’s an example of how to use the lightweight injection token pattern in an Angular application:

import { InjectionToken } from '@angular/core';

export const LIGHTWEIGHT_TOKEN = new InjectionToken('lightweight_token');

@Injectable({
  providedIn: 'root',
  useValue: 'lightweight'
})
export class Service {
  constructor(@Inject(LIGHTWEIGHT_TOKEN) public value: string) {}
}

Angular Using lightweight injection tokens example code

Yes, here is an example of how to use lightweight injection tokens in an Angular application:

1. Create a new injection token for a dependency:

import { InjectionToken } from '@angular/core';

export const LIGHTWEIGHT_TOKEN = new InjectionToken('lightweight_token');

This creates an injection token with the name “lightweight_token” that can be used to provide the dependency.

2. Use the injection token to provide the dependency in a service:

import { Injectable, Inject } from '@angular/core';
import { LIGHTWEIGHT_TOKEN } from './lightweight-token';

@Injectable({
  providedIn: 'root',
  useValue: 'lightweight'
})
export class Service {
  constructor(@Inject(LIGHTWEIGHT_TOKEN) public value: string) {}
}

This service uses the LIGHTWEIGHT_TOKEN to inject the value of ‘lightweight’ into the service.

3. Use the service in a component

import { Component } from '@angular/core';
import { Service } from './service';

@Component({
  selector: 'app-example',
  template: `{{value}}`,
})

How to use Angular Use the lightweight injection token for API definition example

An example of using a lightweight injection token for an API definition in an Angular application might look like this:

1. Create a new injection token for the API definition:

import { InjectionToken } from '@angular/core';

export const API_URL = new InjectionToken('api_url');

This creates an injection token with the name “api_url” that can be used to provide the API definition.

2. Use the injection token to provide the API definition in the app.module.ts file:

import { NgModule, InjectionToken } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { API_URL } from './api-token';

@NgModule({
  imports: [
    HttpClientModule
  ],
  providers: [
    { provide: API_URL, useValue: 'https://api.example.com' }
  ]
})
export class AppModule { }

This configures the application to use the value “https://api.example.com” for the API_URL token.

3. Use the API_URL token in a service to make HTTP requests:

import { Injectable, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { API_URL } from './api-token';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private http: HttpClient, @Inject(API_URL) private apiUrl: string) {}

  getData() {
    return this.http.get(`${this.apiUrl}/data`);
  }
}

In this example, the ApiService uses the API_URL token to construct the URL for making HTTP requests to the API.

This way, you can use the same injection token in any other service or component to make requests to the API, and you can change the URL of the API in a single place, which makes it easier to manage the application.

Angular Lazy-loading feature modules

What is Angular Lazy-loading feature modules?

Lazy-loading is a technique in Angular that allows the application to load feature modules only when they are needed, rather than loading all of the modules at the start of the application. This can improve the initial load time and performance of the application, as well as reduce the amount of memory used.

In Angular, lazy-loading is achieved by using the loadChildren property in the @NgModule decorator of the routing module. The loadChildren property is used to specify the location of the module that should be loaded lazily.

For example, if you have a feature module called ProductModule that should be loaded lazily, you would update your routing module as follows:

const routes: Routes = [
  { path: 'products', loadChildren: () => import('./product/product.module').then(m => m.ProductModule) }
];

This tells the router to load the ProductModule when the user navigates to the /products route.

It’s worth mentioning that lazy-loading feature modules can improve the performance of your application by reducing the initial bundle size and loading the necessary modules based on the user interactions.

How to step by step setup Angular Lazy-loading feature modules?

Here are the general steps to set up lazy-loading of feature modules in an Angular application:

1. Create a new feature module: Use the Angular CLI to create a new feature module using the ng generate module command. For example, to create a module called ProductModule, you would run ng generate module product.

2. Create routes for the feature module: In the new feature module, create a new routing module using the ng generate module command. For example, ng generate module product –routing. This will create a new product-routing.module.ts file in the product module folder.

3. Define the lazy-loaded routes: In the newly created routing module, import the RouterModule and Routes from @angular/router. Then define the routes for the feature module using the Routes type. For example:

const routes: Routes = [
  { path: '', component: ProductListComponent },
  { path: ':id', component: ProductDetailComponent },
];

4. Update the app-routing module: In the app-routing module, import the new feature module’s routing module and add it to the imports array. Use the loadChildren property to specify the location of the module that should be loaded lazily.

const routes: Routes = [
  { path: 'products', loadChildren: () => import('./product/product.module').then(m => m.ProductModule) }
];

5. Use the feature module: Once you’ve set up the lazy-loaded routes, you can use the components from the feature module in the app.component.html file or any other component.

6. Run the application: Once you’ve completed these steps, you should be able to run your application and see that the feature module is only loaded when the user navigates to the corresponding route.

It’s worth mentioning that this is a simple example, you can customize the routes based on your application requirements and keep in mind that the loadChildren property can accept a string or a function that returns a string or a promise that resolves to a string.

Angular forRoot() and forChild()

In Angular, the forRoot() and forChild() methods are used when configuring a module’s routing. These methods are used to set up the router service with the routes for a module.

forRoot() is used when configuring the routes for the root module of the application. It is typically used in the app.module.ts file and is used to set up the router service with the routes for the entire application. The forRoot() method takes an object that contains the routes for the application and returns a module with the router service configured with those routes.

forChild() is used when configuring the routes for a feature module. It is typically used in the feature module’s routing module and is used to set up the router service with the routes for that specific feature module. The forChild() method takes an object that contains the routes for the feature module and returns a module with the router service configured with those routes.

Here’s an example of how to use forRoot() and forChild() in an Angular application:

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'products', loadChildren: './product/product.module#ProductModule' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

// product-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', component: ProductListComponent },
  { path: ':id', component: ProductDetailComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ProductRoutingModule { }

In this example, forRoot() method is used to configure the router service with the routes for the entire application in the app-routing.module.ts file, while forChild() method is used to configure the router service with the routes for the ProductModule in the product-routing.module.ts file.

What is Angular Preloading?

In Angular, preloading is a technique that allows the application to load certain feature modules in the background while the user is interacting with the application. This can improve the overall performance of the application by reducing the time it takes for the feature modules to load when the user navigates to them.

Angular provides a preloading strategy called PreloadAllModules that preloads all feature modules as soon as the application starts. This strategy loads all feature modules in parallel with the application, which can improve the application’s start-up time.

To enable preloading in an Angular application, you need to import the RouterModule and call the forRoot() method with the PreloadAllModules strategy. Here’s an example of how to enable preloading in the app-routing.module.ts file:

import { NgModule } from '@angular/core';
import { RouterModule, Routes, PreloadAllModules } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'products', loadChildren: './product/product.module#ProductModule' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Angular Troubleshooting lazy-loading modules

Lazy-loading feature modules in Angular can be a powerful technique for improving the performance of your application, but it can also cause some issues if not implemented correctly. Here are some common issues that you might encounter when lazy-loading feature modules and how to troubleshoot them:

1. 404 error when navigating to a lazy-loaded route: This issue can occur if the path specified in the loadChildren property is incorrect. Make sure that the path to the module is correct and that the module is being exported correctly.

2. Error: Unexpected value ‘undefined’ imported by the module: This issue can occur if the module being imported is not being exported correctly. Make sure that the module is being exported in the correct way.

3. Error: Can’t resolve all parameters for X: (?): This issue can occur if the components or services in the lazy-loaded module have dependencies that are not being provided. Make sure that all dependencies are being provided correctly.

4. Error: No provider for X: This issue can occur if the services provided in the root module are not being propagated to the lazy-loaded modules. Make sure that the services are being provided correctly and that they are being imported correctly in the lazy-loaded module.

5. Error: Template parse errors: This issue can occur if the components in the lazy-loaded module are not being recognized by the Angular compiler. Make sure that the components are being imported correctly in the lazy-loaded module and that they are being declared in the declarations array of the @NgModule decorator.

If you run into any of these issues, it’s recommended to check the path of the module, the imports/exports, dependencies, services provided and the components declared in the modules. Also, it’s recommended to check the browser’s developer console for any errors that might give you more details about the issue.

Vuejs Firebase Realtime Database example code

What is Firebase Realtime Database?

Firebase Realtime Database is a cloud-hosted NoSQL database that stores data as JSON and synchronizes it in realtime to all connected clients. It allows you to build realtime, collaborative applications without the need to set up your own server infrastructure.

Some key features of the Firebase Realtime Database include:

1. Data is stored as JSON and synced in realtime across all connected clients.
2. The database is designed to scale automatically with your users and workload.
3. It offers offline support, so your app can continue to work even when the device is offline or has a poor connection.
4. It provides realtime event listeners that can be used to trigger changes in your app when data is updated in the database.
5. It has robust security rules that can be used to control access to data in the database.
6. You can use the Firebase Realtime Database in a variety of applications, such as chat applications, realtime collaboration tools, and multiplayer games. It is available as a standalone product, or as part of the Firebase platform, which also includes other services such as storage, authentication, and analytics.

Use-case when using Firebase Realtime Database

There are many use cases for the Firebase Realtime Database, including:

1. Building realtime chat or messaging applications: You can use the Realtime Database to store and synchronize messages in realtime, so that all connected clients can see new messages as they are added.

2. Building realtime collaboration tools: You can use the Realtime Database to store shared data that multiple users can access and edit in realtime, such as a shared to-do list or a collaborative document editor.

3. Building multiplayer games: You can use the Realtime Database to store game state and synchronize it in realtime between players, so that all players can see each other’s actions as they happen.

4. Building realtime dashboards or monitoring tools: You can use the Realtime Database to store and display live data, such as stock prices or sensor readings, so that users can see updates in realtime.

5. Building IoT applications: You can use the Realtime Database to store and synchronize data from connected devices, such as smart thermostats or security cameras, so that users can access and control their devices in realtime.

Vuejs Firebase Realtime Database example code

To use the Firebase Realtime Database with Vue.js, you will need to do the following:

1. Install the Firebase JavaScript library by running the following command:

npm install firebase --save

2. In your Vue.js application, import the Firebase library and initialize it with your Firebase project’s configuration. You can find your project’s configuration in the Firebase console.

import * as firebase from 'firebase/app';
import 'firebase/database';

const firebaseConfig = {
  // Your Firebase configuration goes here
};

firebase.initializeApp(firebaseConfig);

3. To read and write data to the Realtime Database, you can use the firebase.database() function to get a reference to the database, and then use the ref() method to get a reference to a specific location in the database.
For example, to write a value to the /messages location in the database, you can do the following:

const messagesRef = firebase.database().ref('messages');
messagesRef.push({
  text: 'Hello, world!'
});

To read data from the database, you can use the on() method to attach a listener to a specific location in the database. The listener will be called with the data at that location whenever the data changes.

For example, to read all messages from the /messages location in the database, you can do the following:

const messagesRef = firebase.database().ref('messages');
messagesRef.on('value', (snapshot) => {
  console.log(snapshot.val());
});

Add data to Firebase Realtime Database

To add data to the Firebase Realtime Database, you can use the set() method to write data to a specific location in the database. The set() method will overwrite any existing data at that location.

Here’s an example of how you can use the set() method to add data to the Firebase Realtime Database:

import * as firebase from 'firebase/app';
import 'firebase/database';

// Initialize Firebase
const firebaseConfig = {
  // Your Firebase configuration goes here
};

firebase.initializeApp(firebaseConfig);

// Get a reference to the database
const database = firebase.database();

// Add data to the database
database.ref('users/123').set({
  name: 'John Doe',
  age: 30
});

This code will add a new object with the name “John Doe” and the age 30 to the /users/123 location in the database.

You can also use the update() method to update specific fields in an existing object, without overwriting the entire object. For example:

database.ref('users/123').update({
  name: 'Jane Doe'
});

This code will update the name field of the /users/123 object to “Jane Doe”, while leaving the other fields unchanged.

Read data from firebase

To read data from the Firebase Realtime Database, you can use the on() method to attach a listener to a specific location in the database. The listener will be called with the data at that location whenever the data changes.

Here’s an example of how you can use the on() method to read data from the Firebase Realtime Database:

import * as firebase from 'firebase/app';
import 'firebase/database';

// Initialize Firebase
const firebaseConfig = {
  // Your Firebase configuration goes here
};

firebase.initializeApp(firebaseConfig);

// Get a reference to the database
const database = firebase.database();

// Read data from the database
database.ref('users').on('value', (snapshot) => {
  console.log(snapshot.val());
});

This code will attach a listener to the /users location in the database, and will log the data at that location to the console whenever it changes. The snapshot object passed to the listener contains the data at the specified location, as well as metadata about the data, such as the timestamp of the last update.

You can also use the once() method to read data from the database once, without attaching a listener. For example:

database.ref('users').once('value').then((snapshot) => {
  console.log(snapshot.val());
});

This code will read the data at the /users location once, and will log the data to the console. The once() method returns a promise, which you can use to perform additional actions after the data has been read.

Update data Firebase Realtime database

To update data in the Firebase Realtime Database, you can use the update() method to modify specific fields in an existing object, without overwriting the entire object.

Here’s an example of how you can use the update() method to update data in the Firebase Realtime Database:

import * as firebase from 'firebase/app';
import 'firebase/database';

// Initialize Firebase
const firebaseConfig = {
  // Your Firebase configuration goes here
};

firebase.initializeApp(firebaseConfig);

// Get a reference to the database
const database = firebase.database();

// Update data in the database
database.ref('users/123').update({
  name: 'Jane Doe',
  age: 35
});

This code will update the name and age fields of the /users/123 object in the database. Other fields in the object will be left unchanged.

You can also use the set() method to overwrite an entire object in the database. For example:

database.ref('users/123').set({
  name: 'Jane Doe',
  age: 35,
  email: 'jane@example.com'
});

This code will overwrite the entire /users/123 object with a new object containing the name, age, and email fields.

Get data from firebase

To get data from the Firebase Realtime Database, you can use the once() method to read data from a specific location in the database. The once() method returns a promise that resolves with a snapshot of the data at the specified location.

Here’s an example of how you can use the once() method to get data from the Firebase Realtime Database:

import * as firebase from 'firebase/app';
import 'firebase/database';

// Initialize Firebase
const firebaseConfig = {
  // Your Firebase configuration goes here
};

firebase.initializeApp(firebaseConfig);

// Get a reference to the database
const database = firebase.database();

// Get data from the database
database.ref('users/123').once('value').then((snapshot) => {
  console.log(snapshot.val());
});

This code will get the data at the /users/123 location in the database, and will log the data to the console. The snapshot object passed to the then() callback contains the data at the specified location, as well as metadata about the data, such as the timestamp of the last update.

You can also use the on() method to attach a listener to a specific location in the database, which will be called with the data at that location whenever the data changes.

database.ref('users/123').on('value', (snapshot) => {
  console.log(snapshot.val());
});

This code will attach a listener to the /users/123 location in the database, and will log the data at that location to the console whenever it changes.