Full Trust European Hosting

BLOG about Full Trust Hosting and Its Technology - Dedicated to European Windows Hosting Customer

AngularJS Hosting Europe - HostForLIFE.eu :: Knowing the Hooks of the Angular Lifecycle

clock February 11, 2025 07:30 by author Peter

Components in Angular traverse through several phases, from creation to decomposition. The angular lifespan is the aggregate term for these phases. Knowing how to use Angular's lifecycle hooks enables developers to conduct initialization, cleanup, and other essential tasks at strategic points in a component's lifespan. An extensive examination of each of these lifecycle hooks and their proper application is given in this article.

Angular Lifecycle Hooks
Here is a list of the primary lifecycle hooks in Angular.

  • ngOnChanges
  • ngOnInit
  • ngDoCheck
  • ngAfterContentInit
  • ngAfterContentChecked
  • ngAfterViewInit
  • ngAfterViewChecked
  • ngOnDestroy


Let's explore each of these hooks in detail.

1. ngOnChanges
When it’s called: This hook is called whenever an input property bound to a component changes. It’s called before ngOnInit and whenever the input properties are updated.
Use case: Use ngOnChanges to act on changes to input properties from the parent component.

Example
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-child',
template: '<p>{{data}}</p>',
})
export class ChildComponent implements OnChanges {
@Input() data: string;
ngOnChanges(changes: SimpleChanges) {
console.log('ngOnChanges called', changes);
}
}


2. ngOnInit
When it’s called: This hook is called once, after the first ngOnChanges. It’s typically used for component initialization.
Use case: Use ngOnInit to perform component initialization, like fetching data.

Example
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example',
template: '<p>Example works!</p>',
})
export class ExampleComponent implements OnInit {
ngOnInit() {
console.log('ngOnInit called');
}
}


3. ngDoCheck
When it’s called: This hook is called during every change detection run. It’s useful for custom change detection.
Use case: Use ngDoCheck to implement custom change detection logic.

Example
import { Component, DoCheck } from '@angular/core';
@Component({
selector: 'app-check',
template: '<p>Check works!</p>',
})
export class CheckComponent implements DoCheck {
ngDoCheck() {
console.log('ngDoCheck called');
}
}


4. ngAfterContentInit
When it’s called: This hook is called after Angular projects external content into the component’s view (ng-content).
Use case: Use ngAfterContentInit to respond to content projection into the component.

Example
import { Component, AfterContentInit } from '@angular/core';
@Component({
selector: 'app-content',
template: '<ng-content></ng-content>',
})
export class ContentComponent implements AfterContentInit {
ngAfterContentInit() {
console.log('ngAfterContentInit called');
}
}


5. ngAfterContentChecked
When it’s called: This hook is called after every check of the component’s projected content.
Use case: Use ngAfterContentChecked to act after the content is checked.

Example
import { Component, AfterContentChecked } from '@angular/core';
@Component({
selector: 'app-content-check',
template: '<ng-content></ng-content>',
})
export class ContentCheckComponent implements AfterContentChecked {
ngAfterContentChecked() {
console.log('ngAfterContentChecked called');
}
}


6. ngAfterViewInit
When it’s called: This hook is called after Angular initializes the component’s views and child views.
Use case: Use ngAfterViewInit to perform actions after the component’s view is initialized.

Example
import { Component, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-view-init',
template: '<p>View Init works!</p>',
})
export class ViewInitComponent implements AfterViewInit {
ngAfterViewInit() {
console.log('ngAfterViewInit called');
}
}


7. ngAfterViewChecked
When it’s called: This hook is called after every check of the component’s view.
Use case: Use ngAfterViewChecked to act after the component’s view is checked.

Example
import { Component, AfterViewChecked } from '@angular/core';
@Component({
selector: 'app-view-check',
template: '<p>View Check works!</p>',
})
export class ViewCheckComponent implements AfterViewChecked {
ngAfterViewChecked() {
console.log('ngAfterViewChecked called');
}
}


8. ngOnDestroy
When it’s called: This hook is called just before Angular destroys the component.
Use case: Use ngOnDestroy for cleanup, like unsubscribing from observables and detaching event handlers.

Example
import { Component, OnDestroy } from '@angular/core';
@Component({
selector: 'app-destroy',
template: '<p>Destroy works!</p>',
})
export class DestroyComponent implements OnDestroy {
ngOnDestroy() {
console.log('ngOnDestroy called');
}
}

Lifecycle Sequence
Understanding the order of these hooks is crucial for correctly implementing logic that depends on the component's lifecycle stages.

  • ngOnChanges
  • ngOnInit
  • ngDoCheck
  • ngAfterContentInit
  • ngAfterContentChecked
  • ngAfterViewInit
  • ngAfterViewChecked
  • ngOnDestroy


Practical Use Cases

  • ngOnInit: Ideal for initialization tasks like fetching data from a service.
  • ngOnChanges: Useful for reacting to changes in input properties.
  • ngOnDestroy: Perfect for cleaning up resources, like unsubscribing from observables.
  • ngAfterViewInit: Great for manipulating the DOM after the view is initialized.

Conclusion
Mastering Angular lifecycle hooks is essential for building robust and maintainable Angular applications. By understanding when and how to use each hook, developers can ensure their components are properly initialized, updated, and cleaned up. This not only leads to better performance but also improves code organization and readability.



Node.js Hosting Europe - HostForLIFE.eu :: Installing NVS on Windows Machine

clock February 4, 2025 07:17 by author Peter

Node Version Switcher, or NVS for short, is a cross-platform utility that may be used on Windows, Linux, and Mac workstations to manage several node versions on a single computer.

This program installs the various node versions in the Windows user profile folder without requiring administrator privileges on your workstation. Put otherwise, it won't interfere with the C:\Program Files or C:\System32 files.

Just like NVM (Node Version Manger)This tool manages all legacy and newer node versions independently and manages the runtime for you on the fly. As you see in the above screenshot, NVS can maintain multiple versions of node in same environment. Each version of the node can have its own tools and runtime.

The node is required for building SPFx (SharePoint Framework) solutions and building SPA (Single Page Applications) and many more.

Steps

Please follow the below steps to set up and configure NVS on windows workstation. Please note that all the steps are performed against windows 11 OS workstation
Step 1. Let us check if the workstation has NVS (Node Version Switcher) already installed.

Step 2. Let us try installing NVS on windows machine. In Windows 11, winget is already installed as part of OS and MSFT recommends using winget to install and maintain the software from Github repository. At first it is required to open the command prompt as administrator.

Step 3. in the CMD window, try running the below command to install the NVS. winget install jasongin.nvs –source winget

Step 4. Wait for the operation to complete. At the end you should be getting the message ‘Successfully installed’


Step 5. Close the command window. Open the command window again in ‘Administrator Mode’. This is required. Once opened type in ‘nvs’ in the command window. This time if you can see the nvs version numbers you are good and proceed to step 8. Else if you are getting the ‘Self signed certificate issue’ as per below screen capture then proceed to step 6.

Step 6. Copy the URL https://nodejs.org/dist/index.json in the chrome browser and download the certificate. Make sure you download file contains certificate chain. Click on the certificate information in browser.

Click on lock that says, ‘Connection is secure’.

Click on ‘Certificate is valid’

Click on the ‘Details’ tab.

Click on ‘Export Certificate’.

Step 7. Set up the environment variable for your profile under windows environment variables. Set the file for the environment variable to the certificate that you just downloaded.

Step 8. Open the command prompt as administrator and then type nvs and look for the below output.

Step 9. If you do not have any version installed, you will be asked to select the node versions from the available binaries. In this case I have chosen to install the version 18.20.6 by using the below command.

nvs add 10.20.6

Step 10. Once the installation starts you will be getting below message.

After couple of minutes, you should get a message that the specified node version is added.

Step 11. clear the screen and type I nvs, you should get the versions now. Select the required version.


Step 12: I have type in (a). you can select the one that is required for your needs. Once selected you can check the version by using the below command.

node –v

Conclusion
Thus, in this article, you have seen how to install NVS a cross-platform tool to manage multiple node versions efficiently, in windows workstation.

