Angular

Hi I have below code and i want if value is null in fMobileNo then in Html Hyphen should be displayed if (this.fatherData && this.fatherData.phoneDetails) { this.fMobileNo = this.fatherData.phoneDetails.find((c:any) => c.phoneType === 'MOBILE'); } Thanks

How to send file direct to user machine default printer from angular application

component routing in angular

How to move Tab order from Last control to first control using angular 15

hi I want Load Data should display data on basis of First Value in Dropdown for the first time. Using Angular 17 <mat-form-field class="example-full-width mb-3" appearance="outline"> <mat-label>Academic Class</mat-label> <mat-select matInput formControlName="academicClassId" required> @for (item of classList; track item.id) { <mat-option [value]="item.id">{{item.name}}</mat-option> } </mat-select> </mat-form-field> public loadData() { this.exampleDatabase = new StudentsService(this.htpClient,this._generic); this.dataSource = new ExampleDataSource( this.exampleDatabase,this.paginator, this.sort ); this.subs.sink = this.paginator.page.subscribe(() => { this.exampleDatabase?.getAllRegisteredStudents(this.paginator.pageIndex, this.paginator.pageSize); }); this.subs.sink = this.sort.sortChange.subscribe(() => { this.exampleDatabase?.getAllRegisteredStudents(this.paginator.pageIndex, this.paginator.pageSize); }); } Thanks

Hi I have User Personal Address / Correspondence Address. I want to use Dynamic Expansion Panel which should be a separate component. Regards

Hi genderList = ['Male', 'Female']. I want to display usimg matselect in Angular 17. Thanks

Hi I am using mat-select in Angular 17. I want when user selects value then on the basis of that values should appear in another dropdown. Regards

Hi I am using expansion panel in Angular 17 but it is not getting displayed. Below is the HTML I want that on right Hand Side some arrow (say v ) should be displayed when clicked it should expand. . If it again clicked it should collapse. <mat-accordion> <mat-expansion-panel> <div class="project_widget"> <mat-expansion-panel-header> <div class="header"> <h2><i class="fa fa-caret-right me-2"></i>Father</h2> </div> </mat-expansion-panel-header> <div class="body"> <div class="p-3 shadow-sm"> <div class="d-inline-block"> <div class="label bg-green rounded-pill m-1 col-auto"><i class="fa fa-check-circle me-1"></i>Custody Allowed</div> <div class="label bg-green rounded-pill m-1 col-auto"><i class="fa fa-check-circle me-1"></i>Correspondence Address</div> </div> <hr/> <div class="row"> <div class="col-md-3 col-6"> <p class="text-muted mb-0">Full Name</p> <h6>{{fatherData.fullName}}</h6> </div>

