We will look at two key features of working with Node.js and Nodemon in this article. First, we'll walk you through the process of installing Nodemon, a critical tool for developers aiming to speed up the development of Node.js apps. By understanding how to install Nodemon, you can use its power to automatically restart your server anytime code changes. You will save time and effort as a result of this.

The "Nodemon command is not recognized" terminal error is a common and vexing issue for developers. We'll investigate the core causes of this problem and provide you with a clear, step-by-step plan for resolving it. Whether you're a seasoned Node.js developer or just getting started, mastering these core skills will result in a more efficient and successful development process.

node -v

Step 2. Open Your Terminal
To install Nodemon globally, use the following command.
npm install -g nodemon

Step 3. Verify Installation
You can use the next command to verify that Nodemon has been correctly installed.
nodemon -v

How to fix the nodemon command that is not recognized in the terminal for Node.js?

The "Nodemon command is not recognized" error can be annoying, but have no worry — it's a common problem with a simple fix. In this section, we'll walk you through the procedures to fix the issue and set up Nodemon on your machine.

Step 1. Install npm
To install npm, use the following command.
npm install

Step 2. Update package.json file
To update package.json, use the following scripts.
"scripts": {
    "server": "nodemon index.js"
  },

Step 3. Run project
To run the project, use the following commands.
npm run server

Conclusion
Installing Nodemon and fixing the typical "Nodemon command is not recognized" problem are two essential components of Node.js development that have been covered in this article. Nodemon is a useful tool for streamlining development efficiency by automatic server restarts following code changes. To ensure you can exploit Nodemon's features to the fullest, the "How to Install Nodemon in Node.js" section offers a detailed tutorial. The section titled "How to Fix Nodemon Command Is Not Recognized in the Terminal for Node.js" also addresses the annoying "Nodemon command is not recognized" error and offers workable alternatives. With these tips, your Node.js development process will go more smoothly and effectively, allowing you to concentrate on writing code while Nodemon takes care of the rest.

In Angular, the State Management pattern is critical for managing complicated application states. NgRx (Redux-inspired), Akita, and Ngxs are some of the most popular state management libraries. Here's an example of how to use NgRx in Angular for state management:
NgRx should be installed.

To install NgRx, open your Angular project in a terminal and perform the following command:

Define your Actions
To define the activities that can be dispatched, create action files. Create a file called user.actions.ts with the following code:

import { createAction, props } from '@ngrx/store';
import { User } from './user.model';
export const loadUsers = createAction('[User] Load Users');
export const loadUsersSuccess = createAction('[User] Load Users Success', props<{ users: User[] }>());
export const loadUsersFailure = createAction('[User] Load Users Failure', props<{ error: string }>());

Make Reducers
Create reducer files to specify how the state changes as a result of actions. Create a file called user.reducer.ts with the following code:

import { createReducer, on } from '@ngrx/store';
import { User } from './user.model';
import * as UserActions from './user.actions';
export interface UserState {
  users: User[];
  loading: boolean;
  error: string | null;
}
const initialState: UserState = {
  users: [],
  loading: false,
  error: null,
};
export const userReducer = createReducer(
  initialState,
  on(UserActions.loadUsers, (state) => ({ ...state, loading: true, error: null })),
  on(UserActions.loadUsersSuccess, (state, { users }) => ({ ...state, users, loading: false })),
  on(UserActions.loadUsersFailure, (state, { error }) => ({ ...state, loading: false, error }))
);

Define Selectors
Create selector files to extract specific data from the state. For example, create a file named user.selectors.ts with the following code:

import { createFeatureSelector, createSelector } from '@ngrx/store';
import { UserState } from './user.reducer';
export const selectUserState = createFeatureSelector<UserState>('user');
export const selectUsers = createSelector(selectUserState, (state) => state.users);
export const selectLoading = createSelector(selectUserState, (state) => state.loading);
export const selectError = createSelector(selectUserState, (state) => state.error);

Use NgRx in a Component

Create a component that utilizes NgRx for state management. For example, create a file named user.component.ts with the following code:
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { User } from './user.model';
import * as UserActions from './user.actions';
import { selectUsers, selectLoading, selectError } from './user.selectors';
@Component({
  selector: 'app-user',
  template: `
    <h2>User Component</h2>
    <div *ngIf="loading">Loading...</div>
    <div *ngIf="error">{{ error }}</div>
    <ul>
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `,
})
export class UserComponent implements OnInit {
  users$: Observable<User[]>;
  loading$: Observable<boolean>;
  error$: Observable<string>;
  constructor(private store: Store) {}
  ngOnInit(): void {
    this.users$ = this.store.select(selectUsers);
    this.loading$ = this.store.select(selectLoading);
    this.error$ = this.store.select(selectError);
    this.store.dispatch(UserActions.loadUsers());
  }
}

