Full Trust European Hosting

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

AngularJS Hosting Europe - HostForLIFE.eu :: Change Style Dynamically in Various Ways Using AngularJS

clock November 20, 2024 09:53 by author Peter

This article explains how to change the style dynamically in various ways using AngularJS. AngularJS provides three different ways to change the style dynamically. People always search for methods to change their style dynamically, AngularJS can solve their problems in any of three ways.


Step 1. First of all, you need to add an external Angular.js file to your application, you can go to the AngularJS official site or download my source code and then fetch it or you can click on this link to download it: ANGULARJS.

After downloading the external file you need to add this file to the Head section of your application as in the following.
<head runat="server">
    <title></title>
    <script src="angular.min.js"></script>
</head>

Step 2. Now I will create some simple CSS classes to be applied dynamically, or you can say at runtime.
<style>
    .changeColor {
        color: blue;
    }
    .changeSize {
        font-size: 30px;
    }
    .italic {
        font-style: italic;
    }
</style>


Here I have created three classes, namely changeColor, changeSize, and italic. The first CSS Class is used for changing the color of the text to Blue, the second is for changing the text size and the last one is for making the Text Italic.

Now we have created the classes to be applied, we need to work on the ViewModel or design part of our application where simple coding needs to be done to apply the change in CSS.

First Method
In the first method, objects of the classes are created that are called using the ng-model, let's see this by implementing it in our application as in the following.
<p ng-class="{changeColor: Color, changeSize: Size, italic: Italic}">
    Changes Will be Seen in Me
</p>
<input type="checkbox" ng-model="Color"> Change Color (apply "changeColor" class)<br>
<input type="checkbox" ng-model="Size"> Change Size (apply "changeSize" class)<br>
<input type="checkbox" ng-model="Italic"> Make it Italic (apply "italic" class)


Here I have applied the CSS to a <p> Tag, and classes are applied using the ng-class directive, here in the ng-class you can see that I have created an object of each class such as for changeColor, "Color" is created. After this I applied the binding using the ng-model, I created three checkboxes and in each checkbox ng-model is applied, each ng-model provides the binding using the objects created in the ng-class.

So, If we check the first checkbox then the color of the text will change to Blue, similarly, if we check the second and third checkboxes then the text size and its style will change.

Let's see the output.

Output
As I run the application and check the checkboxes then this type of output will be seen.

Second Method
Now, I will show you the Second Method of applying the CSS dynamically. In this method, class names will be called to Apply the CSS.
<p ng-class="style">I Will Show Second Method</p>
<input type="text" ng-model="style" placeholder="Type: changeSize changeColor italic">


Here you can see that in the ng-class I have passed the complete style, since I have passed the style in ng-class it will call all the classes that are created in that style. Then I created a TextBox to which the style is bound using the ng-model, whatever name is provided in the TextBox, the same style will be applied to the text provided through the <p> tag. If the the name provided in the TextBox doesn't match the CSS Class than nothing will happen to the text and nothing will be applied.

Let's see the output.

Output


Third Method
Now, I will show you the Third Method for applying the CSS dynamically.

In this method, CSS classes will be called in the order they were created.
<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
<input ng-model="style1" placeholder="Type: changeSize, changeColor or italic"><br>
<input ng-model="style2" placeholder="Type: changeSize, changeColor or italic"><br>
<input ng-model="style3" placeholder="Type: changeSize, changeColor or italic"><br>

Here you can see that I have applied the CSS to the <p> tag using the ng-class but this time I have called the classes by the order they were created, style1 is automatically bound to the first class, similarly style2 and style3 are bound to the second and third class. Then I created three Textboxes that are bound to style 1, 2, and 3 separately, whatever CSS name is provided in these textboxes, the same CSS class will be applied to the Text provided in the <p> tag.

Let's see the output.

Output

The complete code of this application is as follows.
<html ng-app xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title></title>
    <script src="angular.min.js"></script>
    <style>
        .changeColor {
            color: blue;
        }
        .changeSize {
            font-size: 30px;
        }
        .italic {
            font-style: italic;
        }
    </style>
</head>
<body>
    <p ng-class="{changeColor: Color, changeSize: Size, italic: Italic}">Changes Will be Seen in Me</p>
    <input type="checkbox" ng-model="Color"> Change Color (apply "changeColor" class)<br>
    <input type="checkbox" ng-model="Size"> Change Size (apply "changeSize" class)<br>
    <input type="checkbox" ng-model="Italic"> Make it Italic (apply "italic" class)
    <hr>
    <p ng-class="style">I Will Show Second Method</p>
    <input type="text" ng-model="style" placeholder="Type: changeSize changeColor italic">
    <hr>
    <p ng-class="[stle1, stle2, stle3]">I Will Show Third Method</p>
    <input ng-model="stle1" placeholder="Type: changeSize, changeColor or italic"><br>
    <input ng-model="stle2" placeholder="Type: changeSize, changeColor or italic"><br>
    <input ng-model="stle3" placeholder="Type: changeSize, changeColor or italic"><br>
</body>
</html>



AngularJS Hosting Europe - HostForLIFE.eu :: RxJS Operator Essentials: Map, Tap, Filter, and More

clock November 14, 2024 09:21 by author Peter

If you've been working with Angular for a while and find some RxJS pipeable operators slightly confusing, we will explore these familiar operators here.


Great, let’s dive into this exciting topic.

What is an RxJS Operator?
RxJS ships with more than 100 operators.
These operators are one of the building blocks of RxJS.
It is handy for manipulating (process or transform) streams, which are data sequences over time.
Remember that operators are functions, and there are two types of operators.

Let’s see them one by one.

RxJS map Operator

The map function in RxJS is an operator that transforms each emitted value from an observable based on a provided function, returning a new observable with modified values.
Let us see an example.

Creation Operators
We won’t be exploring the creation operator, but it is essential to give an overview. Creation operators are functions that can create an Observable with some expected predefined behavior or by joining other Observables.

Here are some familiar creation operators: of, from, fromEvent, and range.

Let’s have one example.

