Angular

Hi How to display list of names . I am trying like below <div class="col-md-6"> <label for="empName" class="form-label">Name</label> <option @for ("let item of attendanceArray" [value]="empId")>{{empName}}</option> > </div> <form [formGroup]="form" > <div class="modal-body"> <div class="form-group" class="row g-3"> <div class="col-md-6"> <label for="empName" class="form-label">Name</label> <option @for ("let item of attendanceArray" [value]="empId")>{{empName}}</option> > </div> </div> </form> form = new FormGroup({ empId: new FormControl(0), empName: new FormControl(''), empContactNo: new FormControl(''), attendanceId: new FormControl(0), attendanceDate: new FormControl(''), inTime: new FormControl(''), outTime: new FormControl(''), isFullDay: new FormControl('') }); get f(){ return this.form.controls; } getEmployee(){ this.empSrv.getallEmployee().subscribe((result: any)=>{ this.employeeArray = result.data; }) } Thanks

Hi I have below code and i want to display a list of items in a modal column. export class AttendanceComponent implements OnInit { attendanceArray: iAttendance [] = []; objattendance : attendance = new attendance(); employeeArray: any [] = []; constructor(private empSrv:EmployeeService){ } ngOnInit(): void { this.getEmployee(); } getEmployee(){ this.empSrv.getallEmployee().subscribe((result: any)=>{ this.employeeArray = result.data; }) } } <label> Name </label> <select> </select> Thanks

Hi I have below ts file and i want when user clicks on Edit all data should be shown in modal onEdit(Id:number) { this.empSrv.getEmpById(Id).subscribe((res:any)=>{ this.objEmployee = res.data; console.log(res.data); this.form.patchValue({ 'empName':res.data.empName?res.data.empName:'' }) this.openModal(); }) } ********************* <form [formGroup]="form" > <div class="modal-body"> <div class="form-group" class="row g-3"> <div class="col-md-6"> <label for="empName" class="form-label">Name</label> <input type="text" formControlName="empName" id="empName" type="text" class="form-control"> </div> <div class="col-md-6"> <label for="empEmail" class="form-label">Email</label> <input type="text" formControlName="empEmail" id="empEmail" type="text" class="form-control"> </div> <label for="empContactNo" class="form-label">Contact No</label> <input type="text" formControlName="empContactNo" id="empContactNo" class="form-control"> <label for="addressLine1" class="form-label">Address1</label> <input type="text" formControlName="addressLine1" id="addressLine1" class="form-control"> <label for="addressLine2" class="form-label">Address2</label> <input type="text" formControlName="addressLine2" id="addressLine2" class="form-control"> <div class="col-md-4"> <label for="pincode" class="form-label">Pin Code</label> <input type="text" formControlName="pinCode" id="pinCode" type="t

