DEV Community: Omama Aslam

What is the difference between slice() and splice() javascript array methods and how to use them

Omama Aslam — Sun, 21 Jan 2024 08:23:21 +0000

In this article, I will walk you through how to use the slice() and splice() array methods using code examples.

How to use the slice() JavaScript array method

The slice() method can be used to create a copy of an array or return a portion of an array. It is important to note that the slice() method does not alter the original array but instead creates a shallow copy.
Here is the basic syntax:

slice(optional start parameter, optional end parameter)

Let's take a look at some examples to better understand how the slice() method works.

How to use the slice() JavaScript method without the start and end parameters

In this first example, I have created a list of cities from around the world.

const cities =["Lahore","Islamabad","Karachi","Multan","Peshwar", "Quetta"];

I can use the slice() method to create a shallow copy of that array.

cities.slice()
When I console.log the result, then I will see all of the elements from my cities array copied into this new array. Just like :- ["Lahore","Islamabad","Karachi","Multan","Peshwar", "Quetta"]

How to use the slice() JavaScript method using the start parameter

You can use the optional start parameter to set a starting position for selecting elements from the array. It is important to remember that arrays are zero based indexed. In this example, we will set the start position at index 2 which will select the last three cities in the array and return them in a new array.

const newCityArr = cities.slice(2); console.log(newCityArr)

Here is the result :- ["Karachi","Multan","Peshwar", "Quetta"]
The original array was not modified as we can see here in the above example.

How to use the splice() JavaScript array method

Unlike the slice() method, the splice() method will change the contents of the original array. The splice() method is used to add or remove elements of an existing array and the return value will be the removed items from the array.
If nothing was removed from the array, then the return value will just be an empty array. Here is the basic syntax.
splice(start, optional delete count, optional items to add)

In this example, we have an array of food items.
const food = ['pizza', 'cake', 'salad', 'cookie'];
If we wanted to add another food item to the array at index 1, then we can use the following code:

food.splice(1,0,"burrito")

The first number is the starting index, and the second number is the delete count. Since we are not deleting any items, our delete count is zero.

This is what the result would look like in the console.

`const food = ['pizza', 'cake', 'salad', 'cookie'];

food.splice(1,0,"burrito")

console.log(food)`

and result will be: ['pizza', 'burrito', 'cake', 'salad', 'cookie']

Conclusion

The slice and splice array methods might seem similar to each other, but there are a few key differences.

If nothing was removed from the array, then the return value will just be an empty array.

I hope you enjoyed this JavaScript article and best of luck on your developer journey. Also don't forget to share will your friends and do also comment if you find this blog helpful.

Object-Oriented Programming Concepts in Angular (OOP Paradigm)

Omama Aslam — Mon, 01 Jan 2024 06:05:15 +0000

Introduction:

Object-oriented programming (OOP) is a programming paradigm that is widely used in Angular, a popular web development framework. OOP helps to make code more modular, reusable, and easier to maintain. However, implementing OOP principles in Angular can be challenging, especially for developers who are new to the framework. In this blog, we will explore the key OOP concepts in Angular and how they can be used to build better web applications. We will also highlight Omama’s expertise in Angular and how it can help you build scalable and maintainable web applications.

Object-Oriented Programming (OOP) Concepts in Angular:

Encapsulation: Encapsulation is a core principle of OOP, and it is essential for building scalable and maintainable web applications. In Angular, encapsulation refers to the process of binding data and methods to a component, module, or service, and preventing them from being accessed from outside the module. Encapsulation helps to prevent data corruption and ensures that code is modular and reusable.
Abstraction: Abstraction is another key OOP principle that is important in Angular. Abstraction refers to the process of hiding the implementation details of a module, component, or service and exposing only the necessary information to the user. Abstraction helps to simplify complex systems and makes them easier to use.
Inheritance: Inheritance is a powerful OOP concept that is used in Angular to create hierarchies of components, services, and modules. Inheritance allows developers to reuse code and build more complex systems by inheriting properties and methods from a parent class. In Angular, inheritance is used to build components, services, and modules that share common functionality.
Polymorphism: Polymorphism is another essential OOP concept that is used in Angular to create dynamic, flexible systems. Polymorphism refers to the ability of an object to take on multiple forms, depending on the context. In Angular, polymorphism is used to create components, services, and modules that can be used in different contexts and with different data types.

Encapsulation in Angular: In Angular, encapsulation is achieved through the use of access modifiers, such as public, private, and protected. By default, all properties and methods of a component, module, or service in Angular are public, which means they can be accessed from outside the module. However, by using the private or protected access modifier, developers can limit the accessibility of properties and methods to within the module only. This helps to prevent data corruption and ensures that the code is modular and reusable.

Abstraction in Angular: Abstraction in Angular is achieved through the use of interfaces and abstract classes. An interface is a contract that specifies the properties and methods that a class must implement. By using an interface, developers can ensure that the class implements the required functionality and can be used interchangeably with other classes that implement the same interface. An abstract class, on the other hand, is a class that cannot be instantiated and can only be used as a base class for other classes. Abstract classes can contain abstract methods, which are methods that do not have an implementation and must be implemented by the derived class.