HostForLIFE.eu Node.js Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.



AngularJS Hosting Europe - HostForLIFE.eu :: Error handling in Angular

clock January 20, 2025 06:34 by author Peter

In order to guarantee a seamless user experience and facilitate debugging, Angular error management entails recording and controlling errors. Angular comes with a number of built-in tools and methods for methodically managing faults.


1. Managing Errors in HTTP

The HttpClient and the catchError operator from RxJS can be used to manage errors in HTTP requests.

For instance
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { catchError, throwError } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class DataService {
  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get(this.apiUrl).pipe(
      catchError(this.handleError)
    );
  }

  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      // Client-side error
      console.error('Client-side error:', error.error.message);
    } else {
      // Server-side error
      console.error(`Server-side error: ${error.status} - ${error.message}`);
    }
    return throwError(() => new Error('Something went wrong; please try again later.'));
  }
}


catchError: Intercepts errors and allows custom handling.
throwError: Re-throws the error after handling it for further processing.

2. Global Error Handling
Angular provides a way to handle application-wide errors using the ErrorHandler service.

Custom Global Error Handler.
Create a custom error handler.
import { ErrorHandler, Injectable, NgZone } from '@angular/core';

  @Injectable()
  export class GlobalErrorHandler implements ErrorHandler {
    constructor(private ngZone: NgZone) {}

    handleError(error: any): void {
      // Log the error to the console or a logging service
      console.error('Global Error:', error);

      // Notify the user (e.g., using a toast or modal)
      this.ngZone.run(() => {
        alert('An unexpected error occurred.');
      });
    }
  }
   

Register the error handler in AppModule.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GlobalErrorHandler } from './global-error-handler';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [{ provide: ErrorHandler, useClass: GlobalErrorHandler }],
  bootstrap: [AppComponent]
})
export class AppModule {}

The service will be used throughout the entire application to catch logs.

3. Error Interceptors
Use an HTTP interceptor to handle errors globally for all HTTP requests.

Example

Create an HTTP interceptor.
  import { Injectable } from '@angular/core';
  import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse } from '@angular/common/http';
  import { catchError, throwError } from 'rxjs';

  @Injectable()
  export class ErrorInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler) {
      return next.handle(req).pipe(
        catchError((error: HttpErrorResponse) => {
          // Handle different error types
          if (error.status === 404) {
            console.error('Not Found:', error.message);
          } else if (error.status === 500) {
            console.error('Server Error:', error.message);
          }

          // Optionally, rethrow the error
          return throwError(() => new Error('An error occurred. Please try again later.'));
        })
      );
    }
  }
   

Register the interceptor in AppModule.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { ErrorInterceptor } from './error-interceptor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ErrorInterceptor,
      multi: true
    }
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule {}

4. Using Angular Guards for Route Error Handling
Angular guards can protect routes and handle access-related errors.
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(): boolean {
    const isAuthenticated = false; // Replace with actual authentication logic
    if (!isAuthenticated) {
      alert('You are not authorized to access this page.');
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}


5. Error Display in the UI
Display user-friendly error messages in the UI using Angular components.

Example
Create an error message component.
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-error-message',
  template: `
    <div *ngIf="errorMessage" class="error">
      {{ errorMessage }}
    </div>
  `,
  styles: [
    `
      .error {
        color: red;
      }
    `,
  ],
})
export class ErrorMessageComponent {
  @Input() errorMessage: string | null = null;
}



Use the component.
<app-error-message [errorMessage]="error"></app-error-message>

6. RxJS Error Handling Strategies
    Retry Failed Requests.
    import { retry } from 'rxjs';

    this.http.get(this.apiUrl).pipe(
      retry(3), // Retry up to 3 times
      catchError(this.handleError)
    );

Fallback Data.
this.http.get(this.apiUrl).pipe(
  catchError(() => of([])) // Return fallback data on error
);


7. Logging Errors
Use external services like Sentry, LogRocket, or custom logging services to log errors.

Example
@Injectable({
  providedIn: 'root'
})
export class LoggingService {
  logError(message: string, stack: string) {
    // Send error logs to an external server
    console.log('Logging error:', message);
  }
}




Node.js Hosting Europe - HostForLIFE.eu :: How To Creating a Live Chat App Using Socket.IO and Node.js?

clock January 16, 2025 07:48 by author Peter

A fundamental element of modern web development is the usage of live chat software to enable real-time user contact. Using technologies like Socket.IO and Node.js greatly simplifies the process. Socket.IO is a JavaScript library that allows bidirectional, real-time communication between web clients and servers, resulting in stable connections across all browsers. Node.js, a stable runtime environment that uses an event-driven, non-blocking I/O model, makes it simple to create scalable network applications.

Steps for Creating a Project]
Step 1. Setting Up the Project
Use my previous article for setting up Node.js, "How to upload file in Node.js" In this article, we mentioned important commands for uploading files in Node.js.

Step 2. Setting Up the Server
Create the Server File. Create a file named index.js
const express = require('express');
const app = express();
const { Server } = require('socket.io');
const http = require('http');
const server = http.createServer(app);
const io = new Server(server);
const port = 4000;
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
    socket.on('send name', (username) => {
        io.emit('send name', username);
    });
    socket.on('send message', (chat) => {
        io.emit('send message', chat);
    });
});
server.listen(port, () => {
    console.log(`Server is listening at the port: ${port}`);
});

Step 3. Creating the Frontend

Create the HTML File. Create a file named index.html
<!DOCTYPE html>
<html>
<head>
    <title>Chat app using Socket IO and Node JS</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        h1 {
            color: #273c75;
        }

        .msg-box {
            display: flex;
            flex-direction: column;
            background: darkgray;
            padding: 20px;
        }
    </style>
</head>
<body>
    <h1 class="font-bold text-3xl text-center mt-5">
        C# Corner Chat App using Socket IO and Node JS
    </h1>
    <div>
    </div>
    <form class="flex flex-col justify-center items-center mt-5" id="form">
        <div class="msg-box">
            <input class="border border-gray-400 rounded-md mt-5 p-1" type="text" placeholder="Name" id="myname"
                autocomplete="off">
            <input class="border border-gray-400 rounded-md mt-5 p-1" type="text" placeholder="Message" id="message"
                autocomplete="off">
            <button class="bg-blue-500 rounded-md p-2 text-white mt-5">
                Send
            </button>
        </div>
    </form>
    <div class="flex flex-col justify-center items-center mt-5" id="messageArea">
    </div>
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
    let socket = io();
    let form = document.getElementById('form');
    let myname = document.getElementById('myname');
    let message = document.getElementById('message');
    let messageArea = document.getElementById("messageArea");
    form.addEventListener("submit", (e) => {
        e.preventDefault();
        if (message.value) {
            socket.emit('send name', myname.value);
            socket.emit('send message', message.value);
            message.value = "";
        }
    });
    socket.on("send name", (username) => {
        let name = document.createElement("p");
        name.style.backgroundColor = "#a59494";
        name.style.textAlign = "center";
        name.style.color = "white";
        name.textContent = username + ":";
        messageArea.appendChild(name);
    });
    socket.on("send message", (chat) => {
        let chatContent = document.createElement("p");
        chatContent.textContent = chat;
        messageArea.appendChild(chatContent);
    });
</script>
</html>

Step 4. Running the Application
Run the command in CMD.
node index.js

In the output, you can open the chat application in two different browsers or different tabs. When you start typing and send a message, it reflects on both screens in real-time.

Conclusion

You have now successfully used Node.js and Socket.IO to develop a basic live chat application. This application facilitates real-time communication between users by rapidly reflecting messages across several linked clients. To make your app even better, think about including features like private messaging, user authentication, and database storage for conversation history. Using CSS frameworks or original designs to enhance the user interface can improve the user experience. Use Vercel or Heroku to launch your application for increased accessibility. Continue researching and experimenting to create a robust and feature-rich chat experience. Enjoy yourself while coding!



AngularJS Hosting Europe - HostForLIFE.eu :: Using Pipes to Create Clear and Effective Angular Applications