Build and run the application: Use the following command to build and serve the Angular application:

ng serve
Your application will be accessible at http://localhost:4200.

In this example, NgRx is used for state management. Actions are dispatched to trigger state changes, reducers define how the state changes, and selectors are used to extract specific data from the state. The UserComponent subscribes to the state using NgRx's select method and displays the data in the template.

By following the State Management pattern with NgRx or other state management libraries, you can centralize and manage complex application states efficiently, leading to better code organization, maintainability, and scalability.

Hello, my friend. I am thrilled to present my debut article.
How can we transfer data from one component to another via service?

Create a service file first.
command- ng g s <service_name>

Step 2. To share data on the click of a button.
<button (click)="sendDataToReceiver()">Send Data</button>

Step 3. Import service in the ts file.
private dataService: DataService

Step 4. Method call.
this.yourServicename.sendData("Hello from Sender");

Step 5. Import your service to send data and get Data.
private dataSubject = new Subject<string>();

sendData(data: string) {
  this.dataSubject.next(data);
}

getData() {
  return this.dataSubject.asObservable();
}

Step 6. Finally, get Data from the Service.
Import your service and create a variable.
ngOnInit() {
  this.serviceName.getData().subscribe(data => {
    this.receivedData = data;
  });
}

WAV stands for "Waveform Audio File Format." It is the industry standard for storing an audio bitstream on a computer. The WAV format, created by IBM and Microsoft, is based on the Resource Interchange File Format (RIFF) and is extensively used for storing uncompressed audio data on Windows PCs. WAV files retain great quality and might be big since they contain extensive audio information.

You can utilize the native "MediaRecorder" in an Angular application to record audio from a microphone.

The Web API's "MediaRecorder" interface allows you to effortlessly record media. It is intended to record audio or video directly from the browser, making media stream capture easier.

MediaRecorder's main features and capabilities are as follows:

It is possible to record audio and video streams directly from the user's camera and microphone using Media Capture.

Stream Recording: It records media streams in segments that can be separately processed or saved.

Different Media Formats: Depending on the browser and system, it supports a variety of audio and video formats.

It provides multiple event handlers, such as ondataavailable, onstart, onstop, onerror, and others, to handle various elements of recording.

Configurable: You can customize the MediaRecorder by changing settings such as the MIME type of the recording, the bit rate, and so on.

Although "MediaRecorder" is commonly supported in recent browsers, the precise codecs and formats supported may differ between browsers. It is always a good idea to test the browser's compatibility and capabilities at runtime.

The "MediaRecorder" interface makes it easier to record audio and video in online applications, giving developers a powerful tool for capturing and working with media streams directly in the browser.

MediaRecorder takes audio in webm format by default. You must convert the recorded audio buffer to WAV format if you want a genuine WAV file rather than a webm file with a.wav extension. 

Using the Angular CLI (Command Line Interface), create an Angular 16 application.

To create a new Angular application, use the command below.  

Adding a New AudioRecorder
We can proceed by selecting the default Routing and Styling choices.  

Make a class to convert an audio buffer to WAV format.

audio-helper.ts