Inheritance in Angular: Inheritance in Angular is achieved through the use of the extends keyword. By using the extends keyword, developers can create a hierarchy of components, services, and modules, where a child class inherits properties and methods from its parent class. Inheritance helps to reduce code duplication and allows developers to reuse code and build more complex systems.

Polymorphism in Angular: Polymorphism in Angular is achieved through the use of interfaces and abstract classes. By using interfaces, developers can create components, services, and modules that can be used in different contexts and with different data types. For example, a component that implements an interface can be used interchangeably with other components that implement the same interface. Similarly, abstract classes can be used as a base class for other classes, allowing developers to create components, services, and modules that share common functionality.

What is Interceptor in Angular and how to use Interceptor in Angular

Omama Aslam — Mon, 06 Nov 2023 07:04:52 +0000

*In this artical we are going to learn : *

What is an Angular HTTP Interceptor
How to Create HTTP Interceptor
10 Ways to Use Interceptors in Angular

An application is incomplete without the backend server that displays data on UI. Various backend servers are available on the internet. Most application uses JSON and XML servers to perform their tasks. The API is used for the backend communication between components and methods. This communication is based on two significant concepts: authorization and authentication.

Interceptors are another significant part of Angular programming. They are used to modify the HTTP requests by adding several functionalities.

Authentication determines the security level of an application. The authentication check is placed on the user’s identity to make a good connection.

In contrast to this, authorization is a concept used to determine a user's authority.

Interceptor in angular is a great way to modify your code and make it more readable. Also, they are used in various other fields, which we will discuss later.

What is an Angular HTTP Interceptor

The angular interceptor is a medium connecting the backend and front-end applications. Whenever a request is made, the interceptors handle it in between. They can also identify the response by performing Rxjs operators. The interceptor is used to perform various functions and methods to perform specific tasks.

How to Create HTTP Interceptor

Before implementing an angular interceptor, you must create one. So, here we will help you create a service that will implement the HTTP interceptor angular interface. Here are the code snippets and examples to create an interceptor of your own.

First, create an injectable service.

@Injectable() export class AppHttpInterceptor implements HttpInterceptor {

Now, implement the intercept method within the above class.

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// do whatever you want to do with this request
return next.handle(req);

Then add the class within the root module. Use the token named HTTP_INTERCEPTOR.

providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: AppHttpInterceptor,
multi: true
}
]

10 Ways to Use Interceptors in Angular

There are various ways to use the angular HTTP interceptor. We have selected the top 10 most straightforward ways to use the angular HTTP interceptor. We will study them with relevant codes and examples.

Loaders

Interceptors can be used as loaders whenever there exist different active requests. A loader function with both, hide and show features is used to handle the requests.

Changing the URLs is what the interceptor angular is capable of. You can change the URL, and the interceptor will behave like an API interceptor used to add prefixes.

Headers

Angular interceptors manipulate the headers as they provide features such as authentication and authorization. The angular HTTP interceptors are used to protect the application against XSRF.

Converting

Interceptor can even convert the format of an API that we receive. A more likely example is to convert the XML file to a JSON file.

Errors

Interceptors are used in two ways to detect the errors- retry the HTTP call, and the second one is to keep a check on the status of the exception that occurred.

There are various HTTP error codes such as error codes 400, 500, and 200 and their series, which are to be handled individually. The error code 500 determines that the API has not received the request. The error code 401 means that the access token is no longer active.

Notifications

Interceptors can even show various messages as notifications. In the below example, we have printed an “object created” message on the console. The notifications can also be displayed whenever we detect an error.

return next.handle(req).pipe(
tap((event: HttpEvent<any>) =>{ 
 if(event instanceof HttpResponse && event.status === 200) {
  this.toastr.success("Object Created");
}
})
)

Fake backend

As the name suggests, the fake backend is used to develop the application when the backend doesn’t exist. The response is based on the request, after which we return an observable object of the HTTP request. The code snippet is attached below-

const body = { 
 FirstName: "Omama",
 LastName: "Aslam"
};

return of(new HttpResponse({ status: 200, body: body}));

Profiling

Interceptors have the ability to both requests and respond simultaneously. They can even log the HTTP operation without any time delay. So, it becomes easy to note the time of both the request and the response and can be consoled together.

Different profiles can be logged into the database to get the information.

const started = Date.now();
let ok: string;

return next.handle(req).pipe(
tap(
(event: HttpEvent<any>) = ok = event instanceof HttpResponse ? 'successed' : '', 
(error: HttpErrorResponse) => ok: 'failed'
), 
finalize(()=>{
const elapsed = date.now() - started;
const msg = `${req.method} "${req.urlWithParams}" ${ok} in ${elapsed} ms.`
})
);

Authentication

Authentication is the basic functionality added to any application to check the user’s authentication. This is a common and basic use of the interceptors to make a check-in at the application’s usage. It connects various parameters such as the refresh tokens, adds bearer tokens, and redirects to the login URL.

Catching

Interceptors are capable enough to detect any errors as it handles the requests besides forwarding them to the handle method. We will use a key-value map where the key will be more like a URL. The observable response can be returned directly to the handle function as soon as we find any relevant response on the map.

