DEV Community: Deekshith Raj Basa 🔥

Understanding Transformer Architecture for Large Language Models (LLMs)

Deekshith Raj Basa 🔥 — Thu, 05 Jun 2025 03:39:05 +0000

If you've heard of ChatGPT, Gemini, or Llama, you know they're powered by Large Language Models (LLMs). But what makes these models so powerful? The secret lies in their core structure—the Transformer architecture.

In this post, we’ll break down the Transformer architecture in simple terms so you can understand how it works.

What is a Transformer?

Introduced in the 2017 paper "Attention Is All You Need" by Vaswani et al., the Transformer is a deep learning model designed to handle sequential data (like text) more efficiently than older models (RNNs, LSTMs).

Unlike older models that process words one by one, Transformers can look at all words in a sentence at once using a mechanism called self-attention. This makes them faster and better at understanding context.

Key Components of a Transformer

A Transformer has two main parts:

Encoder (processes input text)
Decoder (generates output text)

For LLMs like GPT, only the decoder is used (since they focus on generating text). Models like BERT use only the encoder (since they focus on understanding text).

Let’s break down the key components:

1. Tokenization & Embeddings

Words are split into smaller pieces called tokens (e.g., "learning" → "learn" + "ing").
Each token is converted into a vector (list of numbers) using word embeddings (e.g., Word2Vec, GloVe).
Since word order matters, positional encodings are added to give the model information about word positions.

2. Self-Attention Mechanism

This is the most important part of a Transformer.

Self-attention allows the model to weigh the importance of each word relative to others.
Example:
- In the sentence "The cat sat on the mat because it was tired."
- The word "it" refers to "cat". Self-attention helps the model link these words.
The model computes attention scores to decide how much focus each word should get.

3. Multi-Head Attention

Instead of one attention mechanism, Transformers use multiple attention heads in parallel.

Each head looks at different relationships between words (e.g., one head may focus on subject-verb, another on pronouns).
This makes the model more powerful in understanding context.

4. Feed-Forward Neural Networks (FFNN)

After attention, each token passes through a simple neural network to process the information further.

5. Layer Normalization & Residual Connections

Residual connections help avoid the "vanishing gradient" problem (allowing deep networks to train better).
Layer normalization stabilizes training by normalizing values between layers.

6. Decoder (for Text Generation)

The decoder works similarly but has an extra masked self-attention layer to prevent it from "cheating" by looking at future words.
It generates text one word at a time, using previous outputs as inputs (autoregressive generation).

Why Transformers Are Better Than RNNs/LSTMs?

Feature	RNNs/LSTMs	Transformers
Parallel Processing	❌ (Sequential)	✅ (All words at once)
Long-range Dependencies	❌ (Struggles with long sentences)	✅ (Self-attention captures distant relationships)
Training Speed	❌ (Slow due to sequential steps)	✅ (Faster due to parallelization)

How Transformers Power LLMs?

Models like GPT-4, Llama 2, Gemini are decoder-only Transformers trained on massive text data. They:

Take a prompt (input text).
Process it through multiple Transformer layers.
Predict the next word repeatedly to generate responses.

Summary

Transformers use self-attention to understand relationships between words.
They process all words at once (unlike RNNs).
Multi-head attention helps capture different word relationships.
Positional embeddings help track word order.
Decoder-only models (like GPT) generate text autoregressively.

Improving Angular App Performance

Deekshith Raj Basa 🔥 — Mon, 11 Mar 2024 18:18:48 +0000

Improving Angular App Performance: Profiling and Code Optimization Strategies

A blazing-fast Angular application is the backbone of a great user experience. But as features grow, performance bottlenecks can creep in.

1. Profiling:

Embrace the Angular Profiler: This built-in tool helps pinpoint sluggish components and exposes the change detection cycle for scrutiny.

Chrome DevTools to the Rescue: Dive deeper with Chrome DevTools. Analyze network requests, JavaScript execution times, and identify performance drains.

https://angular.io/guide/devtools#profile-your-application

2. Change Detection Optimization:

OnPush for Efficiency: Implement the OnPush change detection strategy in components with minimal updates. This minimizes unnecessary checks, boosting performance.

trackBy for ngFor Finesse: When using ngFor for lists, leverage the trackBy function. This optimizes how Angular tracks list items, preventing needless re-renders.

https://angular.io/guide/change-detection

3. Bundle Size Reduction:

AOT Compilation for the Win: Enable Ahead-of-Time (AOT) compilation. This generates smaller, optimized JavaScript bundles, leading to faster loading times.

Tree-Shaking Magic: Utilize tree-shaking, a process that intelligently removes unused code from your final build. This keeps your app lean and mean.

https://medium.com/front-end-weekly/optimize-angular-bundle-size-f5392f0ae947

https://angularindepth.com/posts/1217/how-to-reuse-common-layouts-in-angular-using-router

angular #performance #optimization #webdev #softwareengineering #js

Implementing Native Drag-and-Drop in Angular

Deekshith Raj Basa 🔥 — Tue, 05 Mar 2024 04:19:58 +0000

Drag-and-drop functionality can significantly enhance the user experience in your Angular applications, allowing for intuitive interactions like reordering items, building lists, and managing file uploads.

Leverage the browser's built-in Drag-and-Drop API for a straightforward implementation. Utilize the dragstart, dragover, and drop events to capture drag interactions and update your application state accordingly.

HTML

<div class="draggable" (dragover)="onDragOver($event)" (drop)="onDrop($event)"> Drag and Drop
    </div>
<ng-container *ngIf="droppedImage">
  <img  [src]="droppedImage" alt="Dropped Image"/>
</ng-container>

Typescript

droppedImage: string | null = null;

  onDragOver(event: DragEvent) {
    event.preventDefault(); // Allow dropping
  }

  onDrop(event: DragEvent) {
    if (event.dataTransfer) {
      const files = event.dataTransfer.files;
      if (files && files.length === 1 && files[0].type.startsWith('image/')) {
        const reader = new FileReader();
        reader.readAsDataURL(files[0]);
        reader.onload = (e) => {
          this.droppedImage = e?.target?.result as string;
        };
      } else {
        alert('Please drop an image file only.');
      }
    }
    event.preventDefault(); // Not letting the browser to open image in new tab
  }

Here's the full working demo: https://stackblitz.com/edit/native-drag-drop-angular-deekshith-raj-basa?file=src%2Fmain.ts

Build Custom Structural Directives in Angular like a hero 😎

Deekshith Raj Basa 🔥 — Mon, 01 Aug 2022 05:05:10 +0000

Introduction

Angular comes with some built-in directives.

Structural Directive can be used to manipulate the HTML structure in the DOM. Using them, we can change the structure of part of the DOM.

*ngIf
*ngForOf
*ngSwitch

Creating a custom structural directive

Why custom structural directive?

We have build in structural directive that satisfies our solution, what if we might come across a case that the ones provided with the framework don't solve. so here comes the custom structural directive.

So, in this article we will try cloning the *ngIf structural directive

Let's understand how we can create *ngIf structural directive

Let's create a project using Angular CLI

// use this command to create new angular project
ng new project-name

// create a module 
ng generate module custom-if

Now let's create a custom directive

// create a custom directive
ng generate directive

generated directive should look like this

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

@Directive({
  selector: '[customIf]',
})
export class customIfDirective {
  constructor() {}
}

Let's implement the basic functionality of displaying the content if passed value is true

<h2 *customIf="true">My visible content</h2>
<h2 *customIf="false">My hidden content</h2>

To achieve that, we need a couple of elements:

an input that will determine whether to show or hide the content (@Input)

a reference to the template that we want to conditionally display (TemplateRef)

a container that will provide us with access to Angular's view (ViewContainerRef)

The @input can be just a regular class field decorators property with Angular's. For it to work as it does in the example code shown*customIf="true", we need to name the property the same as the attribute's selector:

import { Directive, Input } from '@angular/core';

@Directive({
  selector: '[customIf]',
})
export class IfDirective {
 @Input() set customIf(show: boolean) {
    //code goes here
  }

  constructor() {}
}

Now the directive has the value to display the content, we also need TemplateRef and ViewContainerRef instances. We can do that by injecting them by importing from @angular/core:

import { TemplateRef, ViewContainerRef } from '@angular/core';

constructor(
    private templateRef: TemplateRef<unknown>,
    private vcr: ViewContainerRef
  ) {}

Now, we can make a use of ViewContainerRef's reference this.vcr.createEmbeddedView(this.templateRef) method to display and this.vcr.clear() method to remove the content.

This is how the final code looks like