clock January 8, 2025 06:45 by author Peter

The use of "pipes" is one of Angular's most potent tools for formatting and changing data inside templates. Developers can apply transformations like formatting dates, changing text cases, or even filtering data in an efficient and reusable way by using pipes, which offer a declarative mechanism to handle data before it is shown to the user.

Writing clean, manageable, and modular code for Angular applications requires an understanding of pipes. The main distinctions between pipes and functions will be discussed in this post, along with how to use built-in pipes and make your own custom pipes to increase Angular's functionality. You will have a firm grasp on how to integrate pipes into your Angular projects to improve user experience and expedite data presentation by the end of this tutorial.

What is an Angular Pipe?
In Angular, a pipe is a way to transform data before it is displayed in the user interface. Pipes can be used in templates to modify or format data without having to alter the original data.

Pipes are an Angular concept, not a TypeScript (TS) feature. They are a core part of Angular’s template syntax and are used to transform data in the view (template) layer of Angular applications.

Key Points about Pipes in Angular

  • Angular-Specific: Pipes are a built-in feature of the Angular framework designed to be used in Angular templates. They are not a native feature of JavaScript or TypeScript.
  • Purpose: Their primary function is to transform data in the template before it is displayed to the user. This transformation can include formatting dates, numbers, currencies, filtering arrays, or performing more complex data transformations.

Declarative Transformation: Pipes enable declarative transformation of data within the template, meaning that the logic for transforming data is cleanly abstracted away from the component’s TypeScript code.

You may be wondering why we should use Pipes when we can use functions.

Criteria Pipe Function
Purpose Data transformation in the template Business logic and calculations
Use case Formatting, filtering, sorting, etc. Complex or multi-step calculations
Performance Pure pipes are efficient for transforming data only when needed Functions can be less performant when used in templates (requires manual calls)
Reusability Highly reusable across templates Functions are reusable within the component or service
Asynchronous Handling Handles observables and promises with AsyncPipe Requires manual subscription logic or use of 'async' in templates
Complexity Best for simple, declarative transformations Best for complex or dynamic logic
When to use When transforming data for display in the template When performing business logic or side effects that don't belong in the template

Types of Pipes
There are two types of Pipes.
Pure Pipe (Default): A pure pipe will only re-run when its input value changes.
    @Pipe({

      name: 'pureExample',

      pure: true // This is the default value, so you can omit this

    })

    export class PureExamplePipe implements PipeTransform {

      transform(value: any): any {

        console.log('Pure pipe executed');

        return value;

      }

    }


Impure Pipe: An impure pipe will re-run whenever Angular detects a change in the component’s state, even if the input value hasn’t changed.
@Pipe({
  name: 'impureExample',
  pure: false // Set to false to make it impure
})
export class ImpureExamplePipe implements PipeTransform {
  transform(value: any): any {
    console.log('Impure pipe executed');
    return value;
  }
}


In Angular, you can use in-built pipes or create your own.

In-built pipes

Angular provides some basic pipes that can be used.
It comes from the '@angular/common' package.

Some popular ones that can be helpful are:
CurrencyPipe, DatePipe, DecimalPipe, LowerCasePipe, UpperCasePipe and TitleCasePipe

How to use an in-built pipe?

In your ts file, define your variable. In our example, we will use the variable title.
title = 'app works!';

In your html, you can use the pipe as follows:
<h1> {{title | uppercase}} </h1>

The result is how the string title is displayed:

Note. The currency ‘USD’ is added in front because of the currency pipe, and only 10 characters are displayed because of the slide pipe.

Custom pipes

Run the command below to create a pipe file:
ng generate pipe <<pipe-name>>.

For example: ng generate pipe my-custom-pipe. Once executed, the two files below will be created

Open the file ‘my-custom-pipe.pipe.ts. You will see the following boilerplate code provided:
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'myCustomPipe'
})
export class MyCustomPipePipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return null;
  }
}


After the default class, you can create the function for your new pipe. In our case, we will create a pipe that will replace spaces in a hyphen. It is important to add the decorator ‘@Pipe’ before the class so that Angular knows what follows will be a pipe. Also, pass the name of the pipe as a parameter in the ‘@Pipe’ decorator. Also, when creating the class, implement ‘PipeTransform’. The resulting class will be as follows:
@Pipe({name: 'removeWhiteSpace'})
export class RemoveWhiteSpacePipe implements PipeTransform {
  transform(value: string): string {
    return value.replace(/\s+/g, '-');
  }
}


The resulting class will be as follows (the full code):
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'myCustomPipe'
})
export class MyCustomPipePipe implements PipeTransform {


  transform(value: any, args?: any): any {
    return null;
  }
}

@Pipe({name: 'removeWhiteSpace'})
export class RemoveWhiteSpacePipe implements PipeTransform {
  transform(value: string): string {
    return value.replace(/\s+/g, '-');
  }
}


In the ts file of your component, create the variable that will hold the value that will be transformed
textWithSpaces = 'This is a text with a lot of spaces that will be transformed';

In the html file of your component, do the following:
<p>{{ textWithSpaces | removeWhiteSpace }}</p>

The result is the following:

Conclusion
An effective and potent method for formatting and transforming data in the templates of your application is to use angular pipes. Without having to code repetitious logic in your components, you can quickly manipulate data types like strings, dates, and numbers by utilizing built-in pipes. More freedom is provided by custom pipelines, which let you design modular, reusable, and maintainable transformation logic that is suited to your particular requirements.

Understanding the distinction between pipes and functions is key to leveraging their full potential. While functions provide a direct way to execute code, pipes offer a declarative approach to handle transformations directly within templates, improving readability and performance.

Whether you're working with Angular’s built-in pipes or creating custom ones, the ability to easily manipulate data in the view layer is a significant advantage in building dynamic and user-friendly applications. By mastering Angular pipes, you can keep your code clean, concise, and aligned with best practices, ultimately leading to more maintainable and scalable applications.

With the knowledge of how to use and create pipes, you’re now equipped to enhance your Angular applications with powerful data transformations, making your development experience more efficient and enjoyable.



AngularJS Hosting Europe - HostForLIFE.eu :: In VS Code by Debuggers for Chrome New

clock December 16, 2024 06:13 by author Peter

More than four years ago, on January 15, 2021, Debugger for Chrome wrote the post Debug Angular (1) in VS Code. With 208K readings, that article is really popular. This indicated that while Angular is a very popular tool for web development, it is difficult to persuade many developers to focus on its devugging technology. Although this article is a supplement to the original, I am aware that the Visual Studio Code Debugger for Chrome has been deprecated. We'll check if the original article is still relevant or valid.

Debug Angular in VS Code
Now the current VS Code is with v1.95.3. The VS Code Debugger for Chrome is deprecated:

However, user is introduced to use the JavaScript Debugger extension instead. Click the link, we can see that

this extension is already installed if you use VS Code or Visual Studio:

And furthermore,

Nightly Extension you may want to install our nightly build to get the latest fixes and features. The nightly build runs at 5PM PST on each day that there are changes. You can get Nightly extension from JavaScript Debugger (Nightly) - Visual Studio Marketplace, or search in VS Code extension for
@id:ms-vscode.js-debug-nightly

Debugging in VS Code

Actually, the debugging is the same way as we introduced in article, Debug Angular (1), In VS Code by Debugger for Chrome, we will not repeat the process, but given here the major points:

Configure the launch.json file --- choose the port as your app running

Run the app from the Angular CLI (very important, otherwise, the debugging will not work) by command.
Start to debug.



AngularJS Hosting Europe - HostForLIFE.eu :: Create Customer and Process Card Payments with Tokenization Angular

clock December 11, 2024 06:41 by author Peter

In the following article we will be looking into credit card payment and credit card design using the Stripe element. Stripe is one of the online and in-person payment processing systems. It's not open source. In the below sample, we are using the test version. We can do operations like creating a customer, payment, custom UI element design using the Stripe card element, etc.

In the below sample, I have used the stripe.js npm package for Stripe payment processing in Angular and Stripe REST APIs. And for business logic, I have used the dot net in this article. I have defined back-end functionality.