This is feasible as it saves a lot of time and energy. The developers do not always need to search everything in the backend when they have already caught one.

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { AuthService } from '../weblib/services/auth.service';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
    constructor(private authService: AuthService,
        private router: Router) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request).pipe(catchError(err => {
            if ((err.status === 401 || err.status === 403) && !request.url.includes('unauth')) {
                // auto logout if 401 response returned from api
                this.authService.logout(true);
                //this.router.navigate(['login']);
                location.reload(true);
            }
            // tslint:disable-next-line:max-line-length
            let error = 'Unable to process request at this time. If problem persists please notify your admin.';
            //if (err.error) { error = err.error.message || err.error.error; }
            if (err.error) { error = err.error.exceptionMessage || err.error || err.message; }
            return throwError(`Status: ${err.status} | ${error}`);
        }));
    }
}

Signals in Angular – How to Write More Reactive Code

Omama Aslam — Mon, 23 Oct 2023 06:03:26 +0000

An exciting new feature is coming to Angular: signals! Signals provide a new way for our code to tell our templates (and other code) that our data has changed. This improves Angular's change detection, which also improves performance, and makes our code more reactive.

You can try out this powerful new feature now. Signals are available for developer preview in Angular v16, due to be released in May of 2023. You can get early versions of Angular v16 to try it out now. I'll walk through how later in this tutorial.

Before we jump into the details of the "what?" and "how?", let's start with the "why?". Why would you want to use this new signals feature?

Why Do We Need Signals?

Let's start with a simple example without the use of signals. Say you are writing code to perform some basic math operations.

let x = 5;
let y = 3;
let z = x + y;
console.log(z);

What does this code log to the console? Yep, it logs out 8.

Some time later in the code, we change the value of x. What does z log out now?

let x = 5;
let y = 3;
let z = x + y;
console.log(z);

x = 10;
console.log(z);

It still logs out 8! That's because a value is assigned to z when the expression is first evaluated. The z variable does not react to changes in x or y.

But we want our variables to react to changes!

One of the reasons we use Angular is to build reactive websites, like Figure 1. When the user updates the quantity, the related variables (such as subtotal and tax) should react and adjust the costs. If the user selects to delete an item from the cart, we again want the related variables to react and correctly recalculate the costs.

With signals, our code can be more reactive. Our prior example implemented with signals would look like this:

const x = signal(5);
const y = signal(3);
const z = computed(() => x() + y());
console.log(z()); // 8

x.set(10);
console.log(z()); // 13

We'll look at this syntax in detail shortly. For now, the code above defines two signals: x and y and gives them initial values of 5 and 3. We then define a computed signal, z, which is the sum of x and y. Since signals provide change notifications, when the x or y signals change, any values computed from those signals will automatically recalculate. This code is now reactive! Nice!

Computed signals react and recalculate when any of its dependent signals change. If a signal is bound in a template, when the signal changes, Angular's change detection automatically updates any view that reads the signal. And the user sees the changed value.

So the answer to "why do we need signals?":

Signals provide more reactivity
Using signals gives us finer control over change detection, which can improve performance.

Let's dive a bit deeper into what a signal is and how it is used.

What Is a Signal?

You can think of a signal as a value plus a change notification. A signal is just a special type of variable that holds a value. But unlike other variables, a signal also provides notification when the variable value changes.

Think of a normal variable as a shelf, like on the left side of Figure 2. When a value is assigned to the variable, it sits on that shelf. Any code within scope can simply read that variable on the shelf.

A signal is more like a box, as shown on the right side of Figure 2. Creating a signal metaphorically creates a box and puts the value inside of that box. The box glows when the value of the signal changes. To read the signal, first open the box using parentheses: x(). Technically speaking, we call the signal's getter function to read the signal.

We now have the answer to "what is a signal?":

A signal is a variable + change notification
A signal is reactive, and is called a "reactive primitive"
A signal always has a value
A signal is synchronous
A signal is not a replacement for RxJS and Observables for asynchronous operations, such as http.get

Where can we use signals?

Use them in components to track local component state
Use them in directives
Use them in a service to share state across components
Read them in a template to display signal values
Or use them anywhere else in your code

Next let's walk through how to create and use signals.

How to Create a Signal

To use a signal, you first create one.

quantity = signal<number>(1);

The above syntax creates and initializes a signal using the signal constructor function.

Optionally, provide a generic type parameter to define the signal's data type. A signal can be a string, number, array, object, or any data type. In many cases, the data type can be inferred and the generic type parameter is unnecessary.

Pass to the constructor the default value of the signal. A signal always has a value, starting with that default.

Here are some additional examples:

quantity = signal(1);

qtyAvailable = signal([1, 2, 3, 4, 5, 6]);

selectedVehicle = signal<Vehicle>({ 
  id: 1,
  name: 'AT-AT', 
  price: 19416.13
});

vehicles = signal<Vehicle[]>([]);

The first code line above creates a numeric signal with a default value of 1. Because the default value is a number, the quantity is a signal that holds a number. The generic type parameter isn't needed.

The second line is a signal that holds an array of numbers. The default provides an array of values 1 through 6. Again, the generic type parameter isn't needed in this case because it can be inferred from the default value.

The selectedVehicle signal holds a Vehicle object. In this example, the type cannot be inferred, so we specify a generic type parameter of Vehicle.