export function bufferToWave(abuffer:any, len:number) {
    let numOfChan = abuffer.numberOfChannels,
      length = len * numOfChan * 2 + 44,
      buffer = new ArrayBuffer(length),
      view = new DataView(buffer),
      channels = [],
      i, sample,
      offset = 0,
      pos = 0;

    // write WAVE header
    setUint32(0x46464952);                         // "RIFF"
    setUint32(length - 8);                         // file length - 8
    setUint32(0x45564157);                         // "WAVE"

    setUint32(0x20746d66);                         // "fmt " chunk
    setUint32(16);                                 // length = 16
    setUint16(1);                                  // PCM (uncompressed)
    setUint16(numOfChan);
    setUint32(abuffer.sampleRate);
    setUint32(abuffer.sampleRate * 2 * numOfChan); // avg. bytes/sec
    setUint16(numOfChan * 2);                      // block-align
    setUint16(16);                                 // 16-bit (hardcoded in this demo)

    setUint32(0x61746164);                         // "data" - chunk
    setUint32(length - pos - 8);                   // chunk length

    // write interleaved data
    for (i = 0; i < abuffer.numberOfChannels; i++)
      channels.push(abuffer.getChannelData(i));

    while (pos < length) {
      for (i = 0; i < numOfChan; i++) {             // interleave channels
        sample = Math.max(-1, Math.min(1, channels[i][offset])); // clamp
        sample = (0.5 + sample < 0 ? sample * 32768 : sample * 32767)|0; // scale to 16-bit signed int
        view.setInt16(pos, sample, true);          // write 16-bit sample
        pos += 2;
      }
      offset++                                     // next source sample
    }

    // create Blob
    return new Blob([buffer], { type: "audio/wav" });

    function setUint16(data:any) {
      view.setUint16(pos, data, true);
      pos += 2;
    }

    function setUint32(data:any) {
      view.setUint32(pos, data, true);
      pos += 4;
    }
  }

We can create an Audio Recording service and integrate the helper function in the service.
ng g s AudioRecording

audio-recording-service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { bufferToWave } from './audio-helper';

@Injectable({
  providedIn: 'root'
})
export class AudioRecordingService {
  private chunks: any[] = [];
  private mediaRecorder: any;
  private audioContext: AudioContext = new AudioContext();
  private audioBlobSubject = new Subject<Blob>();

  audioBlob$ = this.audioBlobSubject.asObservable();

  async startRecording() {
    if (this.audioContext.state === 'suspended') {
      await this.audioContext.resume();
    }

    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    this.mediaRecorder = new MediaRecorder(stream);
    this.mediaRecorder.ondataavailable = (event: any) => this.chunks.push(event.data);
    this.mediaRecorder.start();
  }

  async stopRecording() {
    if (this.mediaRecorder) {
      this.mediaRecorder.onstop = async () => {
        const audioData = await new Blob(this.chunks).arrayBuffer();
        const audioBuffer = await this.audioContext.decodeAudioData(audioData);
        const wavBlob = bufferToWave(audioBuffer, audioBuffer.length);
        this.audioBlobSubject.next(wavBlob);
        this.chunks = [];
      };

      this.mediaRecorder.stop();
    }
  }
}

Update the component html file with code below.  

app.component.html

<div class="content" role="main">

  <div class="row justify-content-center pt-2 pb-2">
    <button title="Click here to start recording action" class="btn-mic w-auto" (click)="startRecording()"
      *ngIf="!isRecording" style="margin-right: 3px;">
      <img src="../../assets/mic.png" />
    </button>
    <button title="Click here to stop recording" class="btn-stop w-auto" (click)="stopRecording()" *ngIf="isRecording"
      style="margin-right: 3px;">
      <img src="../../assets/stop.png" />
    </button>
  </div>
  <audio #audioPlayer controls style="margin: 10px;"></audio>
  <a *ngIf="audioURL" [href]="audioURL" download="recorded_audio.wav">Download last reecorded Audio</a>
</div>

Update the component class file with code below.

app.component.ts
import { ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { AudioRecordingService } from './audio-recording.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  isRecording = false;
  audioURL: string | null = null;
  @ViewChild('audioPlayer') audioPlayer!: ElementRef<HTMLAudioElement>;

  constructor(private audioRecordingService: AudioRecordingService, private cd: ChangeDetectorRef) { }

  ngOnInit() {
    this.audioRecordingService.audioBlob$.subscribe(blob => {
      this.audioURL = window.URL.createObjectURL(blob);
      this.audioPlayer.nativeElement.src = this.audioURL;
      this.cd.detectChanges();
    });
  }

  startRecording() {
    this.isRecording = true;
    this.audioRecordingService.startRecording();
  }

  stopRecording() {
    this.isRecording = false;
    this.audioRecordingService.stopRecording();
  }
}

Update the component stylesheet with code below.

app.component.css

:host {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 14px;
    color: #333;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 8px 0;
}

p {
    margin: 0;
}

.spacer {
    flex: 1;
}

.toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    background-color: #1976d2;
    color: white;
    font-weight: 600;
}

.toolbar img {
    margin: 0 16px;
}

.toolbar #twitter-logo {
    height: 40px;
    margin: 0 8px;
}

