Full Trust European Hosting

BLOG about Full Trust Hosting and Its Technology - Dedicated to European Windows Hosting Customer

AngularJS Hosting Europe - HostForLIFE :: Using Angular CLI 17.0.6, Node: 20.0.1, and npm 10.2.3 on Windows, Create Your First Angular

clock December 19, 2023 06:08 by author Peter

On November 6, 2023, Angular 17 was launched, and I wanted to create my first application with it. These instructions will help you create your first Angular 17 application. With the exception of a few advanced capabilities that must be enabled, this is essentially the same if you have expertise with earlier Angular versions. In addition to a fresh style, Angular 17 introduces several new capabilities for developers and performance. Additionally, Angular17 has well-managed documentation.

Developing an Angular 17 Application
Required conditions

Install the most recent LTS version of NODE JS. I've utilized 20.10.0. Installing and downloading this can be done at https://nodejs.org/en.
During installation, make sure to tick the set Path in the Environment Variables option.

Installing Angular CLI is a required that will be done concurrently with node js installation.
After the installation is complete, use CMD to verify the installed version of the node.

Enter "node -v" in the command window. This screen grab below displays the version that I have installed.

After Node js has been successfully installed, Typescript needs to be installed. Try using the admin version of cmd. Given that folder rights were restricted, I knew I had to take this action. I've included some instructions below in case you're operating through a proxy.

CMD "npm install –g typescript" should be run.

if any of the following mistakes happen. CERT_IN_CHAIN_SELF SIGNED.

I got around the certificate, which is the above error, with this cmd. "npm config set strict-ssl false" Strict SSL configuration will now be set to false. If the installation goes well, it will seem like the screen below, which indicates that the installation was successful.

Run the command "npm install -g @angular/cli@latest" as shown above the screen. It does say about funding which is to ask for funds.
Some of these packages installed are probably asking for funds. (optional)

You can check the version installed using the command "ng version"

Now that the prerequisites have been met, use the command "ng new {APPName}" to begin building a new Angular17 application. The CLI will inquire about the type of styling you want to use and whether you need to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when you create a new application.

When user interaction with the backend is required, server-side rendering is employed.

To launch the ng serve –o application, use this command. Your browser will launch it at http://localhost:4200/.

Thank you, and Hopefully, this article helped you get started with creating an angular 17 application.

AngularJS Hosting Europe - HostForLIFE :: In an Angular Application, Create a Custom Search Filter Pipeline

clock December 13, 2023 06:14 by author Peter

This post will teach us how to use an Angular application to design a custom search filter pipe.

Required conditions

Basic familiarity with Angular 2 or later; installation of Node and NPM; Visual Studio Code; Bootstrap (Optional)
The command to create an Angular project is as follows.
ng new angapp

Now install Bootstrap by using the following command.
npm install bootstrap --save

Now open the styles.css file and add Bootstrap file reference. To add a reference in the styles.css file add this line.
@import '~bootstrap/dist/css/bootstrap.min.css';

Create Search Filter Pipe
Now create a custom pipe by using the following command.
ng generate pipe searchfilter