The vehicles signal holds an array of Vehicle objects. Its default is an empty array. To strongly type the array, we add a generic type parameter of .

A signal created with the signal constructor function is writable, so you can set it to a new value, update it based on the current value, or mutate its content. We'll see examples of these operations shortly.

Once you've created a signal, you may want to read its value.

How to Read a Signal

Earlier, we represented a signal as a box. Metaphorically speaking, to read a signal's value you must first open the box. You do that by adding parentheses as shown below.

quantity();

Start with the signal name and follow it with open and closing parentheses. Technically speaking, this calls the signal's getter function. The getter function is created behind the scenes – you won't see it in your code.

When working with Angular, a common place to read signals is in the template.

<select
    [ngModel]="quantity()"
    (change)="onQuantitySelected($any($event.target).value)">
  <option *ngFor="let q of qtyAvailable()">{{ q }}</option>
</select>

<div>Vehicle: {{ selectedVehicle().name }}</div>
<div>Price: {{ selectedVehicle().price }}</div>
<div [style.color]="color()">Total: {{ totalPrice() }}</div>

The above template displays a select box for selection of a quantity. The [ngModel] reads the value of the quantity signal, binding to that value.

The change event binding calls the onQuantitySelected() method in the component.

The option element uses ngFor to iterate through each array element in the qtyAvailable signal. It reads the signal and creates a select option for each array element.

Below the select element are three div elements. The first one reads the selectedVehicle signal, then accesses its name property. The second div element reads the selectedVehicle signal, then displays its price property. The last div element reads the totalPrice signal (which we have not yet defined). And it sets the text color to the value from the color signal (which we also have not defined).

It's important to note that reading a signal always reads the current signal value. The code doesn't have any knowledge of any prior signal values.

When the user picks a different quantity from the select element, we want to change the value of the quantity signal. That way the quantity signal becomes the "source of truth" for the user's selected quantity. Let's look at how to do that next.

How to Change the Value of a Signal

The signal set method replaces the value of a signal with a new value. It basically opens the box, removes the current item, and sets in a new item to take its place.

this.quantity.set(qty);

A common scenario is to change the signal value based on a user action. For example:

The user selects a new quantity using the select element
The select element event binding calls the onQuantitySelected() method and passes in the selected quantity
The user action is handled in that event handler within the component
The new value is set into the quantity signal.

Here is an example event handler:

onQuantitySelected(qty: number) {
  this.quantity.set(qty);
}

Whenever the signal is set, the code notifies any consumers that the signal has changed. In this context, a consumer is any code that is interested in receiving change notifications.

How does the consumer indicate that it's interested in receiving notifications about a particular signal?

So the act of reading a signal registers the consumer's interest in watching that signal. The Angular team calls this the golden rule of signal components: "change detection for a component will be scheduled when and only when a signal read in the template notifies Angular that it has changed."

Here is an example to illustrate the process. Let's say that there is some work going on within the method below that needs to adjust the quantity. Maybe if the quantity is 5 or more you get one free, for example. The point is that the quantity signal could change several times within the execution of the method.

onQuantitySelected(qty: number) {
  this.quantity.set(qty);

  this.quantity.set(5);
  this.quantity.set(42);
}

The quantity is displayed in the template using Angular's binding as shown below. Since the binding reads the quantity signal, the template registers its interest in receiving change notifications.

{{ quantity() }}

When the user selects a quantity, the onQuantitySelected() method executes. The code in the method first sets the signal to the user-selected quantity. When the new signal is set, the signal generates a notification. At this point, Angular's change detection is scheduled to run. But it doesn't have an opportunity to run until after the execution of the onQuantitySelected() method.

The onQuantitySelected() method continues, setting the signal to 5. The signal generates another change notification. Again Angular's change detection is reminded that it needs to run, but it still can't run because the onQuantitySelected() method is still executing. The method then sets the signal to 42 and the process repeats.

When the onQuantitySelected() method has completed its execution, Angular's change detection can finally run. The template reads the signal, and gets the current value of that signal, which is 42. The template is not aware of any of the prior signal values. The view is then re-rendered, and the new quantity signal value is displayed.

If you are familiar with RxJS and Observables, signals are quite different. Signals don't emit values like Observables do. And signals don't require a subscription.

In addition to the set(), there are two other ways to change a signal: update() and mutate().

The set() method replaces a signal with a new value, metaphorically replacing the contents of the signal box. Pass the new value into the set method.

// Replace the value
this.quantity.set(qty);

The update() method updates the signal based on its current value. Pass to the update method an arrow function. The arrow function provides the current signal value so you can update it as needed. In the code below, the quantity is doubled.

// Update value based on current value
this.quantity.update(qty => qty * 2);

The mutate() method modifies the content of a signal value, not the signal value itself. Use it with arrays to modify array elements, and objects to modify object properties. In the code below, a vehicle's price is increased by 20%.

this.selectedVehicle.mutate(v => v.price = v.price + (v.price * .20));

How to Define a Computed Signal

Oftentimes we have variables in our code that depend on other variables. For example, the total price for an item is the price for that item times the desired quantity of that item. If the user changes the quantity, we want to change the total price. For that, we use computed signals.

totalPrice = computed(() => this.selectedVehicle().price * this.quantity());