.toolbar #youtube-logo {
    height: 40px;
    margin: 0 16px;
}

.toolbar #twitter-logo:hover,
.toolbar #youtube-logo:hover {
    opacity: 0.8;
}

.content {
    display: flex;
    margin: 10px auto 10px;
    padding: 0 16px;
    max-width: 960px;
    flex-direction: column;
    align-items: center;
}

svg.material-icons {
    height: 24px;
    width: auto;
}

svg.material-icons:not(:last-child) {
    margin-right: 8px;
}

.card svg.material-icons path {
    fill: #888;
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
}

.card {
    all: unset;
    border-radius: 4px;
    border: 1px solid #eee;
    background-color: #fafafa;
    height: 40px;
    width: 200px;
    margin: 0 8px 16px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in-out;
    line-height: 24px;
}

.card-container .card:not(:last-child) {
    margin-right: 0;
}

.card.card-small {
    height: 16px;
    width: 168px;
}

.card-container .card:not(.highlight-card) {
    cursor: pointer;
}

.card-container .card:not(.highlight-card):hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
}

.card-container .card:not(.highlight-card):hover .material-icons path {
    fill: rgb(105, 103, 103);
}

.card.highlight-card {
    background-color: #1976d2;
    color: white;
    font-weight: 600;
    border: none;
    width: auto;
    min-width: 30%;
    position: relative;
}

.card.card.highlight-card span {
    margin-left: 60px;
}

svg#rocket {
    width: 80px;
    position: absolute;
    left: -10px;
    top: -24px;
}

svg#rocket-smoke {
    height: calc(100vh - 95px);
    position: absolute;
    top: 10px;
    right: 180px;
    z-index: -10;
}

a,
a:visited,
a:hover {
    color: #1976d2;
    text-decoration: none;
}

a:hover {
    color: #125699;
}

.terminal {
    position: relative;
    width: 80%;
    max-width: 600px;
    border-radius: 6px;
    padding-top: 45px;
    margin-top: 8px;
    overflow: hidden;
    background-color: rgb(15, 15, 16);
}

.terminal::before {
    content: "\2022 \2022 \2022";
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    background: rgb(58, 58, 58);
    color: #c2c3c4;
    width: 100%;
    font-size: 2rem;
    line-height: 0;
    padding: 14px 0;
    text-indent: 4px;
}

.terminal pre {
    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
    color: white;
    padding: 0 1rem 1rem;
    margin: 0;
}

.circle-link {
    height: 40px;
    width: 40px;
    border-radius: 40px;
    margin: 8px;
    background-color: white;
    border: 1px solid #eeeeee;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: 1s ease-out;
}

.circle-link:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}

footer {
    margin-top: 8px;
    display: flex;
    align-items: center;
    line-height: 20px;
}

footer a {
    display: flex;
    align-items: center;
}

.github-star-badge {
    color: #24292e;
    display: flex;
    align-items: center;
    font-size: 12px;
    padding: 3px 10px;
    border: 1px solid rgba(27, 31, 35, .2);
    border-radius: 3px;
    background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
    margin-left: 4px;
    font-weight: 600;
}

.github-star-badge:hover {
    background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
    border-color: rgba(27, 31, 35, .35);
    background-position: -.5em;
}

.github-star-badge .material-icons {
    height: 16px;
    width: 16px;
    margin-right: 4px;
}

svg#clouds {
    position: fixed;
    bottom: -160px;
    left: -230px;
    z-index: -10;
    width: 1920px;
}

.btn-mic,
.btn-stop {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.btn-mic img,
.btn-stop img {
    width: 30px;
    opacity: 0.5;
}

/* Responsive Styles */
@media screen and (max-width: 767px) {

    .card-container>*:not(.circle-link),
    .terminal {
        width: 100%;
    }

    .card:not(.highlight-card) {
        height: 16px;
        margin: 8px 0;
    }

    .card.highlight-card span {
        margin-left: 72px;
    }

    svg#rocket-smoke {
        right: 120px;
        transform: rotate(-5deg);
    }
}

@media screen and (max-width: 575px) {
    svg#rocket-smoke {
        display: none;
        visibility: hidden;
    }
}

We can run the application with SSL enabled.

