We are fetching user data with the help of angular HttpClient API call.

import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, inject } from '@angular/core';

@Component({
  selector: 'app-ng-container',
  imports: [CommonModule],
  templateUrl: './ng-container.component.html',
  styleUrl: './ng-container.component.css'
})
export class NgContainerComponent {

  userList: any [] = [];
  isAPI: boolean = false;

  http = inject(HttpClient);

  getUser(){
    debugger;
    this.isAPI = true;
    this.http.get("https://jsonplaceholder.typicode.com/users").subscribe((result: any)=>{
      debugger;
      this.userList = result;
      this.isAPI = false;

    })
  }


}

We displaying dynamic alert message and user dropdown population.

<app-alert [alertType]="'warning'" [message]="alertMsg"></app-alert>

<div class="row mt-2">
    <div class="col-6">
        <button class="btn btn-primary" (click)="changeMsg()">Change Alert Message</button><br>

        <button class="btn btn-success mt-2" (click)="getAllUser()">Get Users</button>
    </div>
    <div class="col-6 mt-5">
    <select class="form-select" name="" id="">
        @for(item of userList; track $index)
        {
            <option value="">{{item.name}}</option>
        }
    </select>
</div>
</div>

We are getting users data from API using HttpClient.

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { AlertComponent } from '../../../reusable-components/alert/alert.component';
// import { Customer } from '../../../model/class/Cutomer';
import { IUser } from '../../../model/interface/IUser';

@Component({
  selector: 'app-get-api',
  imports: [AlertComponent],
  templateUrl: './get-api.component.html',
  styleUrl: './get-api.component.css'
})
export class GetApiComponent {

  userList: IUser [] = [];
  alertMsg: string = 'welcome to get page';

  changeMsg(){
    this.alertMsg = 'You are most welcome to Get API Page';
  }

  constructor(private http: HttpClient){
    //  this.getAllUser();
  }

  getAllUser(){
    debugger;
    this.http.get("https://jsonplaceholder.typicode.com/users").subscribe((result: any)=>{
      debugger;
      this.userList = result;
    },error=>{
      debugger;
    })
  }

}

We are creating simple admin login authentication using angular.

import { HttpClient } from '@angular/common/http';
import { Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  imports: [FormsModule],
  templateUrl: './login.component.html',
  styleUrl: './login.component.css'
})
export class LoginComponent {

   userObj: any = {
   userName:'',
   Password:''
  }
  
   onLogin(){
     if(this.userObj.userName == "admin" && this.userObj.Password == "1234567890" ){
        alert("Login Success");
        localStorage.setItem('loginUser',this.userObj.userName);
        this.router.navigateByUrl('emp-list')
     } else{
       alert("Wrong Credential");
     }
   }

}

We are creating user login authentication using angular HttpClient.

import { HttpClient } from '@angular/common/http';
import { Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  imports: [FormsModule],
  templateUrl: './login.component.html',
  styleUrl: './login.component.css'
})
export class LoginComponent {

  userObj: any = {
    EmailId:'',
    Password:''
  }

  router = inject(Router);
  http = inject(HttpClient);

  onLogin(){
    this.http.post("https://projectapi.gerasim.in/api/UserApp/login", this.userObj).subscribe((res: any)=>{
      if(res.result){
        alert("Login Success");
        localStorage.setItem('loginUser', JSON.stringify(res.data));
        this.router.navigateByUrl('emp-list')
     } else{
       alert(res.message);
     }
    })
    
  }


}

We are fetching user list in angular and rendering dynamic template.

<div class="mt-2 p-2 bg-secondary text-white rounded">
    <ng-container *ngTemplateOutlet="myTemplate">

    </ng-container>
</div>

<ng-template #myTemplate>
    <h1>ng-container</h1>
</ng-template>

<div class="row pt-3">
    <div class="col-4">
        <button class="btn btn-primary" (click)="getUser()">Laod Users</button>

    </div>
</div>

<div class="row pt-3">
    <div class="col-8">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>S.No</th>
                    <th>Name</th>
                    <th>User Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <ng-container *ngIf="isAPI" class="text-center">
                    <div class="spinner-grow text-muted"></div>
                    <div class="spinner-grow text-primary"></div>
                    <div class="spinner-grow text-success"></div>
                    <div class="spinner-grow text-info"></div>
                    <div class="spinner-grow text-warning"></div>
                    <div class="spinner-grow text-danger"></div>
                    <div class="spinner-grow text-secondary"></div>
                    <div class="spinner-grow text-dark"></div>
                    <div class="spinner-grow text-light"></div>

                </ng-container>

                <ng-container *ngIf="!isAPI">
                    <tr *ngFor="let user of userList;let srNo = index">
                        <td>{{srNo+1}}</td>
                        <td>{{user.name}}</td>
                        <td>{{user.username}}</td>
                        <td>{{user.email}}</td>
    
                    </tr>
                </ng-container>

            </tbody>
        </table>

    </div>
</div>