color = computed(() => this.totalPrice() > 50000 ? 'green' : 'blue');

The first line of code above defines a totalPrice computed signal by calling the computed() creation function. The computation function passed into this computed function reads the selectedVehicle and quantity signals. If either signal changes, this computed signal is notified and will update when it is its turn to execute.

The second line of code defines a color computed signal. It sets the color to green or blue depending on the value of the totalPrice signal. The template can bind to this signal to display the appropriate style.

A computed signal is read only. It cannot be modified with set(), update() or mutate().

The value of a computed signal is re-computed when:

1. One or more of its dependent signals is changed.
2. AND the value of the computed signal is read.


## How to Use an Effect
There may be times that you need to run code when a signal changes, and that code has side effects. By side effects I mean code that calls an API or performs another operation not related to the signal. In these cases, you'll use an effect().

For example, you want to debug your signals and log out the signal value each time the code reacts to a change to that signal. Calling console.log() is a side effect.

To define an effect, call the effect() creation function. Pass to the function the operation to perform. This operation is re-executed every time the code reacts to a change in any dependent signal.

effect(() => console.log(this.selectedVehicle()));


The effect() function can be called within other function. Since the effect sets up a handler of sorts, it is often called in the constructor or other startup code.

Alternatively, an effect can be defined declaratively as shown below:

e = effect(() => console.log(this.selectedVehicle()));



An effect should not change the value of any signals. If you need to change a signal based on a change to a dependent signal, use a computed signal instead.


**If you find this post helpful please dont forget to like, and share with your collegues also subscribe so you can get more posts that ehance your knowledge..... Thanks for watching**

A Beginner's Guide to Adding Light/Dark Mode Toggle in Angular Material

Omama Aslam — Tue, 03 Oct 2023 07:33:00 +0000

As the demand for user-friendly web applications continues to rise, implementing a light and dark mode feature has become a popular choice among developers. This feature enhances user experience and accessibility, allowing users to choose a theme that suits their preferences. In this beginner-friendly guide, we'll walk you through the steps to add a light/dark mode toggle button to your Angular application using Angular Material.

Prerequisites

Before we get started, make sure you have the following prerequisites in place:

Node.js and npm: Ensure that Node.js and npm (Node Package Manager) are installed on your system. You can download them from nodejs.org.
Angular CLI: Install the Angular CLI globally by running npm install -g @angular/cli in your terminal.
Angular Project: Create a new Angular project using the Angular CLI. If you don't have one yet, you can create it by running ng new my-angular-app.

Step 1: Install Angular Material

Angular Material is a UI component library that provides pre-built components for Angular applications. To add Angular Material to your project, use the following Angular CLI command:

ng add @angular/material

During the installation process, you'll have the option to select a pre-built theme or create a custom theme. Choose the option that best fits your project's design requirements.

Step 2: Create the Theme Toggle Button Component

Next, create a new Angular component to house the light/dark mode toggle button:

ng generate component theme-toggle

Step 3: Update the Theme Toggle Component

Now, let's add the necessary code to the** theme-toggle.component.html** and theme-toggle.component.ts files to create the toggle button:

theme-toggle.component.html:

<button mat-icon-button (click)="toggleTheme()">
  <mat-icon>{{ isDarkMode ? 'wb_sunny' : 'nights_stay' }}</mat-icon>
</button>

theme-toggle.component.ts:

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

@Component({
  selector: 'app-theme-toggle',
  templateUrl: './theme-toggle.component.html',
  styleUrls: ['./theme-toggle.component.css'],
})
export class ThemeToggleComponent {
  isDarkMode: boolean;

  constructor(private themeService: ThemeService) {
    this.isDarkMode = this.themeService.isDarkMode();
  }

  toggleTheme() {
    this.isDarkMode = !this.isDarkMode;
    this.themeService.setDarkMode(this.isDarkMode);
  }
}

Step 4: Create a Theme Service

To manage the application's theme state, create a service called ThemeService:

ng generate service theme

In the theme.service.ts file, add methods to get and set the theme:

theme.service.ts:

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

@Injectable({
  providedIn: 'root',
})
export class ThemeService {
  private darkMode = false;

  isDarkMode() {
    return this.darkMode;
  }

  setDarkMode(isDarkMode: boolean) {
    this.darkMode = isDarkMode;
    if (isDarkMode) {
      document.body.classList.add('dark-theme');
    } else {
      document.body.classList.remove('dark-theme');
    }
  }
}

Step 5: Define CSS for Dark Theme

In your project's global styles file (usually src/styles.css), define CSS styles for the dark theme. For example:

styles.css:

/* Dark Theme Styles */
.dark-theme {
  background-color: #121212;
  color: #ffffff;
}

Step 6: Use the Theme Toggle Button

In your main application template (app.component.html), include the tag to add the theme toggle button to your app's interface:

app.component.html:

<div class="app-container">
  <app-theme-toggle></app-theme-toggle>
  <!-- Other content of your app -->
</div>

Step 7: Run Your Application

You're all set! To see your light/dark mode toggle button in action, run your Angular application using the following command:

ng serve

Visit http://localhost:4200 in your web browser to interact with your app and switch between light and dark modes using the toggle button.

Congratulations! You've successfully added a light/dark mode toggle button to your Angular application using Angular Material. This feature enhances the user experience and allows users to customize their viewing experience according to their preferences.