Hi I have User Personal Address / Correspondence Address as a separate component. I want to use Dynamic Expansion Panel which should be a separate component. Below is the Expansion Panel Components import { Component } from '@angular/core'; import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatExpansionModule } from '@angular/material/expansion'; import { BreadcrumbComponent } from '@shared/components/breadcrumb/breadcrumb.component'; @Component({ selector: 'app-expansion-panel', templateUrl: './expansion-panel.component.html', styleUrls: ['./expansion-panel.component.scss'], standalone: true, imports: [ BreadcrumbComponent, MatExpansionModule, MatFormFieldModule, MatInputModule, MatIconModule, MatButtonModule, MatDatepickerModule, ], }) export class ExpansionPanelComponent { breadscrums = [ { title: 'Expansion', items: ['UI'], active: 'Expansion', }, ]; panelOpenState = false; step = 0; setStep(index: number) { this.step = index; } nextStep() { this.step++; } prevStep() { this.step--; } constructor() { //constructor } } Regards

Hi In below data i want to display Father Phone Details data through loop in HTml. We are using Angular 17. If there is only one say "HOME" then it should be displayed like below Home 3564898976 { "id": "4fc922b0-08e0-45cf-a951-495fbdaaf88b", "effectiveFrom": null, "branchId": "ae8e930b-0d60-4cb7-8c39-ce953b036e81", "primaryEmail": "[email protected]", "currentStatus": "REGISTERED", "admissionNumber": "ADM2024001", "registrationNumber": "REG2024001", "backgroundVerification": "Complete", "backgroundVerificationRemarks": "Passed all checks", "parentEligibility": "Eligible", "parentEligibilityRemarks": "Meets eligibility criteria", "verbalSkills": "Good", "verbalSkillsRemarks": "Excellent communication", "writtenSkills": "Average", "writtenSkillsRemarks": "Needs improvement in writing", "medicalFitnessRemarks": "Fit for school activities", "height": 150, "weight": 45.5, "bloodGroup": "A_POSITIVE", "gender": "MALE", "hairColor": "BLACK", "disabilityId": "cce76c42-4165-4bc7-99ed-f25f2754238f", "disabilityDescription": "None", "doctorContact": "9876543210", "doctorName": "Dr. Smith", "academicClassSectionId": null, "academicSessionId": "e34894db-c03f-44c2-b5b1-3b728230e5ef", "academicClassId": "3621f296-29a7-4165-9960-65e4103463fb", "academicClassName": "5", "houseId": "135583ce-e93c-48c6-9e8b-cf1a12609279", "boardingHouseId": null, "dateOfBirth": "2018-05-15T00:00:00.000+00:00", "reservationCategoryId": "eabf3cd3-f054-48b4-9a5c-545cb0f8227e", "userId": null, "username": "[email protected]", "countryId": "037a25bf-e247-4436-9944-0feb1010feb1", "boardingType": "BOARDER", "phoneType": "SMS", "localContactNumber": "+1-234-567-8900", "aadhaarNumber": 123456789012, "birthCity": "New York", "nickName": "Johnny", "notes":

Hi I have date displayed like below but i want to display only Date Part in dd/Mm/yyyy 2018-05-15T00:00:00.000+00:00 Thanks

Hi I have below code in Html . I am using Angular 17. I want if ischildadopted = true then it should be displayed else not. class="fa fa-check-circle me-1"></i>Child adopted <div class="d-inline-block"> <div class="label bg-green rounded-pill m-1 col-auto"><i class="fa fa-check-circle me-1"></i>Security issue</div> <div class="label bg-green rounded-pill m-1 col-auto"><i *ngIf="record.isChildAdopted" ? class="fa fa-check-circle me-1"></i>Child adopted : display:"none"</div> "label bg-green rounded-pill m-1 col-auto"><i class="fa fa-check-circle me-1"></i>NIOS</div> </div> Thanks

Hi How to get phone no details on basis of Phone Type using Angular 17 this.fatherData = this.record.caregivers.find((c:any) => c.caregiverType === 'FATHER'); fatherData has below data returned. address : {id: '8fa4f1c7-b813-4a5a-bb56-ad239940f1fc', effectiveFrom: null, deletedAt: null, createdAt: '2024-07-17T13:11:40.575137Z', updatedAt: null, …} addressId : "8fa4f1c7-b813-4a5a-bb56-ad239940f1fc" branchId : "ae8e930b-0d60-4cb7-8c39-ce953b036e81" branchName : "Main Branch" caregiverType : "FATHER" createdAt : "2024-07-17T13:11:40.575727Z" createdBy : "vishal.singhal" dateOfBirth : "1984-11-10" deletedAt : null department : "" effectiveFrom : null emailDetails : [{…}] firstName : "Dharam" fullName : "Dharam Deol" hasCustody : false id : "5e0963c9-8e99-4431-b4d8-465b486ea3e1" lastName : "Deol" middleName : "" occupationId : "cf12688c-6e4e-42cc-8773-5dd159185448" occupationName : "Engineer" phoneDetails : [{…}] qualificationId : "2187934f-4644-4548-891e-4542121d9249" relationship : null salutationId : "f98d8cc5-b887-4a36-9cfc-e60fed8e1846" salutationName : "Mr." specialization : "" studentIds : null updatedAt : null updatedBy : null yearlyIncome : "6-8 lakh" Thanks

Hi I ahve below HTMl. I want if phone type = Home then hat no should be displayed in Home html. If Mobile then in Mobile HTMl if (this.record && this.record.caregivers) { this.fatherData = this.record.caregivers.find((c:any) => c.caregiverType === 'FATHER'); } <div class="col-md-3 col-6 align-items-center"> <div class="col"> <p class="label bg-blue rounded-pill mb-2"><i class="fa fa-phone me-1"></i>Phone</p> </div> <div class="col"> <small>Mobile</small> <h6>0111 522323</h6> </div> <div class="col"> <small>Home</small> <h6>0111 524563</h6> </div> </div> { "id": "4fc922b0-08e0-45cf-a951-495fbdaaf88b", "effectiveFrom": null, "branchId": "ae8e930b-0d60-4cb7-8c39-ce953b036e81", "primaryEmail": "[email protected]", "currentStatus": "REGISTERED", "admissionNumber": "ADM2024001", "registrationNumber": "REG2024001", "backgroundVerification": "Complete", "backgroundVerificationRemarks": "Passed all checks", "parentEligib

Hi In below Html i want if value is not null or false in ChildAdopted then it should not be displayed else displayed <div class="d-inline-block"> <div class="label bg-green rounded-pill m-1 col-auto"><i class="fa fa-check-circle me-1"></i>Child adopted</div> </div> Thanks

Hi How the below code works <td mat-cell *matCellDef="let element"> {{element[col]}} </td> <ng-container [matColumnDef]="col" *ngFor="let col of displayedColumns"> <th mat-header-cell *matHeaderCellDef> {{col}} </th> <td mat-cell *matCellDef="let element"> {{element[col]}} </td> </ng-container> Thanks

Hi I have below code . I want when user Clicks on Add Modal popup should open which has been defined in a Child component. Dynamic Table is a separate component <div class="card"> <div class="materialTableHeader"> <div class="right"> <ul class="tbl-export-btn"> <li class="tbl-header-btn"> <div class="m-l-10" matTooltip="ADD"> <button mat-mini-fab color="primary" > <mat-icon class="col-white">add</mat-icon> </button> </div> </li> </ul> </div> </div> </div> <ng-template #content let-data> <div mat-dialog-title> <h4> Product Form </h4> </div> <!-- <form [formGroup]="frmProduct" ngSubmit="Save()"> --> <!-- <form ngSubmit="Save()"></form> --> <div mat-dialog-content class="content"> <div class="row"> <mat-form-field appearance="outline"> <mat-label>Product Name</mat-label> <input matInput type="text" appAlphanumeric formControlName="ProductName"> <!-- <mat-error *ngIf="frmProduct.get('ProductName')?.invalid && (frmProduct.get('ProductName')?.touched || frmProduct.get('firstName')?.dirty)"> <span *ngIf="empForm.get('firstName')?.errors?.['required']">This is required</span> <span *ngIf="empForm.get('firstName')?.errors?.['minlength']">Minimum length is 4</span> </mat-error> --> </mat-form-field> <mat-form-field appeara

Hi When i click on Add Modal is not opening. Below is the Dynamic Table Component HTML. <li class="tbl-header-btn"> <div class="m-l-10" matTooltip="ADD"> <button mat-mini-fab color="primary" (click)="openDialog($event)"> <mat-icon class="col-white">add</mat-icon> </button> </div> </li> openDialog($event:Event){ this.openModal.emit($event); debugger; } <ng-template #content let-data> <div mat-dialog-title> <h4> Product Form </h4> </div> <form [formGroup]="frmEmployee" ngSubmit="Save()"> <!-- <form ngSubmit="Save()"></form> --> <div mat-dialog-content class="content"> <div class="row"> <mat-form-field appearance="outline"> <mat-label>Product Name</mat-label> <input matInput type="text" appAlphanumeric formControlName="ProductName"> <!-- <mat-error *ngIf="frmProduct.get('ProductName')?.invalid && (frmProduct.get('ProductName')?.touched || frmProduct.get('firstName')?.dirty)"> <span *ngIf="empForm.get('firstName')?.errors?.['required']">This is required</span> <span *ngIf="empForm.get('firstName')?.errors?.['minlength']">Minimum length is 4</span> </mat-error> --> </mat-form-field> <mat-form-field appearance="outline"> <mat-label>Product Description</mat-label> <input matInput type="text" appNumeric formCon

Hi How the below code workd openDialog($event:Event){ this.openModal.emit($event); } <div class="m-l-10" matTooltip="ADD"> <button mat-mini-fab color="primary" (click)="openDialog($event)"> <mat-icon class="col-white">add</mat-icon> </button> </div> Thanks

Hi I have below header columns . In Actions how to show Dynamic Action button. We are using Dynamic Angular table. In some Components it can be Edit,Delete. In some it can be Edit,Delete,View. this.columns = [ { title: "Name", name: "empName" , visible: true }, { title: "Email", name: "empEmail" , visible: true }, { title: "Action", name: "actions" , visible: true }, Thanks

Hi I have below code but i want to display Sr. No <ng-container *ngFor="let item of columns"> <ng-container *ngIf="item.visible"> <ng-container [matColumnDef]="item.name"> <th mat-header-cell *matHeaderCellDef> <div *ngIf="item.name !== 'actions'"> <span mat-sort-header> {{ item.title }} </span> </div> <div *ngIf="item.name === 'actions'"> <span>{{ item.title }} </span> </div> </th> <td mat-cell *matCellDef="let element; let i = index"> <ng-container *ngIf="item.name !== 'actions' && item.name !== 'isActive' && item.name !== 'createdAt' && item.name !== 'isTeaching' && item.name !== 'isCurrent' && item.name !== 'isAdmissionsOpen' && item.name !== 'startDate' && item.name !== 'endDate' && item.name !== 'flagIcon' && item.name !== 'deletedAt'"> {{ element[item.name] }} </ng-container> <!-- <ng-container *ngIf="item.name === 'actions'"> <span mat-icon-button *ngFor="let actionButton of item.buttons" (click)="actionButton.click($event ,element)" class="btn"> <ng-container *ngIf="actionButton.type !== 'hard-delete' && actionButton.type !== 'Add-Section'"> </ng-container> </span> </ng-container> --> </td>

Hi I have below Typescript for columns. I want to display data in Dynamic Table Component. this.columns = [ // { title: "Id", name: "empId" , visible: true }, { title: "Name", name: "empName" , visible: true }, { title: "Email", name: "empEmail" , visible: true }, ] Below is the Data : {empId: 1512, empName: 'Mark1', empContactNo: '6754673254', empAltContactNo: '8762347483', empEmail: '[email protected]', …} <div class="responsive_table"> <mat-table [dataSource]="dataSource" class="w-100" matSort> <ng-container *ngFor="let item of columns"> <ng-container *ngIf="item.visible"> <ng-container [matColumnDef]="item.name"> <td mat-cell *matCellDef="let element; let i = index"> <ng-container *ngIf="item.name !== 'actions' && item.name !== 'isActive' && item.name !== 'createdAt' && item.name !== 'isTeaching' && item.name !== 'isCurrent' && item.name !== 'isAdmissionsOpen' && item.name !== 'startDate' && item.name !== 'endDate' && item.name !== 'flagIcon' && item.name !== 'deletedAt'"> {{ element[item.name] }} </ng-container> </td> </ng-container> </ng-container> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </mat-table>

Hi I have below data . What should be the HTMl code. It should be dynamic. I only want to display name,email. Sometimes it can be name,gender,email. I have Dynamic table Component. { no: 1, name: 'John Doe', gender: 'male', email: '[email protected]', address: '729 S. Paris Hill St', mobile: 1234567890, salary: 120000, }, { no: 2, name: 'Sarah Smith', gender: 'female', email: '[email protected]', address: '9003 Lake Street Hinesville', mobile: 1234567890, salary: 170000, }, { no: 3, name: 'Airi Satou', gender: 'male', email: '[email protected]', address: '848 Old Durham Street Piedmont', mobile: 1234567890, salary: 150000, }, { no: 4, name: 'Angelica Ramos', gender: 'male', email: '[email protected]', address: '8008 Anderson Drive Titusville', mobile: 1234567890, salary: 190000, }, { no: 5, name: 'Ashton Cox', gender: 'female', email: '[email protected]', address: '620 East Ave. Dundalk', mobile: 1234567890, salary: 140000, }, { no: 6, name: 'Cara Stevens', gender: 'male', email: '[email protected]', address: '9641 Delaware Street Camp Hill', mobile: 1234567890, salary: 220000, }, { no: 7, name: 'Jens Brincker', gender: 'male', email: '[email protected]', address: '83 Pennsylvania Road', mobile: 1234567890, salary: 170000, }, Thanks