ng serve --ssl
Open your browser and navigate to https://localhost:4200/. You should be able to start and stop recording, and then download the recorded audio file.
Always keep in mind that accessing microphone requires user permissions. Make sure we test this functionality in a secure context (like https:// or localhost) to ensure that the browser does not block access to the microphone due to security constraints.

The recording will begin after you press the start button, and the stop button will replace the start button. After you click the stop button, an audio preview will appear, and you can click the download button to get the converted audio in WAV format. 

When using Angular CLI in a PowerShell environment, you may encounter script execution policy problems that block script execution. For security considerations, PowerShell's default execution policy is frequently configured to a level that restricts script execution. This article will walk you through the process of fixing PowerShell script execution policy problems that are particular to the Angular CLI. Resolving the PowerShell Script Execution Policy Error for Angular CLI Step by Step.

1. Launch PowerShell as an administrator.
Start PowerShell with administrative privileges to resolve the script execution policy problem. Click the PowerShell icon and choose "Run as Administrator."

2. Investigate the Current Execution Policy
To investigate the current execution policy, use the following command.

PowerShell function
Get-ExecutionPolicy $executionPolicy
"Current Execution Policy: $executionPolicy" writes out.

1. Launch PowerShell as an administrator.
Start PowerShell with administrative privileges to resolve the script execution policy problem. Click the PowerShell icon and choose "Run as Administrator."

2. Investigate the Current Execution Policy
To investigate the current execution policy, use the following command.

Get-ExecutionPolicy $executionPolicy
"Current Execution Policy: $executionPolicy" writes out.

3. Change the Execution Policy
If the current execution policy is too restrictive (e.g., "Restricted"), consider changing it to a more permissive setting like `RemoteSigned.`
Set-ExecutionPolicy RemoteSigned

Confirm the change by selecting 'Y' (Yes) when prompted.

4. Run Your Angular CLI Command Again
Retry your Angular CLI command after modifying the execution policy.

Angular Terminal
ng generate component test

5. Restore the Original Execution Policy (Optional)
For security reasons, you can revert to the original execution policy after completing Angular CLI tasks.

Powershell
Set-ExecutionPolicy Restricted

Confirm the change by selecting 'Y' (Yes) when prompted.
By adopting the `RemoteSigned` execution policy, you allow the execution of locally created scripts while mandating that downloaded scripts be signed by a trusted publisher.
This approach balances security and convenience, making it suitable for development purposes.
If you encounter any issues or have further questions, feel free to let me know, and I'll be glad to assist.

Thank you for reading, and I hope this post has helped provide you with a better understanding of How to Resolve PowerShell Script Execution Policy Error for Angular CLI.
"Keep coding, keep innovating, and keep pushing the boundaries of what's possible. Happy Coding.

What are Angular Signals?
Angular Signals is a new feature in Angular 16 that allows you to develop reactive code in a new way. Signals are a reactive primitive, which implies they can alert their dependents when their value changes. This makes them suitable for use in reactive applications, where it is critical to be able to automatically adjust the UI in reaction to data changes.

To begin with Angular Signals, import the Signals module from the @angular/core package. The signal() method is then used to create a signal. This function takes two arguments: the signal's initial value and an options object. The options object is used to determine whether the signal is written or read-only, as well as other parameters.

The subscribe() function
You can subscribe to a signal after you've produced it with the subscribe() method. As an argument, this method accepts a function that will be called whenever the signal changes. You can also use the unsubscribe() method to unsubscribe from a signal.

Signals can be utilized to construct a wide range of reactive patterns. You can, for example, use a signal to represent a component's state and then subscribe to the signal to update the UI whenever the state changes. Signals can also be used to provide two-way data coupling between components.

Here's a simple demonstration of how to use Angular Signals.
import { Signals } from '@angular/core';

export class MyComponent {
  count = new Signals<number>(0);

  increment() {
    this.count.value++;
  }

  decrement() {
    this.count.value--;
  }

  constructor() {
    this.count.subscribe(value => {
      // Update the UI here
    });
  }
}

In this case, we'll build a signal to indicate the current count. Then, we subscribe to the signal so that the UI may be updated anytime the count changes. Angular Signals have several advantages over alternative methods of developing reactive Angular programs. They are more granular than observables, for example, and can be used to track changes to individual values or states. They are also more synchronous, which makes them easier to debug and comprehend.

Overall, Angular Signals is a potent new tool for writing more reactive and efficient Angular programs.

Benefits of using Angular Signals
Here are some of the benefits of using Angular Signals.

• Granular updates: Angular Signals allow you to track changes to specific values or states rather than having to track changes to entire observables. This can lead to more efficient change detection and faster updates to the UI.
• A new reactive primitive: Angular Signals are a new reactive primitive, which means that they can be used to implement a variety of different reactive patterns in a simple and straightforward way.
• Simplified framework: Angular Signals simplify the Angular framework by providing a unified way to represent and track reactive values. This makes it easier to write and maintain reactive Angular code.
• No side effects: Angular Signals are designed to be pure, which means that they do not have any side effects. This makes them easier to reason about and debug.
• Automatic dependency tracking: Angular Signals automatically track their dependencies, so you don't have to worry about manually unsubscribing from them. This can help to prevent memory leaks and improve the overall performance of your application.

If you are writing reactive Angular code, I encourage you to try using Angular Signals. They are a powerful new tool that can make your code more efficient, simpler, and more reliable.

In this article, we'll look at how to use Node.js to create a web application. Let's take it one step at a time.

Step 1: Download NodeJS from the NodeJS website.
Download the Windows Installer from the Nodejs website. Check that you have the most recent version of NodeJs. It comes with the NPM package management. Install node js already and skip the preceding step.

Step 2: Ensure that Node and NPM are installed and that their PATHs are configured.
Check If you're not sure whether you installed everything correctly, use "Command Prompt" to double-check.

To verify the installation and confirm whether the correct version was installed,

Enter the following command to Check the node version.
Node --version or Node -v

Check the npm version, and run this command:
npm --version or npm -v

Step 3. Create a new project
You can create a project folder wherever you want on your computer and name it whatever you want.

Step 4. Create a new js file
Create a .js File By using the .js file extension

I Create an app.js file in the project folder. Create a simple string variable in app.js and send the contents of the string to the console: save the file.
var message= “Hi C# Corner”;
console.log(message);

Step 5. Run the App
It's simple to run app.js with Node.js. From a terminal, just type: Node .\app.js

You can see the "Hi C# Corner" output to the terminal, and then Node.js returns

Step 6. Install NPM Packages
install npm package Go to the terminal and type npm init -y this command line, we highlight -y when we install in npm' npm init' Does that time ask a question: package name? We can give the package name as yourself. Otherwise, it takes the default name Project Folder Name. If entered, the command line npm init -y takes the saver name as the default.

I'm going to run this Project in package.js, So I have to add a line in scripts at package.js "serve": "node app.js".
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "node app.js"
  },