Hi I have below code . API has records but it shows no data export class EmployeeService { constructor(private htpClient: HtpClient) { } getallEmployee(): Observable<any> { return this.htpClient.get('onlinetestapi.gerasim.in/api/TeamSync/GetAllEmployee'); } import { Component,ViewChild,ElementRef,OnInit } from '@angular/core'; import { EmployeeService } from '../../service/employee.service'; import { FormBuilder,FormsModule, ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms'; import { CommonModule } from '@angular/common'; @Component({ selector: 'app-employee', standalone: true, imports: [CommonModule, FormsModule,ReactiveFormsModule], templateUrl: './employee.component.html', styleUrl: './employee.component.css' }) export class EmployeeComponent implements OnInit { @ViewChild('myModal') model : ElementRef | undefined; employeeArray: any[] = []; objEmployee: any = { "empId":0, "empName": "", "empContactNo": "", "empEmail": "", "addressLine1": "", "addressLine2": "", "pinCode":"", "city": "", "state": "", "bankName":"", "iFSC": "", "accountNo":"", "bankBranch":"", "salary":0 } constructor(private empSrv:EmployeeService){} get f(){ return this.form.controls; } ngOnInit():void{ this.loadAllEmployee(); } loadAllEmployee(){ this.empSrv.getallEmployee().subscribe((res:any)=>{ this.employeeArray = res.data; }) } Thanks

Hi I want to show EmpId but as a hidden in below code <div class="modal" id="myModal" #myModal> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">New Employee</h1> <button type="button" class="btn-close" (click)="closeModal()" aria-label="Close"></button> </div> <form [formGroup]="form" > <div class="modal-body"> <div class="form-group" class="row g-3"> <div class="col-md-6"> <label for="inputEmail4" class="form-label">Name</label> <input type="text" formControlName="empName" id="empName" type="text" class="form-control"> </div> <div class="col-md-6"> <label for="inputPassword4" class="form-label">Email</label> <input type="text" formControlName="email" id="email" type="text" class="form-control"> </div> <label for="empContactNo" class="form-label">Contact No</label> <input type="text" formControlName="empContactNo" id="empContactNo" class="form-control"> <label for="addressLine1" class="form-label">Address1</label> <input type="text" formControlName="addressLine1" id="addressLine1" class="form-control"> <label for="addressLine2" class="form-label">Address2</label> <input type="text" formControlName="addressLine2" id="addressLine2" class="form-control"> <div class="col-md-4"> <label for="pincode" class="form-label">Pin Code</label> <inpu

Hi On click of Edit in a row values are not shown in Modal . Values are returned by API. We are using Angular17. <div class="modal" id="myModal" #myModal> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">New Employee</h1> <button type="button" class="btn-close" (click)="closeModal()" aria-label="Close"></button> </div> <form [formGroup]="form" (ngSubmit)="submit()" > <div class="modal-body"> <div class="form-group" class="row g-3"> <div class="col-md-6"> <label for="inputEmail4" class="form-label">Name</label> <input type="text" formControlName="empName" id="empName" type="text" class="form-control"> </div> <div class="col-md-6"> <label for="inputPassword4" class="form-label">Email</label> <input type="text" formControlName="email" id="email" type="text" class="form-control"> </div> <label for="empContactNo" class="form-label">Contact No</label> <input type="text" formControlName="empContactNo" id="empContactNo" class="form-control"> <label for="addressLine1" class="form-label">Address1</label> <input type="text" formControlName="addressLine1" id="addressLine1" class="form-control"> <label for="addressLine2" class="form-label">Address2</label> <input type="text" formControlName="addressLine2" id="addressLine2" class="form-control"> <div class="col-md-4"> <labe

Hi How to put validations. I am using Reactive form <div class="modal" id="myModal" #myModal> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">New Employee</h1> <button type="button" class="btn-close" (click)="closeModal()" aria-label="Close"></button> </div> <form [formGroup]="form" (ngSubmit)="submit()"> <div class="modal-body"> <div class="form-group"> <label for="name">Name</label> <input formControlName="empName" id="empName" type="text" class="form-control"> <!-- <div *ngIf="f['name'].touched && f['name'].invalid" class="alert alert-danger"> <div *ngIf="f['name'].errors && f['name'].errors['required']">Name is required.</div> <div *ngIf="f['name'].errors && f['name'].errors['minlength']">Name should be 3 character.</div> </div> --> <label for="email">Email</label> <input formControlName="email" id="email" type="text" class="form-control"> <label for="empContactNo">Contact No</label> <input formControlName="empContactNo" id="empContactNo" type="text" class="form-control"> <!-- <div *ngIf="f['email'].touched && f['email'].invalid" class="alert alert-danger"> <div *ng

Hi I am getting below error - <nav class="navbar navbar-expand-sm bg-light justify-content-center"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" routerlink="dashboard">Link 1</a> </li> </ul> </nav> <div class="container-fluid mt-3"> <router-outlet></router-outlet> </div> [ERROR] NG8001: 'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, then verify that it is included in the '@Component.imports' of this component. 2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message. [plugin angular-compiler] src/app/Pages/layout/layout.component.html:16:4: 16 ¦ <router-outlet></router-outlet> Thanks

I want to put line breaks on a string on angular.ts side but '\n' is not working. var msg = "hello friend!" + '\n' msg+= "You fine there" console.log(msg); What must i do to achieve the string line break?

Hi Are there any sample projects/sample API for creating CRUD applications with Login/Authorization using JWT token in Angular17 Thanks

Hi I have below data in Local Storage and i want to save data is studentObj. I am using Rective form studentObj: Student = new Student(); studentList:Student[] = []; get f(){ return this.form.controls; } Thanks

Hi I am usng Reactive Form . I want to sho Valodation messages on change of field form = new FormGroup({ name: new FormControl('', [Validators.required, Validators.minLength(3)]), email: new FormControl('', [Validators.required, Validators.email]) ) }); Thanks

Hi In Angular 17 using Local Storage how to delete record when User confirms O.K in Modal Popup not using Confirm function Thanks

Hi I have Modal Popup . I want to put Validations . How it can e done <div class="modal" id="myModal" #myModal> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">Create New Student</h1> <button type="button" class="btn-close" (click)="closeModal()" aria-label="Close"></button> </div> <div class="modal-body"> <div class="row"> <div class="col-6"> <label for="">Name</label> <!-- <input type="text" [(ngModel)]="studentObj.name" name="stuName" class="form-control-sm" placeholder="Name" #name="ngModel" required> --> <input type="text" class="form-control" [(ngModel)]="studentObj.name" name="name" #name="ngModel" required> </div> <span class="text-danger" *ngIf="name.touched && name.errors?.required"> Name is required </span> <!-- <div style="color:red" *ngIf="studentObj.name.errors && (studentObj.name.dirty || studentObj.name.touched)"> <p *ngIf="studentObj.name.errors.required"> Student Name is required </p> </div> --> </div> <div class="row"> <div class="col-6"> <label for="">Mobile No</label> <input type="text" [(ngModel)]="studentObj.mobileno" class="form-control-sm" placeholder="Mobile No"> </div> </div> <div class="row"> <div class="col-6"> <label for="">Email</label>

Hi I have below code but it is not going in If confition <div class="modal fade" id="mydeleteModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="confirmationModalLabel">Confirmation</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Are you sure you want to delete this item? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-danger" (click)="Delete()">Delete</button> </div> </div> </div> </div> @ViewChild('mydeleteModal') delModel : ElementRef | undefined; onDelete(Id: number) { debugger; if (this.delModel != null) { this.delModel.nativeElement.style.display = 'block'; } } Thanks

How would you design and implement a robust logging and error handling mechanism in an Angular/.NET Core ERP application to facilitate troubleshooting and debugging? I need to track and monitor application errors and exceptions effectively, ensuring seamless operation and quick resolution of issues in the ERP system.

Vikas SinghMay 12, 20241,16910

Hi How to open delete confirmation modal using viewchild <div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="confirmationModalLabel">Confirmation</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Are you sure you want to delete this item? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-danger" (click)="confirmDelete()">Delete</button> </div> </div> </div> </div> Thanks

Hi Before deleting record in i wan to get confirmarion in popup whether user wants to delete record or not. If yes only then record should be deleted Thanks

Hi In the HTML below, I want to Hide ID, but I want to pass it as a parameter when clicking on Edit or Delete. <div class="col-lg-8"> <table class="table table-striped table-bordered"> <thead class="thead-dark"> <tr> <!-- <th scope="col">#</th> --> <th scope="col">ID</th> <th scope="col">Name</th> <th scope="col">MobileNo</th> <th>Action</th> </tr> </thead> <tbody> @for (item of studentList;track $index){ <!-- <tr *ngFor="let l of studentList; let i = index"> --> <tr> <!-- <td>{{l + 1}}</td> --> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.mobileno}}</td> <td> <!-- <button type="button" class="btn btn-primary btn-sm me-2" >Edit</button> <button type="button" class="btn btn-danger btn-sm ml-1" >Delete</button> --> <button type="button" class="btn btn-primary btn-sm ml-1" (click)="onEdit(item.id)">Edit</button> <button type="button" class="btn btn-danger btn-sm ml-1" (click)="onDelete(item.id)">Delete</button> </td> </tr> } </tbody> </table> </div> export class AppComponent implements OnInit{ title = 'AngularFrm'; isEditMode: boolean = false; isSubmitMode: boolean = true; @ViewChild('myModal') model : ElementRef | undefined; studentObj: Student = new Student(); studentList:St

how to use dynamic data in ngx-datable

Hi How to delete particulat student id from Local Storage Data. <div class="col-lg-8"> <table class="table table-striped table-bordered"> <thead class="thead-dark"> <tr> <!-- <th scope="col">#</th> --> <th scope="col">ID</th> <th scope="col">Name</th> <th scope="col">MobileNo</th> <th>Action</th> </tr> </thead> <tbody> @for (item of studentList;track $index){ <!-- <tr *ngFor="let l of studentList; let i = index"> --> <tr> <!-- <td>{{l + 1}}</td> --> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.mobileno}}</td> <td> <!-- <button type="button" class="btn btn-primary btn-sm me-2" >Edit</button> <button type="button" class="btn btn-danger btn-sm ml-1" >Delete</button> --> <button type="button" class="btn btn-primary btn-sm ml-1" (click)="onEdit(item.id)">Edit</button> <button type="button" class="btn btn-danger btn-sm ml-1" (click)="onDelete(item.id)">Delete</button> </td> </tr> } </tbody> </table> </div> export class AppComponent implements OnInit{ title = 'AngularFrm'; isEditMode: boolean = false; isSubmitMode: boolean = true; @ViewChild('myModal') model : ElementRef | undefined; studentObj: Student = new Student(); studentList:Student[] = []; ng

Hi C# Team , Are there any chatbot integration packages for Angular? If so, could you please provide examples?

Jobin SMay 4, 202469810

My angular navigation router url renders with localhost/books %2F title instead of '/' Here is my routerLink. Parent routes working well. Child route not working. Html: [routerLink]="['/', path]" Router config: path: 'books', component: BooksComponent, children: [ { path: 'books', component: BooksComponent, data: { text: 'New book' } }, { path: 'books/title', component: EditBookComponent, data: { text: 'Edit book' } }] },