Feel free to customize the styles, icons, and themes to match your application's design. Happy coding!

Angular 16 Google Social Login or Sign In Tutorial

Omama Aslam — Wed, 13 Sep 2023 08:46:08 +0000

Angular Google social login tutorial, In this extensive tutorial, you will discover how to create Google social login in an angular application using the angularx-social-login package.

Social login is the way of accessing or signing in to the third-party app without creating a new login account, especially using the current information gathered from social media platforms like Google, Twitter, Facebook, etc.

In this angular google login example, we will show you how to implement google signin into Angular application using Google developer account (client id and key) in conjugation with angularx social login plugin.

The angularx-social-login library provides a social login/signin and authentication module. To implement google login or signin into angular, you must have a client id and secret. You can get a client id and secret only after creating a Google project or app inside the Google developer console.

Angular 16 Login with Google Example

Step 1: Install New Angular App
Step 2: Install Bootstrap UI
Step 3: Get Google Client ID & Secret
Step 4: Install Angular Social Login Package
Step 5: Register Social Login Modules
Step 6: Integrate Google Social Login in Angular
Step 7: Run Angular Application

Install New Angular Project



ng new ng-demo-app

Go inside the project folder by entering the command below :



cd ng-demo-app

Install Bootstrap UI

To make the google login auth template, you need bootstrap; hence install it now with below command:



npm i bootstrap

Next, place the Bootstrap module CSS path in the styles array:



"styles": [
     "node_modules/bootstrap/dist/css/bootstrap.min.css",
     "src/styles.scss"
]

Get Google Client ID and Secret

Step 1: You have to create the latest project similarly shown as given below:

Step 2: Define the project name like it is declared on the following screenshot:

Step 3: Further, you see internal and external user type within the OAuth consent screen; hence select External from the options:

Step 4: Additionally, on the subsequent screen, you need to define the site or privacy policy url:
Step 5: Next, click on the Create Credentials, choose OAuth client ID from the options:
Step 6: On top of that, choose Web application from the application type options. Right after, provide the app name, define your URL app under the Authorized JavaScript origins options.
Home » Angular » Angular 16 Google Social Login or Signin Tutorial
Angular 16 Google Social Login or Signin Tutorial
Last updated on: August 20, 2023 by Digamber

Angular Google social login tutorial, In this extensive tutorial, you will discover how to create Google social login in an angular application using the angularx-social-login package.

The angularx-social-login library provides a social login/signin and authentication module for Angular 9+.

It is not limited to login with Google and immaculately supports authentication with Facebook, Amazon, including VK. Nonetheless, if you have some other providers, then fret not; you can also build social login with another provider.

To implement google login or signin into angular, you must have a client id and secret. You can get a client id and secret only after creating a Google project or app inside the Google developer console.

You will also be taught to create and get a client id and secret in conjugation with the google developer console.

Angular 16 Login with Google Example
Step 1: Install New Angular App
Step 2: Install Bootstrap UI
Step 3: Get Google Client ID & Secret
Step 4: Install Angular Social Login Package
Step 5: Register Social Login Modules
Step 6: Integrate Google Social Login in Angular
Step 7: Run Angular Application
Install New Angular Project
Commence the first step by installing the new angular project:



ng new ng-demo-app

Including, get into the project’s root:



cd ng-demo-app

Install Bootstrap UI
To make the google login auth template, you need bootstrap; hence install it now with below command:



npm i bootstrap

Next, place the Bootstrap module CSS path in the styles array:



"styles": [
     "node_modules/bootstrap/dist/css/bootstrap.min.css",
     "src/styles.scss"
]

Get Google Client ID and Secret
This step profoundly explains how to get the Google client id and secret. Thereupon, head over to the Google developer console and follow the suggested steps respectively:

Step 1: You have to create the latest project similarly shown as given below:
Step 2: Define the project name like it is declared on the following screenshot:
Step 3: Further, you see internal and external user type within the OAuth consent screen; hence select External from the options:
Step 4: Additionally, on the subsequent screen, you need to define the site or privacy policy url:
Step 5: Next, click on the Create Credentials, choose OAuth client ID from the options:
choose OAuth client ID
Step 6: On top of that, choose Web application from the application type options. Right after, provide the app name, define your URL app under the Authorized JavaScript origins options. For instance, we are working on localhost; consequently, we defined the localhost URL:
Step 7: Ultimately, the OAuth client popup manifests on the screen, from here you can copy Your Client Id or client secret.

Install Angular Social Login Package

Generically, now we have to use the NPM command to install the angularx-social-login package. This is the most quintessential plugin which allows building google social signin in angular application.



npm install @abacritt/angularx-social-login --legacy-peer-deps

Register Social Login Modules in App Module

Open app.module.ts file, import ReactiveFormsModule, SocialLoginModule, SocialAuthServiceConfig and GoogleLoginProvider modules.

Also, inject these modules in imports as well as inside the providers’ array.



import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';
import {
  SocialLoginModule,
  SocialAuthServiceConfig,
} from '@abacritt/angularx-social-login';
import { GoogleLoginProvider } from '@abacritt/angularx-social-login';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ReactiveFormsModule, SocialLoginModule],
  providers: [
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider('Google-Client-ID-Goes-Here'),
          },
        ],
      } as SocialAuthServiceConfig,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