I'm going to run the application with this command npm run serve.

What Is Express JS?    
Express is a node js web application framework that provides broad features for building web and mobile applications. It is used to build a single page, multipage, and hybrid web application.

Features of Express Framework
Allows to set up middlewares to respond to HTTP Requests.
Defines a routing table that is used to perform different actions based on HTTP Method and URL.
Allows to dynamically render HTML Pages based on passing arguments to templates
npm install express or npm i express

I recommend the nodemon package for Node. js-based applications by automatically restarting the node application when the file changes in the directory are detected.

nodemon will be installed globally on your system path.
npm install -g nodemon # or using yarn: yarn global add nodemon

Step 8. Write down the following code in the app.js file
const express = require("express");
const app = express();
const port = 3000;

//routes
app.get("/", (req, res) => {
  res.send("HI C# Corner!");
});


app.listen(port, () => {
  console.log(`My Sample Nodejs App Listening On Port ${port}`);
});

Following is a very basic Express app that starts a server and listens on port 3000 for the connection.
app.listen(port, () =>
{console.log(`My Sample Nodejs App Listening On Port ${port}`)
})

The app responds with "HI C# Corner!" for requests to the root URL (/) or route.
app.get('/', (req, res) => {
  res.send('HI C# Corner!')
})

`npm run serve`

This app starts a server and listens on port 3000 for connections.

Step 9. Now you can see the output on your browser
Now go to http://localhost:3000/ in the browser, and you will see the following output:

In this article, we will learn how to create a Node project and how we can develop a web application using Node.js. It is a runtime environment and library for running JavaScript code outside the browser. It must be installed on the system by downloading the software from the Node.js website and setting the path in the environment variables section.

ng-container
By enabling you to apply Angular directives without including additional items in the DOM (Document Object Model), the ng-container functions as a kind of transparent container. It is frequently employed when you wish to structure or conditionally include elements in your template.

As an illustration, consider creating a product page. If the product is in stock, you want to display the product details; otherwise, you want to display a notification stating the product is unavailable.