Hi I amggeting above error. Below is the code import { Component, ElementRef, ViewChild } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet,FormsModule], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { @ViewChild('myModal') model : ElementRef | undefined; studentObj: Student = new Student(); openModal(){ const modal = document.getElementById("myModal") if (modal != null) { modal.style.display = 'block'; } } closeModal(){ if (this.model != null) { this.model.nativeElement.style.display = 'none'; } } saveStudent(){ debugger; const isLocalPresent = localStorage.getItem("angular17Crud"); if(isLocalPresent != null) { const oldArray = JSON.parse(isLocalPresent); oldArray.push(this.studentObj); localStorage.setItem('angular17Crud',JSON.stringify(oldArray));} else { const newArr = []; newArr.push(this.studentObj); localStorage.setItem('angular17Crud',JSON.stringify(newArr)); } } } export class Student { name:string; mobileno:string; email:string; city:string; state:string; pincode:string; address:string; constructor(){ this.address =''; this.name=''; this.mobileno=''; this.email=''; this.city=''; this.state=''; this.pincode=''; } } <div class="container"> <div class="row pt-3"> <div class="col-6"> <h4>Student Portal</h4> </div> <div class="col-6 text-end"> <button class="btn btn-outline-success" (click)="openModal()">Add New</button> </div> </div> </div> <div class="row"> <div class="col-3"> <div class="card"> <div class="ca