Package Installation
Use the below npm command to install Stripe in Angular.
npm install @stripe/stripe-js

Create a customer using card tokenization
Creates a new customer in the Stripe system, associating a payment source; basically, it will create a customer after getting card info from users.

In this sample I am using a modal popup to get the card info.

creditcard.component.html
In the below sample, we are loading the card number, expiry date and CVV using stripe element.
<div class="modal-body">
    <!-- Modal content area -->
    <h2>Enter Your Credit Card Information</h2>
    <!-- Title -->

    <form (ngSubmit)="onSubmit()">
        <!-- Angular form submission handler -->

        <!-- Card Number -->
        <label for="card-number">Card Number</label>
        <!-- Label for card number -->
        <div id="card-number" class="stripe-element"></div>
        <!-- Stripe Element placeholder for Card Number -->

        <!-- Expiry Date -->
        <label for="card-expiry">Expiration Date</label>
        <!-- Label for expiration date -->
        <div id="card-expiry" class="stripe-element"></div>
        <!-- Stripe Element placeholder for Expiration Date -->

        <!-- CVC -->
        <label for="card-cvc">CVC</label>
        <!-- Label for CVC -->
        <div id="card-cvc" class="stripe-element"></div>
        <!-- Stripe Element placeholder for CVC -->

        <!-- Errors -->
        <div id="card-errors" role="alert"></div>
        <!-- Placeholder to show card input errors -->

        <!-- Buttons -->
        <div class="modal-buttons">
            <!-- Button container -->
            <button type="button" (click)="vm.closeCardModal()">Cancel</button>
            <!-- Button to cancel the modal -->
            <button type="submit" [disabled]="isSubmitting">Submit</button>
            <!-- Submit button, disabled while `isSubmitting` is true -->
        </div>
    </form>
</div>

creditcard.component.scss
.modal-body {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: auto;
}
.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 400px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.modal-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.requiredIndicate {
color: red; font-weight: bold;
}
h2 {
    text-align: center;
    color: #333;
}

form {
    display: flex;
    flex-direction: column;
}
.error-message{
    font-size: 15px;
    color: #df0707;
    padding: 2px;
}
label {
    margin-top: 10px;
    color: #555;
}

input {
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    margin-top: 20px;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button[type="submit"] {
    background-color: #28a745;
    color: white;
}

button[type="button"] {
    background-color: #dc3545;
    color: white;
}

button:hover {
    opacity: 0.9;
}
#card-errors {
  color: red;
  font-size: 0.9em;
  margin-top: 5px;
}

creditcard.component.ts
In Component, we are loading the Stripe element to our UI element using Id. Don't hardcode the publish and secret key in the front end. try to get from backend
The mount() method is used to attach a Stripe Element (such as cardNumber, cardExpiry, or cardCvc) to a specific DOM element in your HTML.
Each Stripe Element can only be mounted to one DOM element. If you need to move it to a new location, unmount it first using the unmount() method
loadStripe() The method is used to create an instance of the stripe using the publish key.
displayError() method used to bind the error message to an HTML element.
onSubmit() method used for form submission and external validation if need means.
the createToken method in Stripe.js is used to securely create a single-use token that represents a payment method (like a credit card). This token can then be sent to your server for processing a payment or saving card details

import { AfterViewInit, Component, EventEmitter, OnInit, Output } from '@angular/core';
import { loadStripe, Stripe, StripeCardCvcElement, StripeCardExpiryElement, StripeCardNumberElement, StripeElements } from '@stripe/stripe-js';

@Component({
  selector: 'app-creditcard',
  templateUrl: './creditcard.component.html', // HTML template for the component
  styleUrls: ['./creditcard.component.scss'] // SCSS styles for the component
})
export class CreditcardComponent implements OnInit, AfterViewInit {

  // Stripe API keys (publishable key for client-side usage)
  publishKey: string = ""; // Please replace your stripe publish key here.

  // Stripe objects
  stripe: Stripe | null = null; // Stripe instance
  elements: StripeElements | null = null; // Stripe Elements instance
  cardNumber: StripeCardNumberElement | null = null; // Card Number Element
  cardExpiry: StripeCardExpiryElement | null = null; // Expiry Date Element
  cardCvc: StripeCardCvcElement | null = null; // CVC Element

  isSubmitting: boolean = false; // Prevent duplicate submissions

  @Output() tokenGenerated = new EventEmitter<string>(); // Emit the generated token to parent component

  constructor() { }

  ngOnInit(): void {
    // Component initialization logic (if needed)
  }

  async ngAfterViewInit() {
    // Load the Stripe instance with the publishable key
    this.stripe = await loadStripe(this.publishKey);

    if (this.stripe) {
      // Initialize Stripe Elements
      this.elements = this.stripe.elements();

      // Define the custom styles for Stripe Elements
      const style = {
        base: {
          color: '#32325d', // Default text color
          fontFamily: '"Roboto", sans-serif', // Font family
          fontSize: '16px', // Font size
          '::placeholder': {
            color: '#aab7c4', // Placeholder text color
          },
        },
        invalid: {
          color: '#fa755a', // Invalid input text color
          iconColor: '#fa755a', // Invalid icon color
        },
      };

      // Create and mount the Card Number Element
      this.cardNumber = this.elements.create('cardNumber', { style });
      this.cardNumber.mount('#card-number');

      // Create and mount the Expiry Date Element
      this.cardExpiry = this.elements.create('cardExpiry', { style });
      this.cardExpiry.mount('#card-expiry');

      // Create and mount the CVC Element
      this.cardCvc = this.elements.create('cardCvc', { style });
      this.cardCvc.mount('#card-cvc');

      // Attach event listeners to handle real-time validation errors
      this.cardNumber.on('change', this.displayError.bind(this));
      this.cardExpiry.on('change', this.displayError.bind(this));
      this.cardCvc.on('change', this.displayError.bind(this));
    }
  }

  displayError(event: any) {
    // Handle real-time validation errors
    const displayError = document.getElementById('card-errors');
    if (displayError) {
      if (event.error) {
        displayError.textContent = event.error.message; // Show error message
      } else {
        displayError.textContent = ''; // Clear error message
      }
    }
  }

  async onSubmit() {
    // Ensure Stripe and card elements are initialized
    if (!this.stripe || !this.cardNumber) {
      console.error('Stripe or card elements not initialized');
      return;
    }

    this.isSubmitting = true; // Set submission state to true

    // Create a token for the card details
    const { token, error } = await this.stripe.createToken(this.cardNumber);

    if (error) {
      // Display error message if tokenization fails
      const displayError = document.getElementById('card-errors');
      if (displayError && error.message) {
        displayError.textContent = error.message;
      }
    } else {
      // Emit the token to the parent component
      this.tokenGenerated.emit(token?.id);

      // Close the modal (assumes `vm.closeCardModal()` is defined)
      this.vm.closeCardModal();
    }

    this.isSubmitting = false; // Reset submission state
  }
}


Sample Output of UI Element

 

Modal Popup Open/Close
ngx-bootstrap npm package was used to open and close the modal. I have used a modal popup in the payment component to open and close the modal, so I have included it in payment.module.ts and declartion included.

package installation
npm i ngx-bootstrap

Include ModalModule in required module like below,

payment.module.ts

@NgModule({
  declarations: [PaymentComponent,CreditcardComponent],
  imports: [
    CommonModule,ReactiveFormsModule,FormsModule,NgToggleModule,
    PaymentRoutingModule, ModalModule.forRoot(),
  ]
})


payment.component.ts

Used to generate customer from the emitted output function creditcard.component.ts it will trigger customer generation.
openCardModal(): Used to open the modal popup with creditcard.component.ts.

constructor(private modalService: BsModalService,private paymentService:PaymentService)
  {

  }