We imported GoogleLoginProvider from the ‘angularx-social-login’ package, albeit you can also import the other social platforms in conjunction with building social login in angular.

Moreover, the Google client id has to be injected within the GoogleLoginProvider() provider.

Integrate Google Social Login in Angular

In this step, we will do the most crucial task of this tutorial, which is to implement angular google social login.

Hence, app.component.html template file and add the following code.



<div class="container" style="max-width: 550px">
  <h2 class="text-center mb-5">Angular Login with Google</h2>
  <div *ngIf="isLoggedin === false">
    <div>
      <button type="button" (click)="loginWithGoogle()" class="btn btn-danger">Login with Google</button>
    </div>
  </div>
  <div *ngIf="isLoggedin === true">
    <div class="form-group">
      <label>First Name</label>
      <input type="text" class="form-control" [value]="socialUser.firstName" id="firstname" readonly>
    </div>
    <div class="form-group">
      <label>Last Name</label>
      <input type="text" class="form-control" [value]="socialUser.lastName" id="lastname" readonly>
    </div>
    <div class="form-group">
      <label>Email</label>
      <input type="text" class="form-control" [value]="socialUser.email" id="email" readonly>
    </div>
    <button type="button" (click)="logOut()" class="btn btn-primary">Log Out</button>
  </div>
</div>

Open and update the app.component.ts template.



import { Component, OnInit } from '@angular/core';

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import {

  SocialAuthService,

  GoogleLoginProvider,

  SocialUser,

} from '@abacritt/angularx-social-login';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss'],

})

export class AppComponent implements OnInit {

  loginForm!: FormGroup;

  socialUser!: SocialUser;

  isLoggedin?: boolean;

  constructor(

    private formBuilder: FormBuilder,

    private socialAuthService: SocialAuthService

  ) {}

  ngOnInit() {

    this.loginForm = this.formBuilder.group({

      email: ['', Validators.required],

      password: ['', Validators.required],

    });

    this.socialAuthService.authState.subscribe((user) => {

      this.socialUser = user;

      this.isLoggedin = user != null;

      console.log(this.socialUser);

    });

  }

  loginWithGoogle(): void {

    this.socialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID);

  }

  logOut(): void {

    this.socialAuthService.signOut();

  }

}

Run Angular Application

Ultimately, social login integrated into angular, and now you need to start the angular development server to test the app:



ng serve --open

Conclusion

Eventually, the angular login with Google tutorial is over; in this tutorial, we extensively explained how to signin with google in angular using the Google client id.

I hope you will love this step by step guide and share it with others.

ElementRef in Angular | How to use it

Omama Aslam — Thu, 31 Aug 2023 11:56:30 +0000

Angular ElementRef is a wrapper around a native DOM element (HTML element) object. It contains the property nativeElement, which holds the reference to the underlying DOM object. We can use it to manipulate the DOM. We use the ViewChild to get the ElementRef of an HTML element in the component class. Angular also inject ElementRef of the Host element of the component or directive when you request for it in the constructor. In this tutorial, let us explore how to use ElementRef to get the reference of an HtmlElement & manipulate the DOM in Angular Applications.

*Table Of Content: *

ElementRef
Getting ElementRef in Component Class
ElementRef Example
ElementRef in Custom Directive
ElementRef & XSS Injection Attack
Refrence

ElementRef

The DOM objects are created and maintained by the Browser. They represent the structure and content of the Document. In a Vanilla JavaScript code, we access these DOM objects to manipulate the View. We can create and build documents, navigate their structure, and add, modify, or delete elements and content.

Angular provides a lot of tools & techniques to manipulate the DOM. We can add/remove components. It provides a lot of directives like Class Directive or Style directive. to Manipulate their styles etc.

We may still need to access the DOM element on some occasions. This is where the ElementRef comes into the picture.

Getting ElementRef in Component Class

To manipulate the DOM using the ElementRef, we need to get the reference to the DOM element in the component/directive.

embed To get the reference to DOM elements in the component

Create a template reference variable for the element in the component/directive.
Use the template variable to inject the element into component class using the ViewChild or ViewChildren.

To get the DOM element hosting the component/directive

Ask for ElementRef in the constructor (Angular Dependency injection), the Angular will inject the reference element hosting the component/directive. For Example, in the following code, the variable hello refers to the HTML element div.

<div #hello>Hello Angular</div>

hello is the Template Reference variable, which we can use in the Template.

In the Component class, we use the ViewChild to inject the hello element. The Angular injects the hello as a type of ElementRef.

@ViewChild('hello', { static: false }) divHello: ElementRef;

Read token

Consider the following example

<input #nameInput [(ngModel)]="name">

The nameInput Template Reference Variable now binds to the input element. But at the same time, we have ngModel directive applied to it.

Under such circumstance, we can use the read token to let angular know that we need ElementRef reference as shown below

//ViewChild returns ElementRef i.e. input HTML Element

@ViewChild('nameInput',{static:false, read: ElementRef}) elRef;


//ViewChild returns NgModel associated with the nameInput
@ViewChild('nameInput',{static:false, read: NgModel}) inRef;

