How To Run NPM Install From Behind A Proxy Server

 Posted on September 21, 2024  |  

Image Source Google Search In this quick tutorial, you’ll learn how to install NPM dependencies from behind a proxy server. While working on an Angular project recently, I had to clone the source code and install the required dependencies. To my surprise, nothing worked as expected. Things are somewhat different when run try to install Node packages from behind a proxy server. You need to set the https-proxy, proxy and registry to install the dependencies. [Read More]

Looping Nested Object Keys With ngFor In Angular

 Posted on September 19, 2024  |  

In this tutorial, you’ll learn how to loop over nested object keys using ngFor in Angular. I’ll provide an example from one of projects where I used ngFor in Angular to loop over nested object keys and values. Before diving into the issue I will explain a bit about what are ngFor in Angular and how you can use them. So, let’s get started. Getting Started With Angular App Let’s start by creating an Angular web app using the Angular CLI tool. [Read More]

Conditional Class in Angular

 Posted on September 1, 2024  |  

How to set conditional classes in Angular?

You can set the class of an element dynamically using ngClass directive.

[ngClass]="{'red': a < 5 , 'blue' : a > 10}"

From the above code, class red or blue will be set if the conditions are satisfied. If both the conditions are satisfied, then the element is assigned both the classes.

How To Use Leaflet In Angular Web Apps

 Posted on September 1, 2024  |  

In this tutorial, you’ll learn how to use leaflet in Angular web applications. From the official documentation, Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the mapping features most developers ever need. This tutorial assumes the reader to have a basic understanding of Angular web application development. You’ll start by creating an Angular web app and learn how to use Leaflet in Angular. [Read More]

Top 5 Best Practices for Angular App Security

 Posted on September 1, 2024  |  

Image Source Angular is a popular framework for app development, but its security standards can be tricky to understand. To ensure your applications are secure, you need to familiarize yourself with the most common security vulnerabilities and the latest security practices. Angular Ecosystem Security Overview Whether you are already using Angular or are considering using it, you should be aware of where this framework’s security stands. To start, it’s important to note that Angular falls under Google’s publicly available security guidelines. [Read More]

Unit Testing PrimeNG Confirm Dialog | Karma | Jasmine

 Posted on September 1, 2024  |  

How to unit test PrimeNG ConfirmDialog ConfirmationService. Let’s say you are using the PrimeNG confirmDialog. Here is how your app.component.html looks: <p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle"></p-confirmDialog> <button (click)="confirm()" pButton icon="pi pi-check" label="Confirm"></button> Here is the app.component.ts file. import { Component, OnInit } from '@angular/core'; import { ConfirmationService } from 'primeng/api'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [ConfirmationService] }) export class AppComponent implements OnInit { public confirmSuccess: any; public confirmReject: any; constructor(private confirmationService: ConfirmationService) { } ngOnInit() { } confirm() { this. [Read More]

Unit Testing Promise.all in Angular | Karma | Jasmine

 Posted on July 30, 2021  |  

Unit Testing Promise.all in Angular. Unit testing asynchronous code in Angular. Let’s say, this is your component code, import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { CommonService } from './common.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { public firstAPIresponse:any; public secondAPIresponse:any; public thirdAPIresponse:any; public errorMessage:any; constructor(private http : HttpClient, private service : CommonService){} ngOnInit(){ this.makeAPICall(); } makeAPICall(){ Promise. [Read More]

Make API Call From Angular | Connect Angular to Node REST API

 Posted on June 21, 2021  |  

How to make an API call from Angular ? Connect Angular app to Node REST API. Import HttpClientModule Start by importing HttpClientModule in your app.module.ts file. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Import the HttpClient in the component or service from where you are making the API call. [Read More]

Mock Service Using SpyOn | Angular Unit Testing | Karma | Jasmine

 Posted on June 21, 2021  |  

How to use spyOn in Angular Unit Testing? How to mock a service in Angular Unit Testing ? Here is your component code that you want to unit test. import { Component } from '@angular/core'; import { DataServiceService } from '../app/data-service.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'angu-unit-test'; constructor(private dataService : DataServiceService){} count = 0; config = {}; data; calculate(a,b){ this.count = (a * b) + 100 return this. [Read More]

Angular Material AutoComplete With API

 Posted on May 27, 2021  |  

In this video, you’ll learn how to use material auto complete with an API. For the sake of this tutorial we will be using APIs from JSONPlaceHolder. You’ll learn, How to use Material AutoComplete in Angular project. How to use Material AutoComplete With an API. Resources: Source Code How to Implement Angular AutoComplete With API Thanks for watching and don’t forget to show some love by liking and sharing the video. [Read More]