To include the Web.config file in the dest folder while running a build in Angular, you can modify the angular.json file as follows:

Angular.Json
Note: We need to include Web.config file inside the src folder.)

In build declaration, we can define the web config inside the block of assets.
"build": {
       "builder": "@angular-devkit/build-angular:browser",
       "options": {
         "outputPath": "dist",
         "index": "src/index.html",
         "main": "src/main.ts",
         "polyfills": "src/polyfills.ts",
         "tsConfig": "tsconfig.app.json",
         "inlineStyleLanguage": "scss",
         "assets": [
           "src/favicon.ico",
           "src/assets",
           "src/web.config"
         ],
         "styles": [
           "src/styles.scss"
         ],
         "scripts": [
           "node_modules/jquery/dist/jquery.min.js"
         ]
       }

     },

Another Way
In build declaration inside the asset block we can define the we.config with input and output.
{
"assests":{
"src/web.config",
              {
                "glob": "**/*",
                "input": "node_modules/ng2-pdfjs-viewer/pdfjs",
                "output": "assets/pdfjs"
              },
...
...
...
}
}

This article will teach us how to use the ngModel directive in the Angular application to show and hide div when the radio button is clicked. Additionally, we study how to construct the Bootstrap Toasts component in Angular. The process of creating the radio buttons, binding the div to radio buttons, and hiding and showing after selection is template-driven.

Note: As stated below, please read my prior essay on Angular applications before beginning this session.

1. In the App Module, import the FormsModule
To work with angular forms, import the forms module (FormsModule) and add the imports: [] array section. Look for the code below in the file src/app/app.module.ts.

import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [Title],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 2: Modify the HTML template

The radio buttons are defined here, along with the ngModel directive and the value it receives. The checked state and values are defined in a similar manner. Initially concealed, four divisions become visible when clicking the radio button. Look for the code in the file src/app/app.component.html.

<div class="card bg-warning text-white">
<div class="card-body">
  <h2>Angular Radio Button Click For Show or Hide Div</h2>
    <input [value]="1" [(ngModel)]="sh" name="sh" type="radio" [checked]="isChecked" /> Peter
  &nbsp;
    <input [value]="0" [(ngModel)]="sh" name="sh" type="radio" [checked]="!isChecked" /> Scott
  <div class="text-center card bg-success text-white" *ngIf="sh == 1">Satyaprakash</div>
  <div class="text-center card bg-danger text-white" *ngIf="sh == 0">Kulu</div>
</div>
</div>

<div class="toast show" style="position: absolute; top: 0; right: 0; color: red;font-weight:900;font-size:larger;" *ngIf="sh == 1">
  <div class="toast-header">
    You Selected
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Peter
  </div>
</div>

<div class="toast show" style="position: absolute; top: 0; right: 0;color: red;font-weight:900;font-size:larger;" *ngIf="sh == 0">
  <div class="toast-header">
    You Selected
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Kulu
  </div>
</div>

Radio buttons are used in this implementation of the ngModel directive.
<input [value]="1" [(ngModel)]="sh" name="sh" type="radio" [checked]="isChecked" /> Peter
  &nbsp;
<input [value]="0" [(ngModel)]="sh" name="sh" type="radio" [checked]="!isChecked" /> Scott

For normal Div show or hide,
<div class="text-center card bg-success text-white" *ngIf="sh == 1">Peter</div>
<div class="text-center card bg-danger text-white" *ngIf="sh == 0">Scott</div>

For Bootstrap Toast component,
<div class="toast show" style="position: absolute; top: 0; right: 0; color: red;font-weight:900;font-size:larger;" *ngIf="sh == 1">
  <div class="toast-header">
    You Selected
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Peter
  </div>
</div>

<div class="toast show" style="position: absolute; top: 0; right: 0;color: red;font-weight:900;font-size:larger;" *ngIf="sh == 0">
  <div class="toast-header">
    You Selected
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Scott
  </div>
</div>

Step 3. Update TypeScript Template
Here we set the isChecked variable with false value. Make sure to define another variable by the name of “sh” in angular TypeScript component. Add the code in src/app/app.component.ts file.
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isChecked: boolean = false;
  sh: any;
  constructor() {
  }
}

Step 4. Add Bootstrap to make page responsive
Add code in index.html file,
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title Service Example</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Output
Here, we run the command (ng serve) to start the angular app server.  The result is shown on first time page load:

Then it performs hide and show HTML div on radio buttons click in angular application with the help of ngModel directive.

You can send HTTP queries and test APIs straight from Visual Studio by using.http files. Visual Studio 2019 and later versions support this capability.