<ng-container *ngIf="productAvailable; else outOfStockTemplate">
  <div>Product Name: {{ productName }}</div>
  <div>Price: {{ productPrice }}</div>
</ng-container>

<ng-template #outOfStockTemplate>
  <div>This product is currently out of stock.</div>
</ng-template>

ng-template
The ng-template is like a template blueprint that doesn't get displayed immediately. It's used to define sections of your template that can be reused and conditionally rendered using structural directives.

Example: Let's say you're creating a list of blog posts. You want to show different styles for featured posts and regular posts.
<ul>
  <ng-container *ngFor="let post of posts">
    <ng-container *ngTemplateOutlet="post.featured ? featuredTemplate : regularTemplate; context: { post: post }"></ng-container>
  </ng-container>
</ul>

<ng-template #featuredTemplate let-post>
  <li class="featured">{{ post.title }}</li>
</ng-template>

<ng-template #regularTemplate let-post>
  <li>{{ post.title }}</li>
</ng-template>

ng-content
The ng-content is used to allow external content to be included within the template of your component. It's ideal for making more adaptable components that can be used in a variety of situations. Consider designing a card component that can display a variety of content.
<div class="card">
  <div class="card-header">
    <ng-content select=".card-title"></ng-content>
  </div>
  <div class="card-content">
    <ng-content></ng-content>
  </div>
  <div class="card-footer">
    <ng-content select=".card-actions"></ng-content>
  </div>
</div>

Now, when you use this component, you can provide custom content for each section:
<app-card>
  <div class="card-title">Card Title</div>
  <p>This is the content of the card.</p>
  <div class="card-actions">
    <button>Edit</button>
    <button>Delete</button>
  </div>
</app-card>

By combining these concepts, you can create components that are more dynamic and adaptable. ng-container, ng-template, and ng-content help you organize and structure your templates in a way that makes your code more readable and maintainable.

RxJS (Reactive Extensions for JavaScript) is a sophisticated tool used in Angular applications for handling asynchronous and event-based programming with observables. RxJS provides a diverse set of operators for manipulating, transforming, combining, and managing observables in a flexible and functional manner. These operators facilitate reactively working with data streams and asynchronous processes.

Here's a rundown of some of the most common RxJS operators and how they can be utilized in Angular:
map

The map operator is used to transform observable values into new ones. This is frequently used to do data transformations.

import { map } from 'rxjs/operators';

observable.pipe(
  map(data => data * 2)
).subscribe(result => console.log(result));

filter
The filter operator is used to remove values from an observable depending on a criterion.
import { filter } from 'rxjs/operators';

observable.pipe(
  filter(data => data > 5)
).subscribe(result => console.log(result));

mergeMap (flatMap)
The mergeMap operator is used to merge multiple observables into a single observable by applying a function to each emitted value and flattening the resulting observables.
import { mergeMap } from 'rxjs/operators';

observable.pipe(
  mergeMap(data => anotherObservable(data))
).subscribe(result => console.log(result));

switchMap
The switchMap the operator is similar to mergeMap, but it switches to a new inner observable whenever a new value is emitted from the source observable, canceling the previous inner observable.
import { switchMap } from 'rxjs/operators';

observable.pipe(
  switchMap(data => anotherObservable(data))
).subscribe(result => console.log(result));

debounceTime
The debounceTime operator delays emitted values for a specified amount of time and only emits the last value within that time frame.
import { debounceTime } from 'rxjs/operators';
inputObservable.pipe(
  debounceTime(300)
).subscribe(value => console.log(value));

combineLatest
The combineLatest operator combines the latest values from multiple observables whenever any of the observables emit a new value.
import { combineLatest } from 'rxjs/operators';

combineLatest(observable1, observable2).subscribe(([value1, value2]) => {
  console.log(value1, value2);
});

catchError
The catchError operator is used to handle errors emitted by an observable by providing an alternative observable or value.
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';

observable.pipe(
  catchError(error => of('An error occurred: ' + error))
).subscribe(result => console.log(result));

These are just a few examples of the many RxJS operators available. Using RxJS operators effectively can help you manage complex asynchronous workflows, handle data transformations, and create more responsive and reactive Angular applications.

Happy Learning :)

In this article, we will go over the fundamentals of observable and subject. The distinction between them is further demonstrated through practical examples and the various types of subjects.