openCardModal = () => {
  // Opens the CreditcardComponent as a modal
  this.modalRef = this.modalService.show(CreditcardComponent, {
    animated: true, // Enables animation for the modal
    keyboard: false, // Disables closing the modal via the ESC key
    backdrop: 'static', // Prevents clicking outside the modal to close it
    initialState: {
      vm: this.vm, // Passes a custom `vm` object to the modal component's input
    },
  });

  // Subscribes to the `tokenGenerated` EventEmitter from the modal component
  this.modalRef.content.tokenGenerated.subscribe((token: string) => {
    this.createCustomerForToken(token); // Calls the function to handle token processing
  });
};

createCustomerForToken(token) method
This method processes the token emitted by the modal and uses it to create a customer by calling the paymentService
createCustomerForToken(token: string) {
  // Calls the `createCustomer` method in the payment service
  this.paymentService
    .createCustomer(
      this.paymentService.GenerateCustomer(
        this.cardDetails.Name, // Name of the cardholder
        this.cardDetails.CardNumber, // Card number (masked or partial if passed)
        token // Token generated from Stripe
      )
    )
    .subscribe((data: any) => {
      // You can handle the response here, e.g., show success messages
    });
}


closeCardModal Method
This method closes the modal when the operation is complete or canceled.
closeCardModal = () => {
  this.modalRef?.hide(); // Hides the modal if `modalRef` exists
};

OnInit Method
This method used to initialize the vm's property and method
ngOnInit(): void {
  this.vm = {
    cardHolderName: null,  // Placeholder for the cardholder's name input field (starts with null)
    cardNumber: null,      // Placeholder for the credit card number (starts with null)
    expiryDate: null,      // Placeholder for the card's expiry date (starts with null)
    cvv: null,             // Placeholder for the CVV input field (starts with null)

    // Methods to open and close the card modal
    openCardModal: this.openCardModal,  // Reference to the method that opens the credit card modal
    closeCardModal: this.closeCardModal, // Reference to the method that closes the modal
  };
}


payment.service.ts
Generate an object using the generate customer, and for REST APIs, I am using the previous article.  Create customers with a tokenization block to generate customers based on tokens.
var apiUrl = ""; should be end point of the service.
 return {
    Email: Email,                     // Use the passed 'Email' parameter
    Name: Name,                       // Use the passed 'Name' parameter
    Phone: "1234567890",               // Replace with the actual phone number if needed
    Description: "Customer for test",  // Replace with an appropriate description if needed
    SourceID: token                    // The token passed from payment process
  };

public createCustomer(customer: any) {
  return this.apiHandler.post(apiUrl + "/create-customer-with-tokenisation", customer);
}
 public GeneratePaymentIntent(amount:number,offSession:boolean,paymentMethodID:string)
  {
    return {
      amount:amount,
      paymentMethodID: paymentMethodID,
      customerId: null,
      offSession:offSession
    };
  }
  public createPaymentIntent(paymentMethod:any)
  {
    return this.apiHandler.post(apiUrl + "/create-payment-intent",paymentMethod);
  }
  public createPayment(amount:any)
  {
    return this.apiHandler.post(apiUrl + "/create-payment-intent-without-paymentmethod",{ amount: amount });
  }

Pay using a card with the customer and payment method
Payment template used to pay amount using credit card.
<ng-template #paymentTemplate>
  <div class="modal-header">
    <h3 class="modal-title">Payment Information</h3>
  </div>
  <div class="modal-body">
    <div class="modal-content">
      <form (submit)="handlePayment($event)">
        <label>
          Without PaymentMethod:
          <ng-toggle  [(ngModel)]="isPaymentMethod" name="toggle" required />
        </label>
        <label>
          Card Holder Name:
          <input type="text" [(ngModel)]="cardHolderName" name="cardHolderName" required />
        </label>
        <label>
          Amount:
          <input type="text" [(ngModel)]="amount" name="amount" required />
        </label>
        <div id="pay-card-element" class="card-element"><!-- Stripe Card Element --></div>
        <div id="pay-card-errors" role="alert"></div>
        <div class="pay-modal-buttons">
          <button type="button" class="btn btn-failure" (click)="closeCardModal()">Cancel</button>
          <button type="submit" class="btn btn-success" [disabled]="loading">Pay {{ amount | currency }}</button>
        </div>
      </form>
    </div>
  </div>
</ng-template>

payment.component.ts
In payment component, variable declaration and constructor, Don't hard code publish key and secret key in html side try to get from server side.
// Declaring a dynamic object for storing values related to the modal and card details.
vm: any = {};

// Secret key for server-side Stripe API communication (should not be exposed on the client-side).
secretKey: string = "";

// Publishable key used for client-side Stripe communication.
publishKey: string = "";

// ViewChild decorator for referencing the modal template.
@ViewChild('paymentTemplate') paymentModal!: TemplateRef<any>;

// The modal reference to control its visibility and behavior.
modalRef!: BsModalRef;

// Stripe object initialized for Stripe.js integration (holds the Stripe instance).
private stripe: Stripe | null = null;

// The card element used for securely collecting card details.
private cardElement: any;

// States for loading, error messages, and cardholder's name.
public loading = false;
public error = '';
public cardHolderName = '';

// Amount to be processed for payment.
public amount = 1;

// A flag to track if it's a payment method or another type of payment action.
isPaymentMethod: boolean = true;

// Constructor injecting modal service for modal control and payment service for backend communication.
constructor(private modalService: BsModalService, private paymentService: PaymentService) {}

// ngOnInit lifecycle hook, currently not used but reserved for any initialization logic.
ngOnInit(): void {
  // Any initialization logic goes here if needed.
}


loadStripe() method

This method initializes Stripe Elements for securely collecting payment details.

  • loadStripe(this.publishKey): Asynchronously loads Stripe.js with the public key for client-side operations.
  • this.stripe.elements(): Creates an instance of Stripe Elements which provides a secure method to collect card information.
  • this.cardElement.mount('#pay-card-element'): Mounts the cardElement (a Stripe UI element) into the DOM, allowing users to enter credit card information.

async loadStripe() {
  // Load Stripe.js with the public key for client-side operations.
  this.stripe = await loadStripe(this.publishKey);

  // Check if Stripe was successfully initialized.
  if (this.stripe) {
    // Initialize Stripe Elements, which will be used to securely collect card details.
    const elements = this.stripe.elements();

    // Create a 'card' element for collecting card details, hiding postal code field.
    this.cardElement = elements.create('card', {
      hidePostalCode: true
    });

    // Mount the card element onto the HTML element with id 'pay-card-element' to display it on the page.
    this.cardElement.mount('#pay-card-element');
  } else {
    // Log an error if Stripe is not initialized properly.
    console.error('Stripe is not initialized');
  }
}

handlePayment() Method

This method handles the payment process, triggered when the user submits the payment form

  • event.preventDefault(): Prevents the form submission to allow custom handling via JavaScript.
  • this.paymentService.createPayment(this.amount): Calls a service to create a payment request with the backend, sending the payment amount.
  • this.stripe.confirmCardPayment(): Uses Stripe's API to confirm the payment using the card details entered by the user.
  • Error handling: Sets the error message if payment fails, and resets the loading state.
  • this.loading = false: Updates the loading state to stop the spinner once the payment process is finished.

async handlePayment(event: Event) {
  // Prevent default form submission behavior.
  event.preventDefault();

  // Set loading state to true to show a loading spinner or message.
  this.loading = true;

  // Check if Stripe is initialized before proceeding.
  if (this.stripe) {

    // Call the backend to create a payment, passing the amount to charge.
    this.paymentService.createPayment(this.amount).subscribe(async (data: any) => {

      // Ensure Stripe is initialized before proceeding with payment confirmation.
      if (this.stripe) {
        // Use Stripe to confirm the payment using the card details and secret key.
        const { error } = await this.stripe.confirmCardPayment(this.secretKey, {
          payment_method: {
            card: this.cardElement, // The card element that holds the user's card information.
            billing_details: {
              name: this.cardHolderName, // The name of the cardholder.
            },
          },
        });

        // Handle error if payment confirmation fails.
        if (error) {
          this.error = error.message ? error.message : 'An unknown error occurred';
          this.loading = false; // Reset loading state.
        } else {
          this.error = ''; // Clear any previous errors.
          this.loading = false; // Reset loading state.
        }
      } else {
        // Error handling if Stripe is not initialized.
        this.error = 'Stripe is not initialized';
        this.loading = false; // Reset loading state.
      }
    });

  } else {
    // Error handling if Stripe is not initialized.
    this.error = 'Stripe is not initialized';
    this.loading = false; // Reset loading state.
  }
}