import { Component, OnDestroy, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { from, Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'RxJSOperators';
  subFrom$!: Subscription;

  public ngOnInit(): void {
    this.subFrom$ = from([2, 4, 6, 8]).subscribe({
      next: (item) => console.log(item),
      error: (err) => console.log(err),
      complete: () => console.log('completed')
    });
  }

  public ngOnDestroy(): void {
    this.subFrom$.unsubscribe();
  }
}

From our code example, we have seen that inside the ngOnInit, the from([2,4,6,8]) method creates an observable that emits each number in the array sequentially.

The subscribe method attaches an observer to this observable.

  • First, next, which logs each item emitted.
  • Second, error logs any errors if there’s one.
  • Third, complete which logs “completed” when the observable completes.

Although this is not the main topic of our article, it is a good thing to have an idea.

Pipeable Operators

Pipeable operators are the kind that can be piped to Observables.

Let’s see the syntax below.

observableInstance.pipe(operator);
or
observableInstance.pipe(operatorFactory());


Essentially, the operator and operatorFactory behave as a single method in RxJS. However, there’s a difference between the two. Operator factories are functions that accept parameters to configure their behavior and immediately return operator functions.

Operator functions are the results of these calls (configured functions), which can then transform the observable’s data inside the .pipe().

Let’s see code examples of pipeable operators in the next sections.

RxJS map Operator

The map function in RxJS is an operator that transforms each emitted value from an observable based on a provided function, returning a new observable with modified values.

Let us see an example.


import { Component, OnDestroy, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { from, map, Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'RxJSOperators';
  subCustomer1!: Subscription;

  public ngOnInit(): void {
    const customer$ = from([
      { id: 1, jerseyNumber: 23, age: 61, fullName: "Michael Jordan" },
      { id: 2, jerseyNumber: 23, age: 43, fullName: "Lebron James" },
      { id: 3, jerseyNumber: 24, age: 89, fullName: "Kobe Bryant" }
    ]);

    this.subCustomer1 = customer$
      .pipe(
        map(item => ({
          ...item, shoe: "Nike"
        }))
      )
      .subscribe((result) => console.log(result, "Added Nike shoes"));
  }

  public ngOnDestroy(): void {
    this.subCustomer1.unsubscribe();
  }
}

From our example, the map operator transforms each customer object by adding a new property, shoe, with a value of "Nike". Then, each customer object is spread (...item) to retain the existing properties while adding the shoe property, resulting in a new object.

Finally, log the result to the console with a message saying, "Added Nike shoes". Let’s see the output below.

RxJS tap Operator
The tap function in RxJS is an operator that allows you to perform side effects, like logging or debugging, on each emitted value without altering the observable’s values.

Let us see an example.
import {Component, OnDestroy, OnInit} from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {filter, from, map, Subscription, tap} from 'rxjs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements  OnInit, OnDestroy {
  title = 'RxJSOperators';
  subCustomer2!: Subscription;
  public ngOnInit() {
    const customer$ = from([
              { id: 1, jerseyNumber: 23, age: 61, fullName: "Michael Jordan"},
              { id: 2, jerseyNumber: 23, age: 43, fullName: "Lebron James"},
              { id: 3, jerseyNumber: 24, age: 89, fullName: "Kobe Bryant"}
               ]);

    this.subCustomer2 = customer$.pipe(
      tap(item => console.log(item, "Debugging this item before putting Nike shoes")),
      map(item => ({
       ...item, shoe: "Nike"
      })),
      tap(item => console.log(item, "Debugging this item after putting Nike shoes")))
      .subscribe((result) => { console.log(result, "Final result"); });
  }
  public ngOnDestroy() {
    this.subCustomer2.unsubscribe();
  }
}


The first tap operator logs each customer object to the console before transforming. This is useful for debugging, allowing you to inspect the original data emitted by the customer.

Each item is logged with the message "Debugging this item before putting Nike shoes". The map operator transforms each customer object by adding a new property, shoe, with a value of "Nike".

As discussed in the previous example, this operation uses object spread (...item) to retain the original properties while adding the new shoe property, resulting in a modified object for each customer.

The second tap operator logs each transformed customer object, allowing you to verify that the shoe property has been successfully added.

Each item is logged with the message "Debugging this item after putting Nike shoes".

Finally, the subscribe method listens to the transformed observable.

For each item, it logs the final transformed result along with the "Final result" to indicate the completion of the transformation.

Let’s see the output below.

 

RxJS filter Operator
The filter function in RxJS is an operator that emits only the values from an observable that passes a specified condition, effectively filtering out values that don’t meet the criteria.

Let us see an example.
import {Component, OnDestroy, OnInit} from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {filter, from, map, Subscription, tap} from 'rxjs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements  OnInit, OnDestroy {
  title = 'RxJSOperators';
  subCustomer3!: Subscription;

  public ngOnInit() {

    const customer$ = from([
               { id: 1, jerseyNumber: 23, age: 61, fullName: "Michael Jordan"},
               { id: 2, jerseyNumber: 23, age: 43, fullName: "Lebron James"},
               { id: 3, jerseyNumber: 24, age: 89, fullName: "Kobe Bryant"}
               ]);

    this.subCustomer3 = customer$.
                             pipe(filter( item => item.jerseyNumber === 23)).
                              subscribe((result) => { console.log(result); });

  }

  public ngOnDestroy() {

    this.subCustomer3.unsubscribe();
  }
}


The filter(item => item.jerseyNumber === 23) filters the data, allowing only objects where jerseyNumber is 23 to pass through the stream. In this example, Michael Jordan and LeBron James meet this condition, while Kobe Bryant does not.

Let’s see the output below.

RxJS take Operator
The take function in RxJS emits only the first specified number of values from an observable and then completes.

Let us see an example.
import {Component, OnDestroy, OnInit} from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {filter, from, map, Subscription, take, takeLast, tap} from 'rxjs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements  OnInit, OnDestroy {
  title = 'RxJSOperators';
  subCustomer4!: Subscription;

  public ngOnInit() {

    const customer$ = from([
               { id: 1, jerseyNumber: 23, age: 61, fullName: "Michael Jordan"},
               { id: 2, jerseyNumber: 23, age: 43, fullName: "Lebron James"},
               { id: 3, jerseyNumber: 24, age: 89, fullName: "Kobe Bryant"}
               ]);

    this.subCustomer4 = customer$.
    pipe(
        filter( item => item.jerseyNumber === 23),
        take(1)
        ).
    subscribe((result) => { console.log(result); });

  }

  public ngOnDestroy() {

    this.subCustomer4.unsubscribe();
  }
}

The filter(item => item.jerseyNumber === 23), filters the data to only include customers with a jerseyNumber of 23. This will allow only Michael Jordan and LeBron James through the stream. While take(1) operator limits the stream to emit only the first item that passes the filter condition.

After emitting this first item, it automatically completes the Observable.

Let’s see the output below.

RxJS takeLast Operator
The takeLast function emits only the last specified number of values after the source observable completes.

Let us see an example.
import {Component, OnDestroy, OnInit} from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {filter, from, map, Subscription, take, takeLast, tap} from 'rxjs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements  OnInit, OnDestroy {
  title = 'RxJSOperators';
  subCustomer5!: Subscription;

  public ngOnInit() {

    const customer$ = from([
               { id: 1, jerseyNumber: 23, age: 61, fullName: "Michael Jordan"},
               { id: 2, jerseyNumber: 23, age: 43, fullName: "Lebron James"},
               { id: 3, jerseyNumber: 24, age: 89, fullName: "Kobe Bryant"}
               ]);

    this.subCustomer5 = customer$.
      pipe(takeLast(1)).
      subscribe((result) => { console.log(result); });

  }
  public ngOnDestroy() {

    this.subCustomer5.unsubscribe();
  }
}


The take last operator is used to emit only the last item from the Observable. In this example, takeLast(1) will only emit the very last item in the list—{ id: 3, jersey number: 24, age: 89, fullName: "Kobe Bryant" }—and then complete the Observable.

Summary
In this post, we have discussed RxJS operators and shown the types of operators, such as pipeable and creation operators. We have seen examples of map, tap, filter, take, and takeLast operators. I hope you have enjoyed this article as much as I have enjoyed writing it. Stay tuned for more information, and don't forget to download the attached project source code. If you run the project source code, don’t forget to command “npm install.” Until next time, happy programming, and good luck with your career!



Visual Studio Hosting - HostForLIFE.eu :: Dev Tunnel in Visual Studio Simplifies Local Development