What exactly is Angular?
Angular is a popular open-source JavaScript web application framework. It was created by Google and is presently maintained by the Google Angular Team. Angular enables developers to create dynamic, single-page applications (SPAs) and offers a disciplined way to developing complicated online apps.
Visible in Angular

• Observables are a component of the Reactive Extensions for JavaScript (RxJS) library in Angular.
• Observables allow you to send messages between components of your program.
• Observables are a useful tool in reactive programming that is widely used to handle asynchronous actions and data streams.
• Observables allow you to subscribe to and get notifications when new data or events are emitted, allowing you to react in real-time to changes.

//------------------Observables are unicast-----------------
//observable
let observable = new Observable<number>(ele =>
  ele.next(Math.random()))

//first subscriber
observable.subscribe(result => {
  this.first_subscriber_observable = result;
  console.log(result)
})

//second subscriber
observable.subscribe(result => {
  this.second_subscriber_observable = result;
  console.log(result)
})

//third subscriber
observable.subscribe(result => {
  this.thrid_subscriber_observable = result;
  console.log(result)
})
//--------------------------------------------------------

//------------------Subjects are multicast-----------------
//subject
let subject = new Subject<number>()

//first subscriber
subject.subscribe(result => {
  this.first_subscriber_subject = result;
  console.log(result)
})

//second subscriber
subject.subscribe(result => {
  this.second_subscriber_subject = result;
  console.log(result)
})

//third subscriber
subject.subscribe(result => {
  this.third_subscriber_subject = result;
  console.log(result)
})

subject.next(Math.random())
//--------------------------------------------------------

2. BehaviorSubject
The behavior subject is another type of subject in RxJS.
It has an initial value and will immediately emit the initial value to any subscriber as soon as they subscribe, even if no values have been emitted yet using the next() method.
After the initial value is emitted, it behaves like a regular Subject and notifies subscribers about new values emitted using next().
This is useful when you want to provide the last known value to new subscribers, such as the current state of an application or the latest data fetched from an API.

//----------Behavior Subject has default or last emitted value---------------
var behaviorSubject = new BehaviorSubject<number>(123)

behaviorSubject.subscribe(ele => {
  this.first_subscriber_behaviorSubject = ele
  console.log(`first subscriber ${ele}`)
})

behaviorSubject.next(456)

behaviorSubject.subscribe(ele => {
  this.second_subscriber_behaviorSubject = ele
  console.log(`second subscriber ${ele}`)
})

//--------------------------------------------------------------------------

3. ReplaySubject

The ReplaySubject is a subject that can buffer and replay a specific number of values to new subscribers.
When you create a ReplaySubject, you can specify the buffer size, which determines how many previous values should be replayed to new subscribers.
This is useful when you want to provide a history of values to new subscribers or when you need to cache values for later use.

//---------------Replay subject buffers old values not default one-----------

const replaySuject = new ReplaySubject(2) //If we we want to show only last 2 buffered value otherwise it will show all

replaySuject.next(111)
replaySuject.next(222)
replaySuject.next(333)

replaySuject.subscribe(e => {
  console.log(`First Subscriber ${e}`)
  this.first_subscriber_replaySubject.push(e);
})

//new values show to existing subsriber
replaySuject.next(444)

replaySuject.subscribe(e => {
  console.log(`Second Subscriber ${e}`)
  this.second_subscriber_replaySubject.push(e);
})

replaySuject.next(555)
//--------------------------------------------------------------------------

4. AsyncSubject

• The AsyncSubject is a subject that only emits the last value when it completes.
• It will not emit any values until the subject’s complete() method is called. When completed, it will emit the last value (if any) to subscribers.
• This is useful when you need to wait for an operation to complete before emitting a final value, such as waiting for an HTTP request to finish and emitting the response as a single value.

//---------------Async subject sends the latest value to subscribers when it's completed-----------
const asyncSubject = new AsyncSubject<number>();

asyncSubject.subscribe(e =>
  {
    console.log(`First Subscriber: ${e}`)
    this.first_subscriber_asyncSubject=e;
});

asyncSubject.next(111);
asyncSubject.next(222);
asyncSubject.next(333);
asyncSubject.next(444);

asyncSubject.subscribe(e => {
  console.log(`Second Subscriber: ${e}`)
  this.second_subscriber_asyncSubject=e;
});

asyncSubject.next(555);
asyncSubject.complete();

//--------------------------------------------------------------------------