Before this feature, how are your APIs tested?

• Swagger
• Postman
• Unit testing

How can a.http file be used in our project?
Let me explain how we can use a.http file to test an API.
Get a new.NET 8 API project started. This is how it appears by default; it was made with.NET 8.

What does this file intend to accomplish?
Testing ASP.NET Core and API projects without the need for third-party setup, such as Swagger, is possible with the http file editor.

How is it useful to us?

• Make a request.
• transmits the HTTP requests listed in the.httpfiles.
• shows the answers

How does this file appear?
By default, this file contains the weather forecast API code.

The rate (@) sign allows us to use and add a new variable.

To indicate to this file that the previous API has ended and that there will be another API following it, three hashtags (###) are used as delimiters.
How can we make an API call or send a request?

Right-click anywhere inside the.http file and choose "Send Request" to start the request. The request will be sent by Visual Studio, and the output pane will show the response.

We can add other requests for other HTTP Methods like (OPTIONS, HEAD, POST, PATCH, DELETE, TRACE). You can also include request headers, request bodies, and query parameters in your .http file. Visual Studio will automatically highlight syntax errors and provide suggestions for valid HTTP methods, headers, and more.

Using .http files in Visual Studio can greatly simplify the process of testing APIs and debugging HTTP requests. It allows you to quickly iterate and validate your API calls without leaving the IDE.

Note. (.http files) are specific to Visual Studio and are not part of the .NET Core framework itself. They are a convenient tool provided by Visual Studio for API testing and development.

The robust front-end framework Angular offers developers a number of tools to create dynamic and manageable user interfaces. Content projection is one such feature that greatly enhances UI flexibility and reusability. Through the dynamic injection of content into predetermined slots inside a component's template, content projection enables developers to design components that are both adaptable and reusable.

Comprehending Content Projection
A feature in Angular called content projection, or transclusion, allows content from a parent component to be inserted into a specific area of a child component. This method facilitates the creation of adaptable and adjustable user interfaces and encourages component reuse.

Content Projection's Advantages
Component Reusability: Content projection enables programmers to design components that may be applied to various areas of an application at different times. Content can be projected into designated slots to increase component versatility and adaptability to a range of use scenarios.
Simplified API: Rather than requiring intricate setups, components may expose a simplified API that accepts content as input. This improves code maintainability by making the components simpler for developers to use and comprehend.
Consistent Style and Layout: Content projection aids in preserving uniform styling and layout throughout an application's many sections. Components with specified slots can be designed by developers to guarantee that the content projection follows a consistent format.
Improved Concern Separation: Content projection promotes a distinct division of responsibilities between the parent and child components. Child components manage the content display, allowing parents to concentrate on business logic, thus fostering a modular and maintainable codebase.

Practical Use Case
Think of a basic card component that can show text, photos, or even bespoke components, among other kinds of information. We may construct a reusable card component that can adjust to various content kinds by using content projection.

card.component.ts

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

@Component({
  selector: 'app-card',
  standalone: true,
  imports: [],
  template: `
    <div class="card">
      <div class="card-header">
        <ng-content select="[card-header]"></ng-content>
      </div>
      <div class="card-body">
        <ng-content select="[card-body]"></ng-content>
      </div>
      <div class="card-footer">
        <ng-content select="[card-footer]"></ng-content>
      </div>
    </div>
  `,
  styles: [
    '.card { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; margin: 16px; }',
    '.card-header, .card-footer { background-color: #f0f0f0; padding: 8px; }',
    '.card-body { padding: 16px; }',
  ],
})
export class CardComponent {}

In this example, the CardComponent defines three slots: card-header, card-body, and card-footer. The content projected into these slots will be rendered within the corresponding sections of the card.

app.component.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { CardComponent } from './card/card.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, CardComponent],
  template: `
    <app-card>
      <div card-header>
        <h2>Angular is awesome</h2>
      </div>
      <div card-body>
        <p>Lets have a fun with it</p>
      </div>
      <div card-footer>
        <button>Read More</button>
      </div>
    </app-card>

    <app-card>
      <div card-header>
        <h2>Product Information</h2>
      </div>
      <div card-body>
        <img
          src="https://cdn-images-1.medium.com/v2/resize:fit:184/1*[email protected]"
          alt="Product Image"
          style="max-width: 100%"
        />
        <ul>
          <li>Feature 1</li>
          <li>Feature 2</li>
          <li>Feature 3</li>
        </ul>
      </div>
      <div card-footer>
        <button>Add to Cart</button>
      </div>
    </app-card>
  `,
})
export class AppComponent {}