Now open searchfilter.pipe.ts file and add following code.
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'searchFilter' })
export class FilterPipe implements PipeTransform {
   transform(value: any, args?: any): any {
    if (!value) return null;
    if (!args) return value;

    args = args.toLowerCase();
    return value.filter(function(item:any) {
      return JSON.stringify(item)

Now import this pipe into the app module.Add following code in app.module.ts.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FilterPipe } from './searchfilter.pipe';
import { SearchlistComponent } from './searchlist/searchlist.component';
  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Now create a new component by using the following command.
ng g c searchlist

Now open searchlist.component.html file and add the following code.
<div class="container">
    <div class="card">
        <div class="form-group">
            <label for="search-text">Search Text</label>
            <input type="email" class="form-control" id="search-text" aria-describedby="search-text"
                [(ngModel)]="searchText" placeholder="Enter text to search" autofocus>
        <ul class="list-group list-group-flush">
            <li class="list-group-item" *ngFor="let user of userlist | searchFilter: searchText">

Now open searchlist.component.ts file and add the following code.
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
  selector: 'app-searchlist',
  templateUrl: './searchlist.component.html',
  styleUrls: ['./searchlist.component.css']
export class SearchlistComponent implements OnInit {
  data: any;
  searchText = '';
  userlist: any;
  constructor(private httpclient: HttpClient) {
  ngOnInit(): void {
    this.httpclient.get('https://dummyjson.com/users').subscribe((res: any) => {
      this.data = res
      this.userlist = this.data.users;

Now open app.component.html file and add the following code.
<div class="container" style="margin-top:10px;margin-bottom: 24px;">
  <div class="col-sm-12 btn btn-info">
    Create Custom Search filter pipe in Angular Application

Now run the application using npm start and check the result.

Now type some text into the box and run a search.

AngularJS Hosting Europe - HostForLIFE :: Essentials of Dependency Injection in Angular

clock December 8, 2023 08:06 by author Peter

Dependency Injection (DI) is a powerful front-end framework developed by Google that makes it easy to manage services and components inside an application. Dependencies can be received by components instead of being created directly thanks to DI, a design paradigm that encourages loose coupling. In order to better understand DI in Angular, this post will go through its core ideas, benefits, and real-world application using code samples.

Injecting Dependency in Angular
A software design technique called dependency injection makes it possible to create easily maintained, loosely linked components. DI is a method used with Angular that allows a component to obtain its dependencies from outside sources instead of generating them on its own. The Angular Injector, which is in charge of instantiating and maintaining the dependencies of different components, is usually this external source.

Dependency Injection's Advantages in Angular

  • Loose Coupling: DI encourages loose coupling, which makes it simpler to update or replace dependencies without impacting the whole program.
  • Testability: Dependencies can be easily injected to mock or test during unit testing, making DI-patterned components more testable.
  • Reusability: DI makes services and components more reusable because it makes it simple to inject them into various application sections without requiring any changes.
  • Maintainability: The codebase is more maintainable because to the concern separation made possible by DI. It is less probable for changes made to one section of the application to affect other sections.

How Dependency Injection Operates in Angular?
The Angular Injector is used in Angular to construct the DI system. In order to control the scope of dependencies, the Injector upholds a hierarchical structure while generating instances of components, services, and other objects.

Here's a quick example to help you grasp how DI functions in Angular. Think about a service known as DataService.

// data.service.ts

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

  providedIn: 'root',

export class DataService {
  getData(): string {
    return 'This is data from the DataService';

To indicate that the DataService in this example is a service that may be injected into other components or services, the @Injectable decorator is used. Throughout the application, there will only be one instance of DataService thanks to the providedIn: 'root' setting.

Let's use this service to create an AppComponent component now.

// app.component.ts

import { Component } from '@angular/core';
import { DataService } from './data.service';

  selector: 'app-root',
  template: '<h1>{{ data }}</h1>',

export class AppComponent {
  data: string;
  constructor(private dataService: DataService) {
    this.data = this.dataService.getData();

In this example, the AppComponent class has a constructor that takes an instance of DataService as a parameter. The Angular Injector automatically injects the appropriate instance when creating an AppComponent.

import { Component, Injector } from '@angular/core';
import { DataService } from './data.service';


  selector: 'app-root',
  template: '<h1>{{ data }}</h1>',


export class AppComponent {
  data: string;
  constructor(private injector: Injector) {
    const dataService = this.injector.get(DataService);
    this.data = dataService.getData();

In this example, we inject the Injector itself and then use it to manually get an instance of the DataService. While manual injection is rarely needed, it provides a way to have more control over the injection process.

In summary
A key idea in Angular that enhances the framework's adaptability, testability, and maintainability is dependency injection. You may build scalable and modular Angular applications by comprehending DI and applying it into your application architecture. The hierarchical structure enables for fine-tuning the scope of dependencies, while the automatic injection offered by the Angular Injector makes dependency management easier.

Adopting and understanding Dependency Injection will definitely improve the overall architecture and code quality as you continue to develop Angular applications.

About HostForLIFE

HostForLIFE is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes.

We have offered the latest Windows 2019 Hosting, ASP.NET 5 Hosting, ASP.NET MVC 6 Hosting and SQL 2019 Hosting.

Tag cloud

Sign in