openpaymentModal() Method
This method opens the payment modal where the user can enter payment details.
openpaymentModal = () => {
  // Show the modal using the BsModalService, passing the initial state with the modal data.
  this.modalRef = this.modalService.show(this.paymentModal, {
    animated: true, // Enable animations for the modal.
    keyboard: false, // Disable closing the modal via the keyboard.
    backdrop: 'static', // Prevent closing the modal by clicking outside.
    initialState: {
      vm: this.vm // Pass initial data (vm) to the modal component.
    }
  });

  // Call loadStripe to initialize Stripe and display the payment form inside the modal.
  this.loadStripe();
}


Full code snippet of payment.compoent.ts
import { trigger, state, style, transition, animate } from '@angular/animations';
import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
import { CreditcardComponent } from '../creditcard/creditcard.component';
import { PaymentService } from './payment.service';
import { loadStripe, Stripe } from '@stripe/stripe-js';

@Component({
  selector: 'app-payment',
  standalone: false,
  encapsulation:ViewEncapsulation.None,
  templateUrl: './payment.component.html',
  styleUrl: './payment.component.scss'

})
export class PaymentComponent implements OnInit{

  vm: any={};
  secretKey:string ="sk_test_51Q2TApRw3m8aFNMV8RYvLabAEmwYOwHtiNWXrP1pR88IlVeuItDrhoxbb80YcCm45BoN9ncle0Mw84wv74Vc4rV700Y0gwbdh7";
  publishKey:string ="pk_test_51Q2TApRw3m8aFNMVKcnlDcs0EH3pu0EuhPpKyYe99eaBXE2ex9Nd1aSkCi4dxZQ3jBZwjlyrUAU30RN8nuGth6dv00HGMKk8vH";


  @ViewChild('paymentTemplate') paymentModal !: TemplateRef<any> ;
  modalRef!: BsModalRef;
  private stripe: Stripe | null = null;
private cardElement: any;
public loading = false;
public error = '';
public cardHolderName = '';
public amount = 1;
 isPaymentMethod:boolean =true;
  constructor(private modalService: BsModalService,private paymentService:PaymentService)
  {

  }

  ngOnInit(): void {
    this.vm = {
      cardHolderName: null,
      cardNumber: null,
      expiryDate: null,
      cvv: null,
      openCardModal: this.openCardModal,
      closeCardModal: this.closeCardModal,
    };
  }

  openCardModal=()=> {
    this.modalRef = this.modalService.show(CreditcardComponent,{ animated: true,
      keyboard: false,
      backdrop : 'static',  initialState: {
        vm: this.vm
      }});
  this.modalRef.content.tokenGenerated.subscribe((token: string) => {
  this.createCustomerForToken(token);
  });
  }
  createCustomerForToken(token: string)
  {
    this.paymentService.createCustomer(this.paymentService.GenerateCustomer('', '', token)).subscribe((data: any) => {

    });
}
  closeCardModal=()=> {
    this.modalRef?.hide();
  }

async loadStripe() {
  this.stripe = await loadStripe(this.publishKey);
  if (this.stripe) {
    const elements = this.stripe.elements();
    this.cardElement = elements.create('card', {
      hidePostalCode: true
    });
    this.cardElement.mount('#pay-card-element');
  } else {
    console.error('Stripe is not initialized');
  }
}

async handlePayment(event: Event) {
  event.preventDefault();
  this.loading = true;

  if (this.stripe) {
    if(!this.isPaymentMethod){
      const { paymentMethod, error } = await this.stripe.createPaymentMethod({
        type: 'card',
        card: this.cardElement,
        billing_details: { name: this.cardHolderName },
      });

      if (error) {
        const displayError = document.getElementById('pay-card-errors');
      if (displayError && error.message) {
        displayError.textContent = error.message;
        this.loading = false;
      }
      } else {
        // Send payment method to backend

        this.makePayment(paymentMethod.id);
      }
    }
    else
    {
      this.paymentService.createPayment(this.amount).subscribe(async (data: any) => {

      if (this.stripe) {
        const { error } = await this.stripe.confirmCardPayment(this.secretKey, {
          payment_method: {
            card: this.cardElement,
            billing_details: {
              name: this.cardHolderName,
            },
          },
        });

        if (error) {
          this.error = error.message ? error.message : 'An unknown error occurred';
          this.loading = false;
        } else {
          this.error = '';
          this.loading = false;
        }
      } else {
        this.error = 'Stripe is not initialized';
        this.loading = false;
      }
    });
    }
  } else {
    this.error = 'Stripe is not initialized';
    this.loading = false;
  }

}

makePayment(paymentMethodId: string) {
  this.paymentService.createPaymentIntent(this.paymentService.GeneratePaymentIntent(this.amount, false, paymentMethodId)).subscribe((data: any) => {

  });
}
openpaymentModal=()=> {
  this.modalRef = this.modalService.show(this.paymentModal,{ animated: true,
    keyboard: false,
    backdrop : 'static',  initialState: {
      vm: this.vm
    }});
    this.loadStripe();
}
}


Sample UI

Conclusion
This approach enables the creation of a robust payment system integrated with Stripe, giving you the ability to scale and manage payments efficiently within your application. Attached is the sample code.



AngularJS Hosting Europe - HostForLIFE.eu :: Understanding Service, Factory, And Provider

clock December 6, 2024 07:39 by author Peter

In this section, we will endeavor to comprehend the most frequently confounding elements and usefulness of AngularJS Service, Factory, and Provider.


Basic Understanding
AngularJS Service, Factory, or Provider are all utilized for a similar reason; i.e., for making utility capacity that can be utilized all through the page with the infused capable question. Be that as it may, the way it is made and the way it is utilized are unique. Here, we should attempt to comprehend them unmistakably.

Service

Service is utilized for imparting utility capacities to the Service reference in the controller. Service is a singleton in nature, so for one's benefit, just a single case is made in the program and a similar reference is utilized all through the page. In the Service, we make work names as properties with this question.

Factory

The reason for Factory is likewise the same as Service, however for this situation, we make another protest and include works as properties of this question and toward the end, we restore this protest.

Provider

The reason for this is again the same, however, Provider yields $get work.

Presently let's endeavor to comprehend Service, Factory, and Provider by making and utilizing them.

How to make a Service, Factory, and a Provider. To start with, we have made a module.

Next is the Service creation where we have made a service utilizing the .benefit strategy. Notice that in the service, the two capacities "Hi" and "Total" have been made on "this" question.

At that point, we have made a factory strategy. Here, we have made the two capacities "Hi" and "Aggregate" on the new "factoryObject" and afterward we are restoring that protest toward the finish of the factory strategy.

In the last, we have made a provider utilizing the .provider technique in which we are restoring a protest having two capacities "Hi" and "Aggregate" to the $get work.

Create a module
var myApp = angular.module("myApp", []);

Create a service function
app.service("toDoService", function () {
    this.toDo = function () {
        return "Hi";
    };
    this.Add = function (x, y) {
        return x + y;
    };
});

Create a factory function

app.factory("toDoFactory", function () {

    var todofactoryObject = {};
    todofactoryObject.Hi = function () {
        return "Hi";
    };
    todofactoryObject.Add = function (x, y) {
        return x + y;
    };
    return todofactoryObject;
});

Create a provider function
app.provider("todoProvider", function() {
    this.$get = function() {
        return {
            Hi: function() {
                return "Hi";
            },
            Add: function(x, y) {
                return x + y;
            }
        };
    };
});

Notice that regardless of that, every one of the three has similar capacities "Hi" and "Whole" having the same usefulness, however, the method for presentation is unique. This is the real contrast between Service, Factory, and Provider.

Utilizing Service, Factory, and Provider

To utilize them basically infuse those into the controller definition and begin utilizing those references to call capacities "Hi" and "Total" characterized in them.