clock November 5, 2024 09:21 by author Peter

Dev Tunnel is a feature introduced in Visual Studio 2022 that simplifies remote debugging and collaboration for developers. It creates a secure tunnel between our local machine and a remote environment, allowing you to access your local applications remotely as if they were running on the remote machine.



This is useful for,

  • Remote debugging: You can set breakpoints, inspect variables, and step through your code as if you were working locally.
  • Collaboration: You can share your local applications with team members or clients, even if they don't have direct access to your development environment.
  • Testing on different devices: You can test your applications on various devices.

(e.g., mobile devices, IoT devices) without requiring them to be on the same network as your development machine.

To use Dev Tunnel

  • Make sure you have Visual Studio 2022 installed with the necessary workloads.
  • In Visual Studio, create a new tunnel by selecting Debug > Dev Tunnels > Create A Tunnel.

Choose the appropriate settings, such as the tunnel type (persistent or temporary) and the authentication method.

Start debugging: Start your application in debug mode, and the tunnel URL will be displayed in the Output window.
Access the application remotely: Use the tunnel URL to access your application from any device with an internet connection.

Dev Tunnel Types
Dev Tunnels come in two primary types, they are,

Temporary Tunnels

  • Created on-demand and exists only for the duration of a debugging session.
  • A new URL is generated each time you start a debugging session.
  • Ideal for quick testing and sharing without long-term access needs.

Persistent Tunnels

  • Remain active even after you close Visual Studio.
  • Maintain the same URL across multiple debugging sessions.
  • Suitable for scenarios where you need consistent access to your application, such as remote collaboration or continuous testing.

Different Types of Access
Dev Tunnels offer flexible access control options as follows,

  • Private
    • Only the creator of the tunnel can access it.
    • Ideal for personal projects or sensitive applications.
  • Organization
    • Members of the same organization as the creator can access the tunnel.
    • Useful for team collaboration within an organization.
  • Public
    • Anyone with the tunnel URL can access it.

Questions & Answers
Is a Microsoft account strictly necessary for accessing dev tunnels?


Yes, we do need a Microsoft account to use Dev Tunnels. This account is used for authentication and authorization purposes to ensure secure access to your local development environment.

Here are the reasons why a Microsoft account is required.

  • Security: By using a Microsoft account, you can control who has access to your Dev Tunnel and protect your sensitive data.
  • Authentication: The Microsoft account verifies your identity and grants you permission to create and use Dev Tunnels.
  • Account Management: Your Microsoft account allows you to manage your Dev Tunnels, including deleting them or modifying their settings.


To use Dev Tunnels, you can sign in with your Microsoft account, Microsoft Entra ID, or GitHub account. Once you're signed in, you can create and manage your Dev Tunnels.

Will the URL change if we close Visual Studio or stop debugging?

Yes, the Dev Tunnel URL will change if you close Visual Studio or stop debugging your application. This is because Dev Tunnels are typically temporary, meaning they are created on-demand and destroyed when the connection is closed.

However, you can create persistent tunnels that will maintain the same URL even after you close Visual Studio.
In conclusion, Dev Tunnel is a powerful tool that can significantly improve your development workflow by making remote debugging and collaboration easier and more efficient. If you're working with remote teams or need to test your applications on different devices, Dev Tunnel is definitely worth considering.



Visual Studio Hosting - HostForLIFE.eu :: VS Code Auto-Format Code on Save to Simplify Your Processes

clock October 30, 2024 09:27 by author Peter

For any developer, keeping code neat and orderly is essential, but worrying about formatting all the time can interfere with productivity. What if your code could be formatted automatically each time you hit save? This post will discuss a straightforward yet effective feature in Visual Studio Code (VS Code) that handles formatting for you with a single click.

Step-by-Step Guide: Enabling Format on Save
The magic of auto-formatting in VS Code lies in the "Format on Save" feature. Here's how you can enable it.

  • Open Visual Studio Code: Launch VS Code on your system.
  • Navigate to Settings: Click on `File` in the top menu, then select `Preferences` -> `Settings`.
  • Search for Format on Save: In the search bar, type "save" to filter the settings related to saving files. Look for the option labeled Format On Save. Look in the below image.

  • Enable the Feature: Check the box next to "Format On Save" to enable the feature.
    If you haven't selected a default formatter, VS Code will prompt you to choose one when you enable "Format on Save." You can pick from the available formats installed in your environment. For example, if you have Prettier installed, you can select it as your default formatter. Simply choose the one that suits your needs, and VS Code will use it to format your code every time you save.

The Magic of Auto-Formatting
Once you've enabled "Format on Save," you can write code without worrying about the formatting. Whether you're pasting in code snippets, writing redundant code, or simply speeding through a task, VS Code will ensure everything is clean and organized the moment you hit `CTRL+S`.

For example, imagine you write a block of redundant/dirty JavaScript code like this before Save click.

Without manually adjusting spaces or aligning braces or formatting, simply press `CTRL+S`, and VS Code will automatically format it.

See the magic; now, every time you click on save it'll automatically restructure the whole code.

Why Use Format on Save?

  • Consistency: Ensure consistent code style across your project without manual intervention.
  • Time-Saving: Focus more on logic and less on formatting, as VS Code handles the latter for you.
  • Error Reduction: Properly formatted code is easier to read and debug, reducing the likelihood of syntax errors.

Conclusion
With VS Code's "Format on Save" feature, you can keep your code neat and tidy with minimal effort. It’s a small setting that makes a big difference, letting you code faster and smarter. No need for additional tools—just code, save, and let VS Code do the rest. Give it a try, and experience the magic of auto-formatting in your next coding session.

Thanks a Lot, Everyone! Is this guide helpful? Give it a thumbs up and share it with your fellow developers! Your support keeps the tips and tricks coming.
Happy coding!



AngularJS Hosting Europe - HostForLIFE.eu :: Angular Directives 101

clock October 22, 2024 07:36 by author Peter

If you have been working with Angular directives for quite some time now, this article may help you as a refresher; if you are a beginner, this may get you started with Angular directives. We’ll try to break down the concept into its core parts and give easy examples to understand and approach.


Okay, then, let’s try to get started.

What is an Angular Directive?

Angular directives are HTML attributes that extend the behavior or the appearance of a standard HTML element. In other words, we can say that directives are simply instructions to the DOM. That’s why when we apply a directive to an HTML element or even an Angular component, we can add custom behavior or alter its appearance.
The excellent thing is that Angular provides a set of built-in directives that we can use in our components to cover most use cases.
These Angular built-in directives are part of the CommondModule.

So, we need to import CommonModule when we want to use them.

See an example of importing the built-in directives below.
import {NgForOf, NgIf, NgSwitch, NgSwitchCase} from '@angular/common';

For more information, you can check this official documentation https://v17.angular.io/api/common/CommonModule.

Types of Directives

We need to know the types of directives when dealing with Angular.

Let’s see them one by one.

Component Directives

These are directives with an associated template.
That’s why this is the commonly used directive in Angular application development.
Let’s see an example below.
import { Component } from '@angular/core';

@Component({
  selector: 'app-component-directives-sample',
  standalone: true,
  imports: [],
  templateUrl: './component-directives-sample.component.html',
  styleUrl: './component-directives-sample.component.css'
})
export class ComponentDirectivesSampleComponent {

}