@Directive({
  selector: '[customIf]',
})
export class IfDirective {
@Input() set customIf(value: boolean) {
    this._renderTemplate(value)l
  }

constructor(
    private templateRef: TemplateRef<unknown>,
    private vcr: ViewContainerRef
  ) {}

private _renderTemplate(show: boolean) {
    this.vcr.clear();
    if (show) {
      this.vcr.createEmbeddedView(this.templateRef);
    }
  }
}

Wohoo! 🥳 we have successfully create *customIf now let's focus on creating else template
So, let us understand how it works?

How do we achieve this behaviour in our custom directive? This is where understanding the "syntactic sugar" that stands behind the structural directives is crucial.

If we observe the above image example, it means that the else property is actually becoming ngIfElse input parameter.

So, we can access the else template by selector (customIf) + else (Else) = customIfElse

@Input() customIfElse?: TemplateRef<unknown>;

Now, the code looks like

@Directive({
  selector: '[customIf]',
})
export class IfDirective {
@Input() set customIf(value: boolean) {
    this._renderTemplate(value)l
  }
@Input() customIfElse?: TemplateRef<unknown>;
constructor(
    private templateRef: TemplateRef<unknown>,
    private vcr: ViewContainerRef
  ) {}

private _renderTemplate(show: boolean) {
    this.vcr.clear();
    if (show) {
      this.vcr.createEmbeddedView(this.templateRef);
    } else if (this.customIfElse) {
      this.vcr.createEmbeddedView(this.customIfElse);
    }
  }
}

Summary

In this article, we've learnt how to create a simple custom structural directive that handles additional inputs. We've covered the syntactic sugar that stands behind the structural directive, and how it translates into directive's inputs.

In case you have any questions, you can always tweet or DM me at @DeekshithrajB. I'm always happy to help!

Connect with me over linkedIn: Deekshith Raj Basa

Angular Server-Side Rendering(SSR): The Browser Is Not The Server

Deekshith Raj Basa 🔥 — Thu, 12 Nov 2020 13:18:33 +0000

One of the great things about SSR is that we get to use the same code on our frontend and our backend to render our app. Well, sort of.

When we use the same code, right off the bat we have a problem: the browser is not the server and there are differences between what we can do in each environment.

The benefit of rendering our Angular app on the server is that we can fetch data privately and efficiently before we send anything to the browser.

Our server is (in this case) Node.js, and so on the server we can use:

request to make HTTP requests retrieved by the server (and these can be private authenticated requests)
fs to access the filesystem (if we need to) access to anything else you'd want on the server: Redis, AWS services, the database etc.

But the browser is not the server. And if we try to call browser-only APIs, then we'll break SSR.

What can break SSR?

Well, three things come to mind that is exclusive to the browser:

the window can be used to e.g. display alerts to the user
the document belongs to the window namespace and is used to manipulate DOM elements
navigator belongs to the window namespace and enables service workers that are used extensively with Progressive Web Applications

While it's awesome that our Angular application can share code between the server and the browser, if we want to use any of these objects, we need to execute a different logic path based on the current runtime: Node.js or the browser window.

Below, I'm going to show you one of the techniques for doing that

Adding internationalization

Let's add internationalization to your application. Let's display product prices in three currencies: US dollars, British pounds, and Polish zloty. The application should pick a currency based on browser settings, and if a given language is not supported, it should fall back to Polish zloty

Let's generate a new service:

ng g s sample

Now let's detect user language and implement the getCurrencyCode() method that returns one of the three available currency codes:

  providedIn: 'root'
})
export class SampleService {

  private userLang;

  constructor() { 
      this.userLang = window.navigator.language;
  }

  public getCurrencyCode(): string {
    switch(this.userLang) {
      default: 
      case 'pl-PL': return 'PLN';
      case 'en-US': return 'USD';
      case 'en-EN': return 'GBP';
    }
  }
}

Now in one of our components, say ProductDetailsComponent, we can use this service to get the user's currency:

public userCurrency: string = this.sampleService.getCurrencyCode();

constructor(
  private route: ActivatedRoute, 
  private ps: ProductsService, 
  private us: UserService, 
  private sampleService: SampleService
) { }

Then we could use the userCurrency in a view with the currency pipe:

<pclass="text-muted">{{userCurrency}}</p>

From now on, prices should display in a currency defined by the user's localization settings. This is great, right?

Well, no. Unfortunately, this logic breaks SSR:

ERROR: ReferenceError: window is not defined

It would help if we had a mechanism to detect whether the current runtime is the browser or the server - and thankfully that's why we have isPlatformBrowser() and isPlatformServer():