Beneath the code bit it is truly straightforward. We are essentially calling "Hi" and "Whole" capacities characterized by particular Service, Factory, and Provider reference objects.
myApp.controller("todoController", function($scope, todoService, todoFactory, todoProvider) {
    // service call
    $scope.todoService = function() {
        $scope.resultt = todoService.Hi();
    };
    $scope.addFunc = function() {
        $scope.result = todoService.Add(4, 5);
    };
    // factory call
    $scope.todoFactory = function() {
        $scope.result = todoFactory.Hi();
    };
    $scope.AddFactory = function() {
        $scope.result = todoFactory.Add(4, 5);
    };
    // provider call
    $scope.todoProvider = function() {
        $scope.result = todoProvider.Hi();
    };
    $scope.addProvider = function() {
        $scope.result = todoProvider.Add(4, 5);
    };
});

<div ng-app="app" ng-controller="todoController">
    <h1>Service</h1>
    <button ng-click="todoService()">hi</button>
    <button ng-click="addService()">add</button>
    <div ng-bind="result"></div>

    <h1>Factory</h1>
    <button ng-click="todoFactory()">hi f</button>
    <button ng-click="addFactory()">add f</button>
</div>

<h1>Provider</h1>
<button ng-click="todoProvider()">hi p</button>
<button ng-click="AddProvider()">add p</button>
<div ng-bind="result"></div>
</div>


Summary
There is no distinction regarding yield/usefulness between Service, Factory, and Provider, however, the distinction comes when we attempt to make them. Every one of the three has diverse methods for creation and capacity executions.



AngularJS Hosting Europe - HostForLIFE.eu :: Change Style Dynamically in Various Ways Using AngularJS

clock November 20, 2024 09:53 by author Peter

This article explains how to change the style dynamically in various ways using AngularJS. AngularJS provides three different ways to change the style dynamically. People always search for methods to change their style dynamically, AngularJS can solve their problems in any of three ways.


Step 1. First of all, you need to add an external Angular.js file to your application, you can go to the AngularJS official site or download my source code and then fetch it or you can click on this link to download it: ANGULARJS.

After downloading the external file you need to add this file to the Head section of your application as in the following.
<head runat="server">
    <title></title>
    <script src="angular.min.js"></script>
</head>

Step 2. Now I will create some simple CSS classes to be applied dynamically, or you can say at runtime.
<style>
    .changeColor {
        color: blue;
    }
    .changeSize {
        font-size: 30px;
    }
    .italic {
        font-style: italic;
    }
</style>


Here I have created three classes, namely changeColor, changeSize, and italic. The first CSS Class is used for changing the color of the text to Blue, the second is for changing the text size and the last one is for making the Text Italic.

Now we have created the classes to be applied, we need to work on the ViewModel or design part of our application where simple coding needs to be done to apply the change in CSS.

First Method
In the first method, objects of the classes are created that are called using the ng-model, let's see this by implementing it in our application as in the following.
<p ng-class="{changeColor: Color, changeSize: Size, italic: Italic}">
    Changes Will be Seen in Me
</p>
<input type="checkbox" ng-model="Color"> Change Color (apply "changeColor" class)<br>
<input type="checkbox" ng-model="Size"> Change Size (apply "changeSize" class)<br>
<input type="checkbox" ng-model="Italic"> Make it Italic (apply "italic" class)


Here I have applied the CSS to a <p> Tag, and classes are applied using the ng-class directive, here in the ng-class you can see that I have created an object of each class such as for changeColor, "Color" is created. After this I applied the binding using the ng-model, I created three checkboxes and in each checkbox ng-model is applied, each ng-model provides the binding using the objects created in the ng-class.

So, If we check the first checkbox then the color of the text will change to Blue, similarly, if we check the second and third checkboxes then the text size and its style will change.

Let's see the output.

Output
As I run the application and check the checkboxes then this type of output will be seen.

Second Method
Now, I will show you the Second Method of applying the CSS dynamically. In this method, class names will be called to Apply the CSS.
<p ng-class="style">I Will Show Second Method</p>
<input type="text" ng-model="style" placeholder="Type: changeSize changeColor italic">


Here you can see that in the ng-class I have passed the complete style, since I have passed the style in ng-class it will call all the classes that are created in that style. Then I created a TextBox to which the style is bound using the ng-model, whatever name is provided in the TextBox, the same style will be applied to the text provided through the <p> tag. If the the name provided in the TextBox doesn't match the CSS Class than nothing will happen to the text and nothing will be applied.

Let's see the output.

Output


Third Method
Now, I will show you the Third Method for applying the CSS dynamically.

In this method, CSS classes will be called in the order they were created.
<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
<input ng-model="style1" placeholder="Type: changeSize, changeColor or italic"><br>
<input ng-model="style2" placeholder="Type: changeSize, changeColor or italic"><br>
<input ng-model="style3" placeholder="Type: changeSize, changeColor or italic"><br>

Here you can see that I have applied the CSS to the <p> tag using the ng-class but this time I have called the classes by the order they were created, style1 is automatically bound to the first class, similarly style2 and style3 are bound to the second and third class. Then I created three Textboxes that are bound to style 1, 2, and 3 separately, whatever CSS name is provided in these textboxes, the same CSS class will be applied to the Text provided in the <p> tag.

Let's see the output.

Output

The complete code of this application is as follows.
<html ng-app xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title></title>
    <script src="angular.min.js"></script>
    <style>
        .changeColor {
            color: blue;
        }
        .changeSize {
            font-size: 30px;
        }
        .italic {
            font-style: italic;
        }
    </style>
</head>
<body>
    <p ng-class="{changeColor: Color, changeSize: Size, italic: Italic}">Changes Will be Seen in Me</p>
    <input type="checkbox" ng-model="Color"> Change Color (apply "changeColor" class)<br>
    <input type="checkbox" ng-model="Size"> Change Size (apply "changeSize" class)<br>
    <input type="checkbox" ng-model="Italic"> Make it Italic (apply "italic" class)
    <hr>
    <p ng-class="style">I Will Show Second Method</p>
    <input type="text" ng-model="style" placeholder="Type: changeSize changeColor italic">
    <hr>
    <p ng-class="[stle1, stle2, stle3]">I Will Show Third Method</p>
    <input ng-model="stle1" placeholder="Type: changeSize, changeColor or italic"><br>
    <input ng-model="stle2" placeholder="Type: changeSize, changeColor or italic"><br>
    <input ng-model="stle3" placeholder="Type: changeSize, changeColor or italic"><br>
</body>
</html>



AngularJS Hosting Europe - HostForLIFE.eu :: RxJS Operator Essentials: Map, Tap, Filter, and More

clock November 14, 2024 09:21 by author Peter

If you've been working with Angular for a while and find some RxJS pipeable operators slightly confusing, we will explore these familiar operators here.


Great, let’s dive into this exciting topic.

What is an RxJS Operator?
RxJS ships with more than 100 operators.
These operators are one of the building blocks of RxJS.
It is handy for manipulating (process or transform) streams, which are data sequences over time.
Remember that operators are functions, and there are two types of operators.

Let’s see them one by one.

RxJS map Operator

The map function in RxJS is an operator that transforms each emitted value from an observable based on a provided function, returning a new observable with modified values.
Let us see an example.

Creation Operators
We won’t be exploring the creation operator, but it is essential to give an overview. Creation operators are functions that can create an Observable with some expected predefined behavior or by joining other Observables.

Here are some familiar creation operators: of, from, fromEvent, and range.

Let’s have one example.