ElementRef Example

Once we have the ElementRef , we can use the nativeElement property to manipulate the DOM as shown below.

import { Component,ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template:  '<div #hello>Hello</div>'
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {

 @ViewChild('hello', { static: false }) divHello: ElementRef;

 ngAfterViewInit() {
   this.divHello.nativeElement.innerHTML = "Hello Angular";
 }

}

You can manipulate the DOM very easily.

  ngAfterViewInit() {
    this.divHello.nativeElement.innerHTML = "Hello Angular";
    this.divHello.nativeElement.className="someClass";
    this.divHello.nativeElement.style.backgroundColor="red";
  }

ElementRef in Custom Directive

One of the use case for ElementRef is the Angular directive. We learned how to create a custom directive in Angular. The following is the code for the ttClass custom attribute directive.

import { Directive, ElementRef, Input, OnInit } from '@angular/core'

@Directive({
  selector: '[ttClass]',
})
export class ttClassDirective implements OnInit {

  @Input() ttClass: string;

  constructor(private el: ElementRef) {
  }

  ngOnInit() {
    this.el.nativeElement.classList.add(this.ttClass);
  }

}

Note that we are injecting the ElementRef in the constructor. Whenever we ask for the ElementRef in the constructor, the Angular will inject the reference to the host DOM element of the directive.

ElementRef & XSS Injection Attack

Improper use of ElementRef can result in an XSS Injection attack. For Example in the following code, we are injecting a script using the elementRef. When the component containing such code runs, the script is executed

constructor(private elementRef: ElementRef) {
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.textContent = 'alert("Hello World")';
    this.elementRef.nativeElement.appendChild(s);
 }

Reference

ElementRef

If you liked this, click the ❤️ below so other people will see this here on Medium. Please don’t forget to like, subscribe and comments.

How to host Angular + Express (API) on firebase free hosting.

Omama Aslam — Wed, 30 Aug 2023 06:30:08 +0000

In this story, I am going to talk about firebase hosting for Angular and Express API. I have considered MEAN stack here.

In this article, I will assume the application is ready with SSR and express API is ready.

What is Firebase Hosting?

Firebase hosting is a Google hosting service which provides static web content to the user in a secure, fast, free and easy way.

Why Firebase Hosting?

Most of the web hosting will charge you or will be slow if they are free, also you have to pay extra for getting an SSL certificate to convert your website to a secure one with https.

Firebase hosting is free. So, it won’t cost you anymore. It by default provides SSL certificate and offers an impressive speed across multiple geographic locations without the need for a separate CDN on top.

Requirements

Google Account:

I believe you might already have a Gmail account, which is enough. If not create one.

Firebase-CLI:
Before you can install the Firebase CLI, you will need to install Node.js on your machine.

Once you’ve installed NodeJs, you can install the Firebase CLI using npm (the Node Package Manager) by running the following command:



npm install -g firebase-tools

Lets get started :)

Step 1: Creating firebase project

Go to (https://firebase.google.com/) and sign in with your Google account

then create new project, enter your project name (firebase-express-demo in my case)

Step 2: Firebase Login
Now come back to the command line and go to your project folder



cd firebase-express-demo

First we have to login into firebase from command line. Type in the following command.



firebase login

It will take you to the sign-in page in the browser, once you’ve successfully logged in it will show you something like this.

Step 3: Setup firebase in project

To setup firebase in your existing project you have to perform below task.

Create firebase.json to root of your project (You can read more about firebase.json(https://firebase.google.com/docs/hosting/full-config)
Optional, Create .firebaserc (This may useful, if you have multiple environments and multiple websites)

This is how my firebase.json and .firebaserc looks like
(https://github.com/erashu212/firebase-express-demo/blob/master/firebase.json)

We will use firebase functions and http events to route express API.

In my firebase.json, there is a section of hosting which is having public, rewrites and functions property.

“public”

It tells firebase to make that folder publicly accessible. This should be the folder which are meant to be available for end user. In my case, I have marked dist as public (this dist folder is generated using angular-cli)

“rewrites”

As the name suggest, It is a re-writer which trigger the function on hit of specified source.

In my case, on hit of public domain (https://firebase-express-demo.firebaseapp.com/), it will trigger the function expressApp

“functions”

This block is used to expose your https events and firebase functions. In my case I have stated where expressApp function can be found.

"source": "<dir_name>", in my case it is functions folder

In this project, I have created two sub-folders under root folder.

“server ”: This directory will keep all express related stuff.

“functions ”:This will keep code and structure for firebase hosting.

Firebase deploy requires all the dependencies to be listed under functions folder package.json.

The dependencies defined in package.json are going to be installed freshly during deployment.

Step 5: Deployment
In this demo project, I have written a small script which will copy the dist, server and dependencies to “functions” directory.

You can see the scripts here

(https://github.com/erashu212/firebase-express-demo/blob/master/index.js)

When we say



firebase deploy

it is going to deploy the folder mentioned in firebase.json and functions defined under “functions” sections

Congratulations! your website is now live, you can check by going to url which is provided in the command line in my case it is (https://fir-demo-63781.firebaseapp.com/)

If you liked this, click the ❤️ below so other people will see this here on Medium. Please don’t forget to like, subscribe and comments.