isPlatformBrowser() and isPlatformServer()

Angular ships with the isPlatformBrowser() and isPlatformServer() methods in the @angular/common package. Each of these methods accepts one parameter: the platform ID. It can be retrieved via the Dependency Injection mechanism using the injection token PLATFORM_ID available in the @angular/core package.

So to change our internationalization service I18nService above, Add these new imports:

import { 
  Injectable, 
  Inject, 
  PLATFORM_ID 
  } from '@angular/core';
import { 
  isPlatformBrowser 
  } from '@angular/common';

Modify the service constructor to only use the window object if an instance of the service executes in the browser:

export class SampleService {
  constructor(
    @Inject(PLATFORM_ID)
    private platformId: any
  ) {
    if (isPlatformBrowser(this.platformId)) {
      this.userLang =
        window.navigator.language;
    } else {
      // server specific logic
    }
  }
  // ...
}

This should be enough for SSR to start working again but we don't get internationalization pre-rendered on our server-side render -- internationalization won't appear until after the app loads.

So what we need is a way to know what language to render from the origin HTTP request to the server.

The Request object
The question now is how to retrieve information about user language on the server. Is it even possible?

Yes, it is.

When you're performing a request from the browser, the browser adds a bunch of HTTP headers that you might not usually think about.

One of these headers is Accept-Language which tells us what language the user wants!

For example, the header might come through like this: Accept-Language: en-US, en;q=0.5

Getting Headers from the Request

Angular Universal allows you to get an object that represents an HTTP request. It's available via Dependency Injection under the REQUEST token from the @nguniversal/express-engine/tokens package. The Request object contains the following fields:

body
params
headers
cookies

So we update our imports by adding the Request object, the REQUEST injection token, and the Optional decorator

import { Injectable, Inject, PLATFORM_ID, Optional } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { REQUEST } from '@nguniversal/express-engine/tokens';
import { Request } from 'express';

Change the constructor to inject the Request object and retrieve user language from the Accept-Language header:

export class SampleService {
  constructor(
    @Inject(PLATFORM_ID) private platformId: any,
    @Optional()
    @Inject(REQUEST) private request: Request
  ) {
    if (isPlatformBrowser(this.platformId)) {
      this.userLang =
        window.navigator.language;
    } else {
      this.userLang = (
        this.request.headers[
          "accept-language"
        ] || ""
      ).substring(0, 5);
    }
  }
  // ...
}

How to Add Rich Text Editor to an Angular App

Deekshith Raj Basa 🔥 — Thu, 24 Sep 2020 07:16:28 +0000

CKEditor 5 consists of ready-to-use editor builds and CKEditor 5 Framework upon which the builds are based.

Currently, the CKEditor 5 component for Angular supports integrating CKEditor 5 only via builds. Integrating CKEditor 5 built from source is not possible yet due to the lack of ability to adjust webpack configuration in angular-cli.

While there is no support to integrate CKEditor 5 from source yet, you can still create a custom build of CKEditor 5 and include it in your Angular application.

Quick start

In your existing Angular project, install the CKEditor npm package

npm install --save @ckeditor/ckeditor5-angular

Assuming that you picked @ckeditor/ckeditor5-build-classic:

npm install --save @ckeditor/ckeditor5-build-classic

Now, add CKEditorModule to modules whose components will be using the component in their templates.

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

@NgModule( {
    imports: [
        CKEditorModule,
        // ...
    ],
    // ...
} )

Import the editor build in your Angular component and assign it to a public property to make it accessible from the template:

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

@Component( {
    // ...
} )
export class MyComponent {
    public Editor = ClassicEditor;
    // ...
}

Finally, use the tag in the HTML template to run the rich text editor:

<ckeditor [editor]="Editor" data="<p>Hello, world!</p>"></ckeditor>

Integration with `ngModel`

Create some model in your component to share with the editor:

@Component( {
    // ...
} )
export class MyComponent {
    public model = {
        editorData: '<p>Hello, world!</p>'
    };
    // ...
}

Use the model in the template to enable a two–way data binding:

<ckeditor [(ngModel)]="model.editorData" [editor]="Editor"></ckeditor>

Supported `@Input` properties

Editor ( required ):

The Editor which provides the static create() method to create an instance of the editor:

<ckeditor [editor]="Editor"></ckeditor>

Config:

<ckeditor [config]="{ toolbar: [ 'heading', '|', 'bold', 'italic' ] }" ></ckeditor>

Data:

<ckeditor data="<p>Hello, world!</p>" ></ckeditor>

@Component( {
    // ...
} )
export class MyComponent {
    public editorData = '<p>Hello, world!</p>';
    // ...
}

<ckeditor [data]="editorData" ></ckeditor>

Supported `@Output` properties

Change:

It is fired with an object containing the editor and the CKEditor 5 change:data event object.

<ckeditor [editor]="Editor" (change)="onChange($event)"></ckeditor>

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { ChangeEvent } from '@ckeditor/ckeditor5-angular/ckeditor.component';

@Component( {
    // ...
} )
export class MyComponent {
    public Editor = ClassicEditor;

    public onChange( { editor }: ChangeEvent ) {
        const data = editor.getData();

        console.log( data );
    }
    ...
}

Setting the placeholder

<ckeditor [config]="{placeholder: 'Type the content here!' }" ></ckeditor>

Accessing the editor instance

To do this, create a template reference variable #editor pointing to the component:

<ckeditor #editor [editor]="Editor"></ckeditor>

Then get the <ckeditor> component using a property decorated by @ViewChild( 'editor' ) and access the editor instance when needed:

@Component()
export class MyComponent {
    @ViewChild( 'editor' ) editorComponent: CKEditorComponent;

    public getEditor() {
        // Warning: This may return "undefined" if the editor is hidden behind the `*ngIf` directive or
        // if the editor is not fully initialised yet.
        return this.editorComponent.editorInstance;
    }
}

Thanks for reading my blog on how to add Rich Text Editor in angular, for more official in detail documentation please read CKEditor Angular.

Implicit flow authentication using angular-oauth2-oidc (Angular)

Deekshith Raj Basa 🔥 — Tue, 22 Sep 2020 08:01:14 +0000

Installing the pacakage

Install the angular-oauth2-oidc package using npm.

npm i angular-oauth2-oidc --save

Setting up the NgModule (app.module)

When package installation has been done then import the OAuthModule in the app.modulefile.

import { OAuthModule } from 'angular-oauth2-oidc';
[...]
@NgModule({
  imports: [  
   [...]    HttpModule,
    OAuthModule.forRoot()  
],  
........export classAppModule{}

Implicit Flow configuration & Login page

This is the OAuth2/OIDC flow best suitable for SPA. It sends the user to the IdentityProvider's login page (Identity Server). After logging in, the SPA gets tokens. This alsoallows for single sign on as well as single sign off.
To configure the library just have to set some properties (AuthConfig) on startup as requiredby OAuthService i.e. on the constructor of the AppComponent which is called before therouting kicks in.

import { AuthConfig } from'angular-oauth2-oidc';
export const authConfig: AuthConfig = {
// Url of the Identity Provider  
issuer: 'https://demo.identityserver.com/identity',
// Login Url of the Identity Provider  
loginurl: 'https://demo.identityserver.com/identity/connect/authorize',
// Login Url of the Identity Provider  
logouturl: 'https://demo.identityserver.com/identity/connect/endsession',
// URL of the SPA to redirect the user to after login  
redirectUri: window.location.origin + '/dashboard.html',
// The SPA's id. The SPA is registerd with this id at the auth-server  
clientId: 'billing_demo',
// set the scope for the permissions the client should request
// The first three are defined by OIDC. Also provide user sepecific
 scope: 'openid profile email billing_demo_api',
}

When the AuthConfig properties has been set then configure the OAuthService for loadingidentity server's discovery document & if access token is invalid then trigger implicit flow for presenting users with the identity server's login page .

import { OAuthService } from 'angular-oauth2-oidc';
import { JwksValidationHandler } from 'angular-oauth2-oidc';
import { authConfig } from './auth.config';
import { Component } from '@angular/core';
@Component({
  selector: 'billing-app',
  templateUrl: './app.component.html'
})
exportclassAppComponent{
  constructor(private oauthService: OAuthService) {
    this.ConfigureImplicitFlowAuthentication();
  } 
               private ConfigureImplicitFlowAuthentication() {
    this.oauthService.configure(authConfig);
    this.oauthService.tokenValidationHandler = 
new JwksValidationHandler();
    this.oauthService.loadDiscoveryDocument().then(doc) => {
      this.oauthService.tryLogin().catch(err => {
        console.error(err);
      }).then(() => {
        if (!this.oauthService.hasValidAccessToken()) {
          this.oauthService.initImplicitFlow()
        }
      });
    });
  }
}

The discovery endpoint can be used to retrieve metadata about your IdentityServer - it returns information like the issuer name, key material, supported scopes etc.The discovery endpoint is available via /.well-known/openid-configuration relative to the base address

https://demo.identityserver.com/.well-known/openid-configuration

Automatically refreshing a token when/ before it expires (silent refresh)

To automatically refresh a token when/ some time before it expires, just call the following method after configuring the OAuthService in the AppComponent.

this.oauthService.setupAutomaticSilentRefresh();

By default, this event is fired after 75% of the token's life time is over. You can adjust this factor by setting the property timeoutFactor to a value between 0 and 1. For instance, 0.5means, that the event is fired after half of the life time is over and 0.33 triggers the event after a third

Passing Bearer access token when calling Web API

1. Passing directly by using the class HttpHeaders of new HttpClient

var headers = new HttpHeaders({"Authorization": "Bearer " + this.oauthService.getAccessToken()});

2. By setting allowedUrls to an array with prefixes for the respective urls. Use lower case forthe prefixes.

OAuthModule.forRoot({
  resourceServer: {
    allowedUrls: ['https://billing_demo_api.com/api'],
    sendAccessToken: true
  }
}

Logout configuration

In order to log out from the application, just need to call the logout() method of theOAuthService. It will end the session & redirects the user to the post logout redirect url associated to the client.

this.oauthService.logout();

Access Token & Identity Claims

To get the access token & identity claims, just need to call the getAccessToken() andgetIdentityClaims() methods of the OAuthService

this.oauthService.getIdentityClaims();
this.oauthService.getAccessToken()

Implementing AuthGuard

If you want to restrict some pages from unauthorized access, create AuthGuard class which further implements CanActivate that return either true if the user can access a route or false if they can’t based on the validity of the access token

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { OAuthService } from 'angular-oauth2-oidc';

@Injectable() export class AuthGuard implements CanActivate {
  constructor(private oauthService: OAuthService, private router: Router) {

  }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.oauthService.hasValidAccessToken()) {
      return true;
    } this.router.navigate(['']);
  }
}

Then add the AuthGuard to the routing configuation as

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  {
    path: 'search', component: SearchComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'bill/:billId', component: BillingComponent,
    canActivate: [AuthGuard], children: [
      { path: '', redirectTo: 'ledger' }
    ]
  }];

DEV Community: Deekshith Raj Basa 🔥

Understanding Transformer Architecture for Large Language Models (LLMs)

What is a Transformer?

Key Components of a Transformer

1. Tokenization & Embeddings

2. Self-Attention Mechanism

3. Multi-Head Attention

4. Feed-Forward Neural Networks (FFNN)

5. Layer Normalization & Residual Connections

6. Decoder (for Text Generation)

Why Transformers Are Better Than RNNs/LSTMs?

How Transformers Power LLMs?

Summary

Improving Angular App Performance

angular #performance #optimization #webdev #softwareengineering #js

Implementing Native Drag-and-Drop in Angular

HTML

Typescript

Build Custom Structural Directives in Angular like a hero 😎

Introduction

Creating a custom structural directive

Let's create a project using Angular CLI

Summary

Angular Server-Side Rendering(SSR): The Browser Is Not The Server

What can break SSR?

Adding internationalization

Well, no. Unfortunately, this logic breaks SSR:

isPlatformBrowser() and isPlatformServer()

Getting Headers from the Request

How to Add Rich Text Editor to an Angular App

Quick start

Integration with ngModel

Supported @Input properties

Supported @Output properties

Setting the placeholder

Accessing the editor instance

Thanks for reading my blog on how to add Rich Text Editor in angular, for more official in detail documentation please read CKEditor Angular.

Implicit flow authentication using angular-oauth2-oidc (Angular)

Installing the pacakage

Setting up the NgModule (app.module)

Implicit Flow configuration & Login page

Automatically refreshing a token when/ before it expires (silent refresh)

Passing Bearer access token when calling Web API

1. Passing directly by using the class HttpHeaders of new HttpClient

2. By setting allowedUrls to an array with prefixes for the respective urls. Use lower case forthe prefixes.

Logout configuration

Access Token & Identity Claims

Implementing AuthGuard

Then add the AuthGuard to the routing configuation as

Integration with `ngModel`

Supported `@Input` properties

Supported `@Output` properties