import { Component, OnDestroy, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { from, Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'RxJSOperators';
  subFrom$!: Subscription;

  public ngOnInit(): void {
    this.subFrom$ = from([2, 4, 6, 8]).subscribe({
      next: (item) => console.log(item),
      error: (err) => console.log(err),
      complete: () => console.log('completed')
    });
  }

  public ngOnDestroy(): void {
    this.subFrom$.unsubscribe();
  }
}

From our code example, we have seen that inside the ngOnInit, the from([2,4,6,8]) method creates an observable that emits each number in the array sequentially.

The subscribe method attaches an observer to this observable.

  • First, next, which logs each item emitted.
  • Second, error logs any errors if there’s one.
  • Third, complete which logs “completed” when the observable completes.

Although this is not the main topic of our article, it is a good thing to have an idea.

Pipeable Operators

Pipeable operators are the kind that can be piped to Observables.

Let’s see the syntax below.

observableInstance.pipe(operator);
or
observableInstance.pipe(operatorFactory());


Essentially, the operator and operatorFactory behave as a single method in RxJS. However, there’s a difference between the two. Operator factories are functions that accept parameters to configure their behavior and immediately return operator functions.

Operator functions are the results of these calls (configured functions), which can then transform the observable’s data inside the .pipe().

Let’s see code examples of pipeable operators in the next sections.

RxJS map Operator

The map function in RxJS is an operator that transforms each emitted value from an observable based on a provided function, returning a new observable with modified values.

Let us see an example.


import { Component, OnDestroy, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { from, map, Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'RxJSOperators';
  subCustomer1!: Subscription;

  public ngOnInit(): void {
    const customer$ = from([
      { id: 1, jerseyNumber: 23, age: 61, fullName: "Michael Jordan" },
      { id: 2, jerseyNumber: 23, age: 43, fullName: "Lebron James" },
      { id: 3, jerseyNumber: 24, age: 89, fullName: "Kobe Bryant" }
    ]);

    this.subCustomer1 = customer$
      .pipe(
        map(item => ({
          ...item, shoe: "Nike"
        }))
      )
      .subscribe((result) => console.log(result, "Added Nike shoes"));
  }

  public ngOnDestroy(): void {
    this.subCustomer1.unsubscribe();
  }
}

From our example, the map operator transforms each customer object by adding a new property, shoe, with a value of "Nike". Then, each customer object is spread (...item) to retain the existing properties while adding the shoe property, resulting in a new object.

Finally, log the result to the console with a message saying, "Added Nike shoes". Let’s see the output below.

RxJS tap Operator
The tap function in RxJS is an operator that allows you to perform side effects, like logging or debugging, on each emitted value without altering the observable’s values.

Let us see an example.
import {Component, OnDestroy, OnInit} from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {filter, from, map, Subscription, tap} from 'rxjs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements  OnInit, OnDestroy {
  title = 'RxJSOperators';
  subCustomer2!: Subscription;
  public ngOnInit() {
    const customer$ = from([
              { id: 1, jerseyNumber: 23, age: 61, fullName: "Michael Jordan"},
              { id: 2, jerseyNumber: 23, age: 43, fullName: "Lebron James"},
              { id: 3, jerseyNumber: 24, age: 89, fullName: "Kobe Bryant"}
               ]);

    this.subCustomer2 = customer$.pipe(
      tap(item => console.log(item, "Debugging this item before putting Nike shoes")),
      map(item => ({
       ...item, shoe: "Nike"
      })),
      tap(item => console.log(item, "Debugging this item after putting Nike shoes")))
      .subscribe((result) => { console.log(result, "Final result"); });
  }
  public ngOnDestroy() {
    this.subCustomer2.unsubscribe();
  }
}


The first tap operator logs each customer object to the console before transforming. This is useful for debugging, allowing you to inspect the original data emitted by the customer.

Each item is logged with the message "Debugging this item before putting Nike shoes". The map operator transforms each customer object by adding a new property, shoe, with a value of "Nike".

As discussed in the previous example, this operation uses object spread (...item) to retain the original properties while adding the new shoe property, resulting in a modified object for each customer.

The second tap operator logs each transformed customer object, allowing you to verify that the shoe property has been successfully added.

Each item is logged with the message "Debugging this item after putting Nike shoes".

Finally, the subscribe method listens to the transformed observable.

For each item, it logs the final transformed result along with the "Final result" to indicate the completion of the transformation.

Let’s see the output below.

 

RxJS filter Operator
The filter function in RxJS is an operator that emits only the values from an observable that passes a specified condition, effectively filtering out values that don’t meet the criteria.

Let us see an example.
import {Component, OnDestroy, OnInit} from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {filter, from, map, Subscription, tap} from 'rxjs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements  OnInit, OnDestroy {
  title = 'RxJSOperators';
  subCustomer3!: Subscription;

  public ngOnInit() {

    const customer$ = from([
               { id: 1, jerseyNumber: 23, age: 61, fullName: "Michael Jordan"},
               { id: 2, jerseyNumber: 23, age: 43, fullName: "Lebron James"},
               { id: 3, jerseyNumber: 24, age: 89, fullName: "Kobe Bryant"}
               ]);

    this.subCustomer3 = customer$.
                             pipe(filter( item => item.jerseyNumber === 23)).
                              subscribe((result) => { console.log(result); });

  }

  public ngOnDestroy() {

    this.subCustomer3.unsubscribe();
  }
}


The filter(item => item.jerseyNumber === 23) filters the data, allowing only objects where jerseyNumber is 23 to pass through the stream. In this example, Michael Jordan and LeBron James meet this condition, while Kobe Bryant does not.

Let’s see the output below.

RxJS take Operator
The take function in RxJS emits only the first specified number of values from an observable and then completes.

Let us see an example.
import {Component, OnDestroy, OnInit} from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {filter, from, map, Subscription, take, takeLast, tap} from 'rxjs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements  OnInit, OnDestroy {
  title = 'RxJSOperators';
  subCustomer4!: Subscription;

  public ngOnInit() {

    const customer$ = from([
               { id: 1, jerseyNumber: 23, age: 61, fullName: "Michael Jordan"},
               { id: 2, jerseyNumber: 23, age: 43, fullName: "Lebron James"},
               { id: 3, jerseyNumber: 24, age: 89, fullName: "Kobe Bryant"}
               ]);

    this.subCustomer4 = customer$.
    pipe(
        filter( item => item.jerseyNumber === 23),
        take(1)
        ).
    subscribe((result) => { console.log(result); });

  }

  public ngOnDestroy() {

    this.subCustomer4.unsubscribe();
  }
}

The filter(item => item.jerseyNumber === 23), filters the data to only include customers with a jerseyNumber of 23. This will allow only Michael Jordan and LeBron James through the stream. While take(1) operator limits the stream to emit only the first item that passes the filter condition.

After emitting this first item, it automatically completes the Observable.

Let’s see the output below.

RxJS takeLast Operator
The takeLast function emits only the last specified number of values after the source observable completes.

Let us see an example.
import {Component, OnDestroy, OnInit} from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {filter, from, map, Subscription, take, takeLast, tap} from 'rxjs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements  OnInit, OnDestroy {
  title = 'RxJSOperators';
  subCustomer5!: Subscription;

  public ngOnInit() {

    const customer$ = from([
               { id: 1, jerseyNumber: 23, age: 61, fullName: "Michael Jordan"},
               { id: 2, jerseyNumber: 23, age: 43, fullName: "Lebron James"},
               { id: 3, jerseyNumber: 24, age: 89, fullName: "Kobe Bryant"}
               ]);

    this.subCustomer5 = customer$.
      pipe(takeLast(1)).
      subscribe((result) => { console.log(result); });

  }
  public ngOnDestroy() {

    this.subCustomer5.unsubscribe();
  }
}


The take last operator is used to emit only the last item from the Observable. In this example, takeLast(1) will only emit the very last item in the list—{ id: 3, jersey number: 24, age: 89, fullName: "Kobe Bryant" }—and then complete the Observable.

Summary
In this post, we have discussed RxJS operators and shown the types of operators, such as pipeable and creation operators. We have seen examples of map, tap, filter, take, and takeLast operators. I hope you have enjoyed this article as much as I have enjoyed writing it. Stay tuned for more information, and don't forget to download the attached project source code. If you run the project source code, don’t forget to command “npm install.” Until next time, happy programming, and good luck with your career!



About HostForLIFE.eu

HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes.

We have offered the latest Windows 2016 Hosting, ASP.NET Core 2.2.1 Hosting, ASP.NET MVC 6 Hosting and SQL 2017 Hosting.


Tag cloud

    Sign in