From our example above, if you are already familiar with components and how to generate components.
That’s fundamentally it.
Just remember that all components are directives, but not all directives are components.
Components extend the concept of directives by providing a view (template) to render.

Structural Directives

Structural directives are used to manage the elements from the DOM, such as adding or removing elements. If a developer is building dynamic and interactive web applications with Angular, managing the display of elements based on certain conditions or iterating over a collection is essential.

Angular provides three powerful structural directives to handle these scenarios: *ngIf, *ngSwitch, and *ngFor.

Let’s dive into how these directives work and how to use them.
The *ngIf

This directive allows you to conditionally display or remove an element from the DOM based on a boolean expression.
If the condition is evaluated as true, the element is rendered; otherwise, it is removed from the DOM.
See the example below.

app.component.ts
import { Component } from '@angular/core';
import {NgIf} from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgIf],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'sampleDirectives';
  showProduct: boolean = true;
  products:Array<any>= [
    { id: 1,
      name: "Intel Core i9-11900K",
      type: "CPU"
    },
    {
      id: 2,
      name: "AMD Ryzen 9 5950X",
      type: "CPU"
    }
  ];
}


app.component.html
<div *ngIf="showProduct">
  <h2 [innerText]="products[0].type"></h2>
  <p [innerText]="products[0].name"></p>
</div>

From our sample code, we have the showProduct set to true and a product array to hold dummy product data.
With this view, we have decided to get the first index item of the products array.
As a result, the HTML view will show the product type and the product name.
See the output below.

The *ngSwitch
As you can see, the *ngIf works excellent for a single condition, while *ngSwitch is more efficient when you need to toggle between multiple options.
It looks almost like a switch-case statement in programming, where you can choose between different elements to render based on an expression.

See the example below.

app.component.ts
import { Component } from '@angular/core';
import {NgForOf, NgIf, NgSwitch, NgSwitchCase} from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ NgIf, NgSwitch, NgSwitchCase, NgForOf],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'sampleDirectives';
  showProduct: boolean = true;
  products:Array<Product>= [
    { id: 1,
      name: "Intel Core i9-11900K",
      type: "CPU"
    },
    {
      id: 2,
      name: "AMD Ryzen 9 5950X",
      type: "CPU"
    },
    {
      id: 3,
      name: "EVGA SuperNOVA 850 G5",
      type: "Power Supply"
    },
    {
      id: 4,
      name: "G.Skill Ripjaws V Series 32GB",
      type: "Memory"
    }
  ];
  firstProduct: Product;
  secondProduct: Product;
  thirdProduct: Product;

  constructor() {
    this.firstProduct = this.products[0];
    this.secondProduct = this.products[1];
    this.thirdProduct = this.products[2];
  }
}

export class Product {
  id: number = 0;
  name: string = "";
  type: string = "";
}


app.component.html
<div [ngSwitch]="thirdProduct.type">
  <h2 [innerText]="thirdProduct.type"></h2>
  <p [innerText]="thirdProduct.name"></p>
  <p *ngSwitchCase="'CPU'">
    This product is a CPU.
  </p>
  <p *ngSwitchCase="'Memory'">
    This is a RAM (Random Access Memory).
  </p>
  <p *ngSwitchCase="'Power Supply'">
    This is a Power Supply.
  </p>
</div>


As a result, the HTML view will show the product type and the product name.

See the output below.

The *ngFor
I know what you are thinking if you have been dealing with programming. *ngFor is used to repeat an element for each item in a collection. Looks like a loop, right?
From our previous example, we won’t change “app.component.ts.”
We’ll add the *ngFor inside the app.component.html.
Let’s see an example below.

app.component.html
<div>
  <ul>
    <li *ngFor="let product of products">
        <h2 [innerText]="product.name"></h2>
        <p [ngSwitch]="product.type">
          <span *ngSwitchCase="'CPU'">
            This product is a CPU.
          </span>
          <span *ngSwitchCase="'Memory'">
            This is a RAM (Random Access Memory).
          </span>
          <span *ngSwitchCase="'Power Supply'">
            This is a Power Supply.
          </span>
        </p>
    </li>
  </ul>
</div>


As a result, the HTML view will show an unordered list of products.
See the output below.

Attribute Directives
Attribute directives modify the appearance of or define a custom behavior for a DOM element.
Angular has a rich set of built-in directives that allow dynamic styling and classes to be applied.
Among these directives, ngClass and ngStyle are essential tools for any Angular developer.

Let’s try to explore them one by one.

The ngClass
We can use this directive ngClass to add or remove CSS classes dynamically.
Moreover, developers can use this directive to apply one or more CSS classes to an element conditionally.
You can pass a string, array, or object to ngClass to control which classes should be added or removed.
You can use either the expression or method with the ngClass directive.

Using Expression
A developer can’t write if condition within the ngClass directive.

However, we can use the ternary operator as this is an expression.
//Syntax
[ngClass]="condition ? 'when true apply class' : 'when false apply class'"
//Syntax (multiple classes)
[ngClass]="condition ? 'when true apply class1 class2' : 'when false apply class1 class2'"


Let’s have an example below.
attribute-directive-samp.component.css

.dot {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  display: inline-block;
  background-color: #c1bbbb;
}
.dot-border-red {
  border-color: red;
  border-style: dotted;
  border-width: 3px;
}

.dot-border-yellow {
  border-color: yellow;
  border-style: dotted;
  border-width: 3px;
}
.yellow {
  background-color: yellow;
}

.red {
  background


attribute-directive-samp.component.ts
import { Component } from '@angular/core';
import {NgClass} from '@angular/common';

@Component({
  selector: 'app-attribute-directive-samp',
  standalone: true,
  imports: [
    NgClass
  ],
  templateUrl: './attribute-directive-samp.component.html',
  styleUrl: './attribute-directive-samp.component.css'
})
export class AttributeDirectiveSampComponent {
  isYellow = false;
  isRed: boolean = false;

  colorChanged(value:string): void {
    if(value === 'R'){
      this.isRed = true;
      this.isYellow = false;
    }
    else if(value === 'Y'){
      this.isYellow = true;
      this.isRed = false;
    }
  }
}

attribute-directive-samp.component.html
<h3>Using Expression</h3>
<input type="radio" name="firstDot" value="R" (change)="colorChanged('R')" /> Red
<input type="radio" name="firstDot" value="Y" (change)="colorChanged('Y')" /> Yellow
<br/>
<div class="dot" [ngClass]="isRed ? 'dot red dot-border-yellow': 'dot yellow dot-border-red'">
</div>

From our example, we have seen that we can change the circle’s background color and border when choosing between red and yellow.
We have achieved this by using an expression inside the ngClass.

Output


Using Function
Developers can apply CSS classes through various methods in complex conditions.

For example, you can use this way to set a CSS class based on user input.

Let’s see an example below.
attribute-directive-samp-using-function.component.css

.dot {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  display: inline-block;
  background-color: #c1bbbb;
}
.dot-border-red {
  border-color: red;
  border-style: dotted;
  border-width: 3px;
}

.dot-border-yellow {
  border-color: yellow;
  border-style: dotted;
  border-width: 3px;
}
.yellow {
  background-color: yellow;
}

.red {
  background-color: red;
}

attribute-directive-samp-using-function.component.ts
import { Component } from '@angular/core';
import {FormsModule} from '@angular/forms';
import {NgClass} from '@angular/common';

@Component({
  selector: 'app-attribute-directive-samp-using-function',
  standalone: true,
  imports: [
    FormsModule,
    NgClass
  ],
  templateUrl: './attribute-directive-samp-using-function.component.html',
  styleUrl: './attribute-directive-samp-using-function.component.css'
})
export class AttributeDirectiveSampUsingFunctionComponent {
  selectedColor: string = "";

  getClassColorValue(): string {
    let classToReturn = '';
    if(this.selectedColor === 'Red'){
      classToReturn = 'dot red dot-border-yellow';
    }
    else if(this.selectedColor === 'Yellow'){
      classToReturn = 'dot yellow dot-border-red';
    }
    return classToReturn;
  }
}


attribute-directive-samp-using-function.component.html
<h3>Using Function</h3>
<input type="radio" name="secondDot" value="Red" [(ngModel)]="selectedColor" /> Red
<input type="radio" name="secondDot" value="Yellow" [(ngModel)]="selectedColor" /> Yellow
<br/>
<div class="dot" [ngClass]="getClassColorValue()"></div>


From our example, we have seen that we can change the circle’s background color and border when choosing between red and yellow.
However, instead of an expression, we used a method or function where the class was set inside the ngClass.
Note. For both examples, we use the same styles for attribute-directive-samp.component.css and attribute-directive-samp-using-function.component.css.
Again, we have achieved our goal for both examples, but by using different approaches, it's up to the developer to choose either expression or method/function.

Output

 

The ngStyle
Developers, when using the ngStyle directive, allow them to set the style property of the DOM element.

People suggest directly putting styles inside the style attribute isn’t that good.
But in our case, and for educational purposes, we need to understand that this directive is available for us to use in some cases.

Let’s see an example.

attribute-directives-ngstyle.component.ts

import {Component} from '@angular/core';
import {NgStyle} from '@angular/common';
import {FormsModule} from '@angular/forms';

@Component({
  selector: 'app-attribute-directives-ngstyle',
  standalone: true,
  imports: [
    NgStyle,
    FormsModule
  ],
  templateUrl: './attribute-directives-ngstyle.component.html',
  styleUrl: './attribute-directives-ngstyle.component.css'
})
export class AttributeDirectivesNgstyleComponent {

  isBold : boolean = false;
  isItalic:boolean = false;
  isUpperCase: boolean = false;


  setElementStyle() {
    return {
      'font-weight': this.isBold ? 'bold' : 'normal',
      'font-style': this.isItalic ? 'italic' : 'normal',
      'text-transform': this.isUpperCase ? 'uppercase' : 'none'
    };
  }
}

attribute-directives-ngstyle.component.html

<p>
  Let us style the text below.
  <br/>
  Bold: <input type="checkbox" [(ngModel)]="isBold"  /> <br/>
  Italic: <input type="checkbox" [(ngModel)]="isItalic" /> <br/>
  UpperCase: <input type="checkbox" [(ngModel)]="isUpperCase" /> <br/>
</p>
<div [ngStyle]="setElementStyle()">I love Angular</div>


From our example, we have built an object that checks whether the checkboxes are checked, which makes the isItalic, isUpperCase, and isBold true or false with specific values at runtime.

Then, it will be returned as an object assigned to the ngStyle directive.

See the output below.


Summary
In this post, we have discussed the three types of directives: component, structural, and attribute. However, component directives seem straightforward to most of us developers. We have seen a lot of examples of structural and attribute directives, and the examples we have are the built-in directives for these types of directives built into the Angular library for most use cases. I hope you have enjoyed this article as much as I have enjoyed writing it.
Stay tuned for more information, and don't forget to download the attached project source code.
If you run the project source code, don’t forget to command “npm install.”
Until next time, happy programming, and good luck with your career!



European Visual Studio 2022 Hosting - HostForLIFE :: How to Fix the 'Process with an Id of #### is not Running' Error in Visual Studio?

clock October 15, 2024 08:00 by author Peter

Approach 1

  • Close Visual Studio: Ensure that Visual Studio is completely closed before proceeding.
  • Delete the Hidden .vs Folder
    • Navigate to the folder where your solution files are stored.
    • Find the hidden .vs folder and delete it. You may need to enable viewing hidden files in File Explorer to see this folder.
  • Delete the bin and obj Folders
    • Search within your project directory for the bin and obj folders.
    • Delete these folders to ensure that old build artifacts are cleared.
  • Restart Visual Studio: After deleting the folders, reopen Visual Studio.
  • Rebuild and Debug
    • Press F5 or click the "Start Debugging" button to rebuild the project.
    • IIS Express should load normally, allowing you to debug your application.

Approach 2
Open Visual Studio as Administrator: To avoid permission issues, right-click on the Visual Studio icon and select Run as administrator.

Unload the Project

  • In Solution Explorer, right-click on your project.
  • Click on Unload Project to temporarily unload it.

Edit the .csproj File
Right-click on the unloaded project again and select Edit PROJECT_NAME.csproj (replace PROJECT_NAME with the actual name of your project).
Remove the IIS Express Configuration

In the .csproj file, locate the following lines of code.
<DevelopmentServerPort>45678</DevelopmentServerPort>
<DevelopmentServerVPath>/</DevelopmentServerVPath>
<IISUrl>http://localhost:45678/</IISUrl>

Delete these lines to remove the custom port settings.

Save and Close the .csproj File: After making the changes, save the file and close it.

Reload the Project
Right-click the unloaded project again and select Reload Project. By following these steps, you can reset your project's IIS Express configuration and resolve port-related issues.



AngularJS Hosting Europe - HostForLIFE.eu :: Integration of Angular with Microservices

clock October 10, 2024 07:00 by author Peter

I'm a slack backend.net developer. I have some knowledge of.net technologies, however I'm not very knowledgeable with Angular, a frontend JavaScript framework. In order to enable external communication between the front-end and RESTful web API services, my manager instructed me to jot down certain typescript codes. You all know what would happen if I told him I didn't know how to do it. Anyhow, let's return to the primary topic. Please be aware that this is only intended for novice users who want to fire once and forget. Please don't hold me responsible. My knowledge of typescripts is rather limited.

Resolution and Schematic Design

  • I divided the entire assignment into four sections at first:
  • Examining the options in the app.
  • Setting up an environment depends on whether it's for production, QA, or development.
  • Establishing a connection with external RESTful web API services.
  • Requests to the services that include instructions or questions.

Basic knowledge - I guess you know it. So, in short.

  • Restful web API: it’s an interface for communication with two or more applications.
  • TypeScript: Compared to javaScript, It supports writing code with object-oriented concepts.
  • Singleton design pattern: It creates a single shared instance of the object.
  • Dependency injection design pattern: It is a style of object configuration in which objects are set by an external entity.

Explanation of each of the steps

  • Step 1: Read all the configuration at runtime from the appSettings.json file so that applications can use this data at runtime.
  • Step 2: Check the environment. Is it development, QA, or production? Set the environment settings data that you got from step 1.
  • Step 3: Create a base class for the service to get the API service, for instance. Design it using the concept of the singleton design pattern. Get the settings data from step 2.
  • Step 4: The main service class calls all the get/post/put/patch/delete required requests to the RESTful web API. Add the base class from step 3.
  • Step 5: Use the dependency Injection pattern to inject the dependent service. Inject the dependent service class into the component class. Call the required methods of the service from the component class. Use the class from step 4.

Implementation of each of the classes using typeScript in the Angular project

  • appsettings-json-reader package: Read all the data from the JSON file.
  • npm install appsettings-json-reader

Axios package: Promise-based API method called.
npm install axios --save

I guess you already know how to implement step1 & step2.

Implementing steps 3
Creating the base class using a command.
ng g class BaseApiClientService

import { Injectable } from "@angular/core";
import axios from "axios";
import { AppSettingsConfig } from "../../configuration/app-settings-config";

@Injectable()
export class BaseApiClientService {
  private appSettings!: AppSettingsConfig;
  private helloApiBaseUrl!: string;

  constructor() {
    // Holding configuration-data object.
    this.appSettings = new AppSettingsConfig();

    // Getting base URL of the Hello-API.
    this.helloApiBaseUrl = this.appSettings.apiEndPoint;
  }

  // Main API Instance.
  readonly HelloApiInstance = () => {
    return axios.create({
      baseURL: this.helloApiBaseUrl,
      timeout: 5000,
      headers: {
        Accept: 'application/json',
        cors: true,
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, PATCH, OPTIONS',
      }
    });
  }
}


Implementing steps 4
Creating the service class using a command.
ng g service Hello-Api-Service

import { Injectable } from '@angular/core';
import { AxiosInstance } from 'axios';
import { ConstApiSubPathConfig } from '../../configuration/const-api-sub-path-config';
import { BaseApiClientService } from './base-api-client-service';

@Injectable({
  providedIn: 'root'
})
export class HelloAPIServiceService {
  readonly helloWebApiInstance: AxiosInstance;

  constructor(private baseClient: BaseApiClientService)
  {
    this.helloWebApiInstance = this.baseClient.HelloApiInstance();
  }

  GetHelloDataList(isActive:boolean) {
    //// It will add the pathSufix with the main base URL path.
    let pathSufix = '/' + ConstApiSubPathConfig.HelloApiSubDaListPathSufix;

    //// Get request:Returns the response.
    return this.helloWebApiInstance.get(pathSufix, {
      params: { IsActive: isActive }});
  }

  AddHelloMessage(helloMessageObj: any) {
    let pathSufix = '/' + ConstApiSubPathConfig.HelloApiSubPathSufix;

    //// Post request:Returns the response.
    return this.helloWebApiInstance.post(pathSufix, helloMessageObj);
  }
}

Implementing Steps 5
Creating the component class using a command.
ng g component HelloServiceGrid --module app

import { Component } from '@angular/core';
import { HelloAPIServiceService } from '../../../core/service/axios-service/hello-api-service.service';

@Component({
  selector: 'app-hello-service-grid',
  templateUrl: './hello-service-grid.component.html',
  styleUrls: ['./hello-service-grid.component.css']
})
export class HelloServiceGridComponent {
  constructor( private api: HelloAPIServiceService){  }
  getHelloDataList()
  {
      let isActive:boolean = true;
      this.api.GetHelloDataList(isActive)
      .then(response => {

        //// if status-code is success.
        if (response.status === 200) {
          /// Response Data from API.
          let result = response.data;

          //// Implement your logic with the data below:
        }
      }).catch(error => console.log('Error message =====> Sorry : ' + error.message));
  }
}


Don’t forget to check the App.module.ts file. Your components should be added to the declarations array, and your services should be added to the providers array.


I'll go over how to define environmental configurations and read configurations at runtime in the next section, which covers leveraging Azure DevOps CI/CD pipelines to deploy an Angular app to the Azure environment. Anyhow, I have to leave.



AngularJS Hosting Europe - HostForLIFE.eu :: How to Apply CRUD Operations in Dynamic Grid Using AngularJS?

clock October 3, 2024 08:08 by author Peter

I explained How to Show Data in a Dynamic Grid Using AngularJS in my earlier article. I'll explain in this article how to use AngularJS to apply CRUD operations in a dynamic grid. I previously shown to you how to display data in a grid format, but in this post, we'll take it a step further and enable editing of the grid; in other words, I'll be providing CRUD functions for the grid.

Step 1: Since I'm working on an earlier application, you may see where I left off in that post by reading it.
Now, I will update the JavaScript section and will provide the edit and delete functionality. For that, you need to write this code in the script section.
$scope.delete = function(id) {
    for (i in $scope.employees) {
        if ($scope.employees[i].id == id) {
            $scope.employees.splice(i, 1);
            $scope.newEmployee = {};
        }
    }
}

$scope.edit = function(id) {
    for (i in $scope.employees) {
        if ($scope.employees[i].id == id) {
            $scope.newEmployee = angular.copy($scope.employees[i]);
        }
    }
}


First, I provided the delete functionality; for this, I have created a function named "delete". In this function the ID of the Employee is passed, if the ID correctly matches one of the existing IDs then the delete operation will be done and that entry will be deleted.

Similarly, I have created the "Edit" function. In this function, the ID of the Employee will also be passed, but this time the data related to that ID will not be deleted. Instead, it will be passed back to the corresponding textboxes so that the user can make changes, and when the user clicks the save button, the data will again be saved at the same Id position as it was stored previously.

Now, the updated Script looks like this.
<script>
    var empid = 1;

    function x($scope) {
        $scope.employees = [
            { id: 0, 'name': 'Anubhav', 'address': 'Ghaziabad', 'dept': 'Developer' }
        ];

        $scope.saveRecord = function() {
            if ($scope.newEmployee.id == null) {
                $scope.newEmployee.id = empid++;
                $scope.employees.push($scope.newEmployee);
            } else {
                for (i in $scope.employees) {
                    if ($scope.employees[i].id == $scope.newEmployee.id) {
                        $scope.employees[i] = $scope.newEmployee;
                    }
                }
            }
            $scope.newEmployee = {};
        }

        $scope.delete = function(id) {
            for (i in $scope.employees) {
                if ($scope.employees[i].id == id) {
                    $scope.employees.splice(i, 1);
                    $scope.newEmployee = {};
                }
            }
        }

        $scope.edit = function(id) {
            for (i in $scope.employees) {
                if ($scope.employees[i].id == id) {
                    $scope.newEmployee = angular.copy($scope.employees[i]);
                }
            }
        }
    }
</script>

Step 2. Now, I will work on the ViewModel of this application and will modify it as well.
You need to update your Table with this code.
<table border="1" bordercolor="blue">
    <tr style="color:blue">
        <th style="width:150px">Name</th>
        <th style="width:150px">Address</th>
        <th style="width:150px">Dept</th>
        <th>Action</th>
    </tr>
    <tr style="color:pink" ng-repeat="employee in employees">
        <td>{{ employee.name }}</td>
        <td>{{ employee.address }}</td>
        <td>{{ employee.dept }}</td>
        <td>
            <a href="#" ng-click="edit(employee.id)">edit</a> |
            <a href="#" ng-click="delete(employee.id)">delete</a>
        </td>
    </tr>
</table>


Here, in the first Row, I added one more heading, "Action". In the second row, I added one more column in which two Anchors are used.

The first Anchor click is bound to the "Edit" function, and the second Anchor click is bound to the "Delete" function.

The ID of the Employee is passed depending on the Anchors, in other words wherever the Anchors are placed, the corresponding ID will be passed to the function.

Now our View Model is updated and its code is like this.
<div ng-app="" ng-controller="x">
    <label>Name</label>
    <input type="text" name="name" ng-model="newEmployee.name"/>

    <label>Address</label>
    <input type="text" name="address" ng-model="newEmployee.address"/>

    <label>Dept.</label>
    <input type="text" name="dept" ng-model="newEmployee.dept"/>
    <br/>

    <input type="hidden" ng-model="newEmployee.id"/>
    <input type="button" value="Save" ng-click="saveRecord()" class="btn btn-primary"/>
    <br/>
    <br/>

    <table border="1" bordercolor="blue">
        <tr style="color:blue">
            <th style="width:150px">Name</th>
            <th style="width:150px">Address</th>
            <th style="width:150px">Dept</th>
            <th>Action</th>
        </tr>
        <tr style="color:pink" ng-repeat="employee in employees">
            <td>{{ employee.name }}</td>
            <td>{{ employee.address }}</td>
            <td>{{ employee.dept }}</td>
            <td>
                <a href="#" ng-click="edit(employee.id)">edit</a> |
                <a href="#" ng-click="delete(employee.id)">delete</a>
            </td>
        </tr>
    </table>
</div>


Now, our application is created and is ready for execution.



AngularJS Hosting Europe - HostForLIFE.eu :: Types of Components Selectors in Angular with Examples

clock September 12, 2024 10:29 by author Peter

Selector of Type
The HTML tag name is the basis for selects. App-root as an example. Since this kind of selection is the standard for all Angular components, you probably already know it.

Attribute Selector

  • The selector property in the @Component decorator specifies the selector for the component. In this case, we're using an attribute selector [app-attribute-selector].
  • To use the directive, you add the app-attribute-selector attribute to any HTML element in your template.
  • The content within that element will be replaced by the template defined in the directive.

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

    @Component({
      selector: '[app-attribute-selector]',
      standalone: true,
      imports: [],
      templateUrl: './attribute-selector.component.html',
      styleUrl: './attribute-selector.component.scss'
    })
    export class AttributeSelectorComponent {

    }

component view code
<p>attribute-selector works!</p>

Attribute selector with value

  • The selector property in the @Component decorator specifies the selector for the component. In this case, we're using an attribute selector [app-attribute-selector-with-value=” test”].
  • To use the directive, you add the app-attribute-selector-with-value=” test” attribute to any HTML element in your template.
  • The content within that element will be replaced by the template defined in the directive.


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

    @Component({
      selector: '[app-attribute-selector-with-value="test"]',
      standalone: true,
      imports: [],
      templateUrl: './attribute-selector-with-value.component.html',
      styles: ``
    })
    export class AttributeSelectorWithValueComponent {

    }


component view code
<p>attribute-selector-with-value works!</p>

The selector with multiple attributes

The selector property in the @Component decorator specifies the selector for the component. In this case, we're using an attribute selector [app-multiple-attribute-selector="test"][is-active].
To use the directive, you add the app-multiple-attribute-selector="test" is-active attribute to any HTML element in your template.
The content within that element will be replaced by the template defined in the directive.
    import { Component } from '@angular/core';

    @Component({
      selector: '[app-multiple-attribute-selector="test"][is-active]',
      standalone: true,
      imports: [],
      templateUrl: './multiple-attribute-selector.component.html',
      styleUrl: './multiple-attribute-selector.component.scss'
    })
    export class MultipleAttributeSelectorComponent {

    }


component view code
<p>multiple-attribute-selector works!</p>

Key Points
Attribute selectors are useful when you want to apply a component to multiple elements based on a common attribute.
They are often used for directives that provide additional functionality to existing elements.
Attribute selectors are case-sensitive.

Note. For attribute values, Angular supports matching an exact attribute value with the equals (=) operator. Angular does not support other attribute value operators.
CSS Class Selector
 
Class selector
A CSS class selector is used to target elements that have a specific class attribute. The class attribute is defined within the opening tag of an HTML element and is preceded by a dot (.).
import { Component } from '@angular/core';

@Component({
  selector: '.app-css-class-selector',
  standalone: true,
  imports: [],
  templateUrl: './css-class-selector.component.html',
  styles: ``
})
export class CssClassSelectorComponent {

}


component view code
<p>css-class-selector works!</p>

:not pseudo-class

The: not pseudo-class in CSS allows you to target elements that do not match a specific selector. You can leverage this in Angular component selectors to create more targeted components.

Explanation

  • The :not(.disabled) part of the selector ensures that the component only matches elements with the class "container" that do not also have the class "disabled".
  • This provides a way to conditionally apply the component based on the presence or absence of other classes.

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

    @Component({
      selector: '.app-css-not-pseudo-selector:not(.disabled)',
      standalone: true,
      imports: [],
      templateUrl: './css-not-pseudo-selector.component.html',
      styles: ``
    })
    export class CssNotPseudoSelectorComponent {

    }


component view code

<p>css-not-pseudo-selector works!</p>

Targeting elements that are not direct children of a specific element.
@Component({
  selector: 'div:not(.parent) > p'
})
export class MyComponent {
}


Targeting elements that do not have a specific attribute.
@Component({
  selector: 'button:not([disabled])'
})
export class MyButtonComponent {
}


Key Points

  • The :not pseudo-class can be combined with other selectors to create more complex targeting rules.
  • It's a powerful tool for creating reusable components that can be applied conditionally based on the structure of your HTML.
  • Be cautious when using :not with complex selectors, as it can sometimes lead to unexpected behavior if not used correctly.

By understanding and utilizing the : not pseudo-class, you can create more flexible and targeted components in your Angular applications.

Combining selectors

You can combine selectors in Angular using CSS-like syntax to create more specific targeting rules. Here are some examples.
You can combine with Element, class, id, pseudo-class, attributes, comma-separated selectors, and so on.

Combining by Element, Class, and ID
@Component({
  selector: 'div.container#my-container'
})
export class MyComponent {
}


This component will only match elements that are.

  • A div element
  • Have the class container
  • Have the ID my-container

Combining with Pseudo-Classes
TypeScript
@Component({
  selector: 'button:not(.disabled):hover'
})
export class MyButtonComponent {
}


This component will match buttons that.

  • Do not have the class disabled
  • Are being hovered over

Combining with Attributes
TypeScript
@Component({
  selector: '[data-type="product"][is-active]'
})
export class ActiveProductComponent {
}


This component will match elements that.

  • Have the attribute data type with the value "product"
  • Have the attribute is-active

Combining Multiple Selectors

You can combine multiple selectors using commas.
TypeScript
@Component({
  selector: '.container, .card'
})
export class MyComponent {
}


This component will match elements that have either the class container or the class card.

Remember

  • Specificity: The more specific your selector is, the higher its priority.
  • Cascading Stylesheets (CSS): If multiple selectors match an element, the most specific selector takes precedence.
  • HTML Structure: Ensure that your selectors match the structure of your HTML elements.

By effectively combining selectors, you can create targeted components that accurately match the elements you intend to interact with in your Angular application.

Below is the output of the Selectors explained above.
    App.component.ts

    import { Component } from '@angular/core';
    import { RouterOutlet } from '@angular/router';
    import { AttributeSelectorComponent } from './attribute-selector/attribute-selector.component';
    import { MultipleAttributeSelectorComponent } from './multiple-attribute-selector/multiple-attribute-selector.component';
    import { AttributeSelectorWithValueComponent } from './attribute-selector-with-value/attribute-selector-with-value.component';
    import { CssClassSelectorComponent } from './css-class-selector/css-class-selector.component';
    import { CssNotPseudoSelectorComponent } from './css-not-pseudo-selector/css-not-pseudo-selector.component';
    import { CombiningSelectorsComponent } from './combining-selectors/combining-selectors.component';

    @Component({
      selector: 'app-root',
      standalone: true,
      imports: [
        RouterOutlet,
        AttributeSelectorComponent,
        MultipleAttributeSelectorComponent,
        AttributeSelectorWithValueComponent,
        CssClassSelectorComponent,
        CssNotPseudoSelectorComponent,
        CombiningSelectorsComponent
      ],
      templateUrl: './app.component.html',
      styleUrl: './app.component.scss',
    })
    export class AppComponent {
      show = false;
      testId = 'main-cta';
      title = 'angular-dev-test';
    }

component view code
@if(show){
<button [attr.data-test-id]="testId">Show CTA</button>
} @else {
<button [attr.data-test-id]="testId">Normal CTA</button>
}

<div app-attribute-selector is-active>will be ignored</div>
<div app-attribute-selector-with-value="test">will be ignored</div>
<div app-multiple-attribute-selector="test" is-active>will be ignored</div>
<div class="app-css-class-selector">will be ignored</div>
<div class="app-css-not-pseudo-selector">will be ignored</div>
<button type="reset">Reset</button>


Page Output




AngularJS Hosting Europe - HostForLIFE.eu :: Angular Route Guard Performance and Security Optimization

clock September 6, 2024 08:53 by author Peter

The route guards provided by Angular are effective tools for controlling access control inside your application. They improve security and user experience by assisting in making sure that users can only access routes that they are permitted to view. Poorly designed route guards, however, might cause security flaws and performance snags as your program expands. In order to successfully balance performance and security, we'll look at advanced ways for improving Angular route guards in this post.

1. Understanding Angular Route Guards
Angular offers several types of route guards, each serving a specific purpose.

  • CanActivate: Determines if a route can be activated.
  • CanDeactivate: Determines if the user can navigate away from the current route.
  • CanActivateChild: Checks if a child route can be activated.
  • CanLoad: Determines if a lazy-loaded module should be loaded.
  • Resolve: Fetches data before a route is activated.

2. Route guards and lazy loading
By loading modules only when necessary, lazy loading is a crucial strategy for enhancing the efficiency of large Angular applications. Nevertheless, these advantages can be circumvented by using lazy-loaded modules in conjunction with route guards incorrectly.

Best Practices

  • Use CanLoad Instead of CanActivate for Lazy-Loaded Modules: The CanLoad guard prevents the entire module from loading if the guard returns false. This is more efficient than CanActivate, which loads the module but prevents activation if conditions aren’t met.
  • Preload Critical Modules: Use Angular's built-in preloading strategies, such as PreloadAllModules, to preload essential modules, ensuring quick access without sacrificing performance.

canLoad(route: Route): boolean {
  return this.authService.isLoggedIn();
}

3. Reducing Overhead in CanActivate Guards
CanActivate guards are commonly used to restrict access to routes based on user authentication or roles. However, performing complex logic or redundant checks in these guards can slow down navigation.

Best Practices

  • Cache User Permissions: Instead of fetching permissions from the server on each route change, cache them locally using services like NgRx or simple in-memory storage. Update the cache only when necessary (e.g., on login or role change).
  • Optimize Guard Logic: Ensure that the logic within your CanActivate guards is as efficient as possible. Avoid making unnecessary HTTP requests or performing complex calculations synchronously.
  • Asynchronous Guard Execution: Use asynchronous operations in guards only when necessary. When using Observable or Promise-based guards, ensure that they resolve quickly to avoid delays in route transitions.

canActivate(route: ActivatedRouteSnapshot): boolean {
  const requiredRole = route.data['role'];
  return this.authService.hasRole(requiredRole);
}


4. Enhancing Security with Role-Based Access Control (RBAC)Implementing RBAC within your route guards is a robust way to enforce security policies across your application. However, a poorly designed RBAC system can lead to security loopholes.Best Practices

  • Centralize Role Management: Manage user roles and permissions in a centralized service. This makes it easier to update and audit roles across your application.
  • Dynamic Role Assignment: Assign roles dynamically based on user data rather than hardcoding roles within your application. This allows for more flexible and maintainable access control.
  • Audit Route Guard Usage: Regularly audit your route guards to ensure that they are correctly implemented and up-to-date with your security policies. This helps prevent unauthorized access due to outdated or misconfigured guards.

canActivate(route: ActivatedRouteSnapshot): boolean {
  const requiredRoles = route.data['roles'] as Array<string>;
  return this.authService.hasAnyRole(requiredRoles);
}

5. Combining Multiple Guards Efficiently
In some cases, you may need to combine multiple guards for a single route. For example, you might want to check if a user is authenticated and if they have a specific role.

Best Practices
Use Composite Guards: Instead of chaining multiple guards, create composite guards that encapsulate all necessary checks. This reduces the overhead of multiple guard evaluations.

canActivate(route: ActivatedRouteSnapshot): boolean {
  return this.authService.isLoggedIn() && this.authService.hasRole('admin');
}


Order Guards for Efficiency: If you must use multiple guards, order them from least to most computationally expensive. This ensures that simple checks are performed first, potentially bypassing more complex checks if they fail.
const routes: Routes = [
  {
    path: 'admin',
    canActivate: [AuthGuard, RoleGuard],
    component: AdminComponent
  }
];


6. Debugging and Testing Route Guards
Even with optimizations, route guards can introduce issues if not thoroughly tested and debugged.

Best Practices

  • Unit Testing Guards: Write unit tests for your route guards to ensure they behave as expected under various conditions. Use Angular's TestBed to create isolated tests for each guard.
  • Logging and Monitoring: Implement logging within your guards to monitor their execution in production. This can help identify performance bottlenecks or security issues that may arise.
  • Profiling Route Guards: Use Angular’s built-in profiling tools or browser developer tools to measure the performance impact of your route guards. Optimize any guards that are identified as slow or resource-intensive.

it('should allow the authenticated user to access route', () => {
  authService.isLoggedIn.and.returnValue(true);
  expect(guard.canActivate()).toBe(true);
});

Conclusion
Optimizing Angular route guards for performance and security requires a deep understanding of Angular’s routing system and careful consideration of best practices. By implementing lazy loading strategies, reducing overhead in guard logic, enhancing security with RBAC, and efficiently combining multiple guards, you can ensure that your Angular application is both fast and secure.



About HostForLIFE.eu

HostForLIFE.eu 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 2016 Hosting, ASP.NET Core 2.2.1 Hosting, ASP.NET MVC 6 Hosting and SQL 2017 Hosting.


Tag cloud

Sign in