DEV Community: KrishnaSai Polanki

Single, SingleOrDefault, First and FirstOrDefault in LINQ

KrishnaSai Polanki — Tue, 12 Jul 2022 11:15:47 +0000

Single

Returns the result only when predicate matches the collection that contains only one matching record.

    public List<string> Names = new List<string>() { "Jon", "Amber"};

    public string GetName()
    {
        return Names.Single(n=>n.Equals("Jon"));
    }

Throws error if the collection contains more than one matching data or no matching data.

    public List<string> Names = new List<string>() { "Jon", "Amber", "Depp Jon","Heard Amber" };

    public string GetName()
    {
        return Names.Single(n=>n.Contains("Jon"));
    }

    public List<string> Names = new List<string>() { "Jon", "Amber", "Depp Jon","Heard Amber" };

    public string GetName()
    {
        return Names.Single(n=>n.Contains("ABC"));
    }

Loops through all the data of the collection even if it found the match in collection which has impact on performance.

SingleOrDefault

This is similar to the Single except returning default value when the specified condition not satisfied.

    public List<string> Names = new List<string>() { "Jon", "Amber", "Depp Jon","Heard Amber" };

    public string GetName()
    {
        return Names.SingleOrDefault(n=>n.Contains("ABC"));
    }

Returns the null(default of string type) instead of throwing error.

First

Returns the result only when predicate matches the collection even that contains more than one matching record.

    public List<string> Names = new List<string>() { "Jon", "Amber", "Depp Jon","Heard Amber" };

    public string GetName()
    {
        return Names.First(n=>n.Contains("Jon"));
    }

Throws error if the collection contains no matching data.

    public List<string> Names = new List<string>() { "Jon", "Amber", "Depp Jon","Heard Amber" };

    public string GetName()
    {
        return Names.First(n=>n.Contains("ABC"));
    }

Will not loops through all the data of the collection once it found the match in collection thus making this is better than Single in terms of performance.

FirstOrDefault

This is similar to the First except returning default value when the specified condition not satisfied.

    public List<string> Names = new List<string>() { "Jon", "Amber", "Depp Jon","Heard Amber" };

    public string GetName()
    {
        return Names.FirstOrDefault(n=>n.Contains("ABC"));
    }

Returns the null(default of string type) instead of throwing error.

Trigger Jenkins Job on PR from Azure DevOps

KrishnaSai Polanki — Fri, 10 Jun 2022 10:24:27 +0000

Triggering a Jenkins Job on PR in Azure DevOps

I have a requirement that whenever there a pull request(PR) created from a feature branch to main development branch in my Azure DevOps git, I need to trigger a Jenkins job.

Below are the steps followed to achieve the requirement.

Capturing Pull Request Creation

First we need to capture the request that whenever there is a PR created. To do so we can leverage the power of Azure DevOps and its Service Hooks integration (Refer Service Hooks in Azure DevOps for more details) which can be used to integrate various services to get notified for the supported events.
There so many services supported by Azure DevOps as shown below.
From the above image, we can see that the Jenkins is also one of the supported service for the integration but it does support few event types like
- Build Completed
- Code pushed to a specific repository and branch
- Pull request merge attempted for a specific target branch from a feature branch.
- Release deployment completed for a specific environment.
But our requirement is to send notification to the Jenkins whenever there is Pull request created event on specific repo and specific branch. In order to meet our requirement we can leverage the power of Web Hooks which is also supported by the Azure DevOps.
Web Hook Service
- All the events are supported.
- Can make use of the Pull request created event
- We can also make use of the filters to filter
  - On Which repository PRs the trigger should send the notification
  - On to which branch PR creation should trigger the notification,etc.,
- Web Hooks support POST http actions
- Under settings we can configure various things like
  - URL - which is the URL of Web Hook listener (Should be configure in Jenkins)
  - Custom HTTP Headers and
  - Basic Authentication information to make the web hook request authenticated at Jenkins

Receiving Web Hook notification in Jenkins

In order to receive Web Hook request in Jenkins, we should install a Plugin called Generic Webhook Trigger.
The Web Hook listener URL should be like JENKINS_URL/generic-webhook-trigger/invoke. This should be registered in the Action Setting in Azure DevOps WebHooks integration portal.
This plugin will be appear in the Build Triggers section of Jenkins as shown below
This plug in can capture the request content via the post content parameters
As shown above in order to access the root element of a JSON payload we can create variable (data) and assign the $ (using Json Path convention) in the expression tab.
If the request payload is in xml then we can make use of X Path syntax to access the web hook posted data.

Access modifiers in TypeScript class Constructor

KrishnaSai Polanki — Tue, 14 Sep 2021 12:00:16 +0000

TypeScript includes a concise way to create and assign a class instance property from a constructor parameter.

For example if we want create a employee class with private property and should assign the value at the time of creating the instance in general we can do something like below.

export class Employee {
  private name: string;
    constructor(name: string) {
        this.name = name
    }
}
var emp = new Employee("Krishna");

There is another way of doing it in Typescript which looks like below.

export class Employee {
  constructor(private name: string) {}
  updateEmployeeName(updatedName: string) {
    this.name = updatedName;
  }
}

Here we can notice that we used private access modifier to restrict accessing this property out side the class but within the class methods.

There are couple of other access modifiers which we can use to restrict the access of class properties.

public access modifier

If we prefix this keyword before the property in constructor it means we are telling the angular compiler to make it available out side the class.

export class Employee {
  constructor(public designation: string) {}
}
var emp = new Employee("SSE");
emp.designation = "";

What will happen if we don't use any access modifier in the constructor for the property? It will not be available within the class itself except inside the constructor.

export class Employee {
  constructor(id: number) {
    id = 1;
  }
  updateEmployeeInfo() {
    this.id; //compilation error.
  }
}

Let's imagine if we want to make a property ready only property then we can do something like this

export class Employee {
  get Name() {
    return this.name;
  }
  constructor(id: number, private name: string, public designation: string) {}
}
var emp = new Employee(1, "Krishna", "SSE");
emp.Name = ""; //compilation error.
var name = emp.Name;

Content Projection in Angular using ng-content

KrishnaSai Polanki — Fri, 20 Aug 2021 10:08:42 +0000

In order to create the re-usable and flexible components content projection is a great option in Angular. Using ng-content we can do the content projection in Angular.

In general content projection means inserting or projecting some content from one component into another component. For example you want to insert some dynamic html element(s) into component(child component) when it is used inside a parent component.

Common implementation of content projection in Angular are

Single Slot Content Projection
Multi Slot Content Projection
Conditional Content Projection

Single Slot Content Projection:

Single slot content projection means there will be single source of the content which needs to project into component. Let's understand with an example.

child-component.html (selector: cp-child)

<h2>Single Slot Content Projection Example</h2>
<ng-content></ng-content>
<input type="text" />
<p>This is simple example to demonstrate the single slot content projection.</p>

parent-component.html

<cp-single>
  <mat-icon>email</mat-icon>
</cp-single>
<cp-single>
  <mat-icon>home</mat-icon>
</cp-single>

Here we can see the same component is reused by projecting different content, and the result will look like this

Multi Slot Content Projection:

Let's if there is need of projecting multiple content in to the same component then we can achieve it with multi slot projection using the select attribute of the ng-content. Let's see how it works with an example.

child-component.html (selector: cp-child)

<h2>Multi Slot Content Projection Example</h2>
<ng-content select="[projected-label]"></ng-content>
<ng-content select="[projected-icon]"></ng-content>
<input matInput />
<ng-content select="[projected-hint-msg]"></ng-content>
<p>This is simple example to demonstrate the multi slot content projection.</p>

parent-component.html

<cp-multi-slot>
  <mat-icon projected-icon>email</mat-icon>
  <mat-label projected-label>Enter Email</mat-label>
  <mat-hint projected-hint-msg>example@example.com</mat-hint>
</cp-multi-slot>

Here we can see that each ng-content has select attribute with the name which matches with the projected content from the parent component.

Suppose if didn't mention the select attribute then the non-matching content will will projected into that placeholder.

This is how the multi-slot projection looks like.

Conditional Content Projection:

Let's say we have a situation where we need to project content based on certain condition then we can achieve it with conditional content projection.

But in such scenarios it is recommended to use the ng-template than the ng-content. The reason is Angular will always instantiate the content which is projecting even if the content is not rendered, but ng-template will instantiate only when the content is rendered.

ngProjectAs:

Suppose if there is a situation you want to project certain content which is part of another element say for example content inside the ng-container then we can make use of the attribute ngProjectAs. Let' see with an example

parent-component.html

<cp-multi-slot>
  <ng-container ngProjectAs="complex-ele">
    <h2>This the Demo of Complex content projection</h2>
    <p>Simple Demo of complex content projection using ngProjectAs</p>
  </ng-container>
  <div another-ele>
    <p>This is another element to project into component</p>
  </div>
</cp-multi-slot>

component where the dynamic content projected

<p>Complex Multi-slot Projection</p>
<ng-content select="['complex-ele']"></ng-content>
<ng-content select="['another-ele']"></ng-content>

Angular ng-template, ng-container and ngTemplateOutlet usages

KrishnaSai Polanki — Wed, 19 Aug 2020 17:06:00 +0000

ng-template:

ng-template is basically an angular element. By the name we can say that it contains a part of the template of a component and used to display on a conditional basis.

For example we can think like a text to display in grid when there is no data available.

  <div fxLayout="column" fxLayoutGap="20px">
    <div *ngIf="data.length>0; else elseBlock">
      <!-- Data Grid will display -->
    </div>
  </div>
  <ng-template #elseBlock>
    <div>
      No data is available to display
    </div>
  </ng-template>

This cannot be used as standalone element. Angular will comment this in the render HTML
There should be some structural directives.
Under the hood Angular directives like ngIf,ngFor and ngSwitch uses the ng-template.

Let's think of scenario where we need to use more than one structural directives like below

<div fxLayout="column" fxLayoutGap="20px">
  <div *ngIf="data.length>0" *ngFor="let d of data">
    {{d.name}}
  </div>
</div>

In this case angular will throw below error

Uncaught Error: Template parse errors:
Can't have multiple template bindings on one element. Use only one attribute
named 'template' or prefixed with *

To avoid that we need to add an extra HTML tag like below.

<div fxLayout="column" fxLayoutGap="20px">
  <div *ngIf="data.length>0">
    <div *ngFor="let d of data">
      {{d.name}}
    </div>
  </div>
</div>

Can't we do without adding an extra HTML tag? Here comes the ng-container to rescue this problem. Let's get to know more details about it.

ng-container:

ng-container is a grouping element in angular, it doesn't interfere with any of the styles or layout as the angular doesn't put it into the DOM.

See below example which show the ng-container doesn't interfere with layout

  <p>
    I turned the corner
    <ng-container *ngIf="hero">
      and saw {{hero.name}}. I waved
    </ng-container>
    and continued on my way.
  </p>

and the output will look like

The other most import feature of ng-container is, it acts as placeholder where we can inject the template dynamically with the help of ngTemplateOutlet.

let's discuss more about the ngTemplateOutlet before going to see the combined uses of ng-template, ng-container and ngTemplateOutlet.

ngTemplateOutlet:

ngTemplateOutlet is an Angular directive which is used to instantiate the template dynamically. We can have multiple number of ngTemplateOutlet in a component template to render the templates dynamically.

This has two properties

ngTemplateOutletContext: This is of type Object which is used to pass the dynamic data into the template.The object keys will be available for the local variable can be defined using the let keyword to bind the values inside the template. Using the key $implicit in the context object will set its value as default.
ngTemplateOutlet: This of type TemplateRef<any> which will be the reference of the ng-template.

Let's look at the simple example below

@Component({
  selector: 'ng-template-outlet-example',
  template: `
    <ng-container *ngTemplateOutlet="sample; context: ctx"></ng-container>
    <hr />

    <ng-template #sample let-word let-person="name"
      ><span>Hello {{ word }}! from {{ name }}</span></ng-template
    >
  `,
})
export class NgTemplateOutletExample {
  ctx = { $implicit: 'World', name: 'Krishna' };
}

Let's breakdown the example above

The template ref for the ng-template sample is passing as first parameter
The second parameter Context is assigned with variable ctx which of type Object.
If we notice the default key in ctx which is $implicit is assigned to local variable word and the key name is assigned to local variable person.

Component Inheritance in Angular

KrishnaSai Polanki — Fri, 07 Aug 2020 16:45:40 +0000

Sometimes we might get a requirement like we need to create a component such that initially, we need to show few details, and then if the user is interested to read more then once the user clicks we might need to show complete details.

let's take an example, consider we need to show employee details with just name and role and we have a button to show more details about the employee. In this case in both the scenarios the data source will be the same, only the data representation is different. In this case, we can leverage the inheritance concept in angular without duplicating the code which is related to the pulling of data into those components.

Demo

Step1:

Create a base employee component.



import { Component, OnInit, Input } from '@angular/core';
import { Employee } from 'src/app/shared/api/employee';

@Component({
  selector: 'app-employee-base',
  template: ``,
  styleUrls: ['./employee-base.component.scss'],
})
export class EmployeeBaseComponent implements OnInit {
  @Input() employeeInfo: Employee;

  ngOnInit() {}

  constructor() {}
}
```

> Notice here that this `template` property is empty since we don't really use this component to render any data.

**Step2**:

Create a minified version of the employee details component to display minimum details like name and job role.

```typescript
import { Component, OnInit } from '@angular/core';
import { EmployeeBaseComponent } from '../employee-base/employee-base.component';

@Component({
  selector: 'app-employee-details-mini',
  templateUrl: './employee-details-mini.component.html',
  styleUrls: ['./employee-details-mini.component.scss'],
})
export class EmployeeDetailsMiniComponent extends EmployeeBaseComponent {
  constructor() {
    super();
  }
}
```

> There are two things to note here

1. We are extending the `EmployeeDetailsMiniComponent` from `EmployeeBaseComponent`
1. In the constructor, we are calling the `super()` which is required when we are inheriting from the base component

corresponding HTML code for this component will look like below

```html
<div>
  <span>
    First Name :
  </span>
  <span>{{ employeeInfo.firstName }}</span>
</div>
<div>
  <span>
    JobTitle :
  </span>
  <span>{{ employeeInfo.jobTitle }}</span>
</div>
```

So here we can see the property `employeeInfo` is not part of the `EmployeeDetailsMiniComponent` but it is part of the `EmployeeBaseComponent`. So we no need to write additional code to assign data this variable that is the responsibility of `EmployeeBaseComponent`, we can just use that property to render as per the child component scope. Here we are just using the `firstName` and `jobTitle` properties.

**Step3**:

Now let's create a details component where we will display all the employee details.

```typescript
import { Component, OnInit } from '@angular/core';
import { EmployeeBaseComponent } from '../employee-base/employee-base.component';

@Component({
  selector: 'app-employee-details',
  templateUrl: './employee-details.component.html',
  styleUrls: ['./employee-details.component.scss'],
})
export class EmployeeDetailsComponent extends EmployeeBaseComponent implements OnInit {
  displayedColumns: string[] = ['id', 'firstName', 'lastName', 'jobTitle'];
  dataSource: any[] = [];
  constructor() {
    super();
  }

  ngOnInit() {
    this.dataSource.push(this.employeeInfo);
  }
}
```

The corresponding HTML code will look like below

```html
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef>No.</th>
    <td mat-cell *matCellDef="let element">{{ element.id }}</td>
  </ng-container>

  <ng-container matColumnDef="firstName">
    <th mat-header-cell *matHeaderCellDef>FirstName</th>
    <td mat-cell *matCellDef="let element">{{ element.firstName }}</td>
  </ng-container>

  <ng-container matColumnDef="lastName">
    <th mat-header-cell *matHeaderCellDef>LastName</th>
    <td mat-cell *matCellDef="let element">{{ element.lastName }}</td>
  </ng-container>

  <ng-container matColumnDef="jobTitle">
    <th mat-header-cell *matHeaderCellDef>JobTitle</th>
    <td mat-cell *matCellDef="let element">{{ element.jobTitle }}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
```

Here we can notice that the data source is the same for both the mini and normal versions of the employee details component. The only thing is in the mini version we are just displaying less information, but in the normal component, we are displaying the complete details.

To make it compatible with `matTable` data source we are transforming accordingly, but the actual data source is still the same which is `employeeInfo` which is the property of `EmployeeBaseComponent`.

**Step4**:
Now let's see how we can consume these components. To do that we will create another component called employee list component where it will display all the employees and by default, it will display in minified version of employee details.

```typescript
import { Component, OnInit, Input } from '@angular/core';
import { Employee, EmployeeService } from 'src/app/shared/api/employee';

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.scss'],
})
export class EmployeeListComponent implements OnInit {
  employeeList: Employee[];
  constructor(private employeeService: EmployeeService) {}

  ngOnInit() {
    this.employeeList = this.employeeService.getEmployees();
  }
}
```

Corresponding HTML code will look like below

```html
<mat-card class="example-card" *ngFor="let employee of employeeList">
  <mat-card-content>
    <app-employee-details-mini [employeeInfo]="employee" *ngIf="!employee.showFullInfo"></app-employee-details-mini>
    <app-employee-details [employeeInfo]="employee" *ngIf="employee.showFullInfo"></app-employee-details>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button (click)="employee.showFullInfo = !employee.showFullInfo">
      {{ employee.showFullInfo ? 'Show Less' : 'Show More' }}
    </button>
  </mat-card-actions>
</mat-card>
```

So here we can see two components `app-employee-details-mini` and `app-employee-details`. Initially, we will display a mini version of employee details and if the user is interested by clicking `Show More` button we will display the complete details. But the data source for both the components is the same.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dtd20khx7ya0w7qwi4sz.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lizelgi7vxxzuzatthuw.PNG)

Few things need to consider in Inheritance.

- Life Cycle hooks are not inherited from the base component. In order to call the base component life hooks, we need to call something like below

```typescript
  ngOnInit() {
    super.ngOnInit();
  }
```

- Properties and methods on base class will be inherited based on the access level. Meaning if the properties/methods are private the child components cannot be inherited
- MetaData and Decorator will not be inherited from the parent component to child components. However, there is an exception to `@Input()` and `@Output()` decorators which can be inherited into the child component.
- Dependency injection is tricky in Inheritance. If we might need to provide the reference of the instance from child component and the parent component must make the property as public in the constructor. Below is a simple example to give more ideas.

> Parent Component

```typescript
@Component({
  selector: 'app-employee-base',
  template: ``,
  styleUrls: ['./employee-base.component.scss'],
})
export class EmployeeBaseComponent {
  employeeInfo: Employee;
  constructor(public employeeService: EmployeeService) {
    this.employeeInfo = this.employeeService.getEmployees();
  }
}

Child Component



@Component({
  selector: 'app-employee-details-mini',
  templateUrl: './employee-details-mini.component.html',
  styleUrls: ['./employee-details-mini.component.scss'],
})
export class EmployeeDetailsMiniComponent extends EmployeeBaseComponent {
  constructor(public employeeService: EmployeeService) {
    super(employeeService);
  }
}

Preloading Strategies in Angular

KrishnaSai Polanki — Sat, 01 Aug 2020 13:53:29 +0000

Let's learn about different preloading strategies in Angular.

In Angular whenever we click on any route the angular router first checks that particular module bundle is available or not in the browser's cache, if not it will go and get it. To make things faster here, angular provides a technic or strategy to pre-fetch or pre-load the modules. We can do this in 3 ways

1.NoPreloading: This is the default behavior and does not preloads any module except the main app module.

RouterModule.forRoot(appRoutes, { preloadingStrategy: NoPreloading }),

2.PreloadAllModules: Will load all the modules.

RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules }),

3.Custom: Here we can do the custom preloading based on the application modules. (ex: we can load the module on menu mouseover)

In this article lets learn about opting for a particular module to preload by using the custom property in the data property of route class.

OptInPreloading: Here we will be using a custom data attribute called preload to check any lazy-loaded module has this then will preload those modules.

opt-in-preload-strategy.service.ts

import { Injectable } from "@angular/core";
import { PreloadingStrategy, Route } from "@angular/router";
import { Observable, EMPTY } from "rxjs";

@Injectable({
  providedIn: "root",
})
export class OptInPreloadStrategyService implements PreloadingStrategy {
  constructor() {}
  preload(
    route: Route,
    load: () => import("rxjs").Observable<any>
  ): Observable<any> {
    return route.data.preload ? load() : EMPTY;
  }
}

app-routing.module.ts

import { Routes, RouterModule } from "@angular/router";
import { OptInPreloadStrategyService } from "./stategies/opt-in-preload-strategy.service";
const routes: Routes = [
  {
    path: "dashboard",
    loadChildren: () =>
      import("./dashboard/dashboard.module").then((m) => m.DashboardModule),
  },
  {
    path: "employee",
    loadChildren: () =>
      import("./employee/employee.module").then((m) => m.EmployeeModule),
    data: { preload: true },
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: OptInPreloadStrategyService,
    }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

In the above code snippet, we see the second parameter for the RouterModule to use the preloading strategy to use the custom preload strategy service.

Backup Service Fabric Stateful Service Data into ADL

KrishnaSai Polanki — Wed, 15 Jul 2020 15:38:29 +0000

In this blog post, we will learn about how to restore the stateful service data from the Azure Data Lake. You might be getting a doubt about why do we need to maintain a backup for the reliable service fabric stateful service data. There might be few scenarios when we might need to back up the data.

Few scenarios are like

If we need to do any maintenance activity as Service Fabric Cluster upgrade.
If there is any change in the schema of the state object.

Let's see with a simple example. I will be using the Visual Studio to create the sample Service Fabric application.

Prerequisites

Should have an active Azure subscription and configured an Azure Data Lake(ADL) storage service to restore the data into it.

For more info on ADL in Azure Azure DataLake

Demo

1. Create the Sample Service Fabric application in Visual Studio

Select Stateless Service Fabric application
Select the API Project
Once created, Right-click on Service Fabric project and select add Service Fabric project and select Stateful Service.

2. Create a Timer Adapter to inject into the Stateful service

Interface

    public interface ITimerAdapter
    {
        void Start();
        public double Interval { get; set; }
        event ElapsedEventHandler Elapsed;
        void Stop();
    }

Implementation class

    public class TimerAdapter : Timer, ITimerAdapter
    {
    }

3. Now we need to create the helper to to interact with ADL.

This helper will have following methods
- CreateFileSystem - Used to create the file system inside the ADL container.

          public async Task CreateFileSystem()
        {
            try
            {
                DataLakeServiceClient serviceClient = GetDataLakeServiceClient();

                await serviceClient.CreateFileSystemAsync("file-system-name");
            }
            catch (RequestFailedException ex)
            {
                if (ex.Status != 409)
                    throw;
            }
        }

UploadFile - Used to upload the file which we wanted to upload into the ADL.

          public async Task UploadFile(byte[] content, string directory, string fileName)
        {
            DataLakeFileSystemClient fileSystemClient = new DataLakeFileSystemClient(
                new Uri("<your ADL URI>/file-system-name"),
                new StorageSharedKeyCredential(_accountName, _accountKey));

            DataLakeDirectoryClient directoryClient = fileSystemClient.GetDirectoryClient(directory);
            DataLakeFileClient fileClient = await directoryClient.CreateFileAsync(fileName);

            MemoryStream ms = new MemoryStream(content);

            await fileClient.CreateAsync();

            if (content.Length > 0)
            {
                await fileClient.AppendAsync(ms, 0);
                await fileClient.FlushAsync(ms.Length);
            }
        }

DownloadFile - Used to download the file which we backed up in ADL and restore into state.

          public async Task<byte[]> DownloadFile(string directoryName, string fileName)
        {
            DataLakeFileSystemClient fileSystemClient = new DataLakeFileSystemClient(
                new Uri("<URI of ADL>/my-file-system"),
                new StorageSharedKeyCredential(_accountName, _accountKey));

            DataLakeDirectoryClient directoryClient =  fileSystemClient.GetDirectoryClient(directoryName);

            DataLakeFileClient fileClient = directoryClient.GetFileClient(fileName);

            Response<FileDownloadInfo> downloadResponse = await fileClient.ReadAsync();

            MemoryStream ms = new MemoryStream();
            downloadResponse.Value.Content.CopyTo(ms);

            return ms.ToArray();
        }

For more information on how to create this helper you can refer this link .NET to manage directories, files, and ACLs in Azure Data Lake Storage Gen2

4. Inject both TImer Adapter and DataLake Helper into the Stateful service class

Inject TImer Adapter and DataLake Helper into the constructor of the stateful service class.

        private readonly ITimerAdapter _timer;
        private readonly IDataLakeHelper _dataLakeHelper;
        public Stateful1(StatefulServiceContext context, ITimerAdapter timerAdapter, IDataLakeHelper dataLakeHelper)
            : base(context)
        {
            _dataLakeHelper = dataLakeHelper ?? new DataLakeHelper();
            _timer = timerAdapter ?? new TimerAdapter();
        }

The StartBackup callback method will look like below

        private void StartBackup(object sender, System.Timers.ElapsedEventArgs e)
        {
            var emp = new Employee()
            {
                Id = Guid.NewGuid(),
                Name = "Backup Test",
                Email = "backyp@test.com"
            };

            //Convert the object into byte[].
            byte[] bytes;
            var bf = new BinaryFormatter();
            using (var ms = new MemoryStream())
            {
                bf.Serialize(ms, emp);
                bytes = ms.ToArray();
            }

            //First we need to create the FileSystem
            _dataLakeHelper.CreateFileSystem();

            //Now upload the File into that file system.
            _dataLakeHelper.UploadFile(bytes, "Employee", "Employee.txt");
        }

The Restore method will look like

        private async Task Restore()
        {
            const string directoryName = "Employee";
            const string fileName = "Employee.txt";

            //Download the file which we uploaded as backup inside the directory "Employee" with a name "Employee.txt"
            var bytes = _dataLakeHelper.DownloadFile(directoryName, fileName).Result;

            // Deserialize the bytes into the Employee Object.
            Employee emp;
            var bf = new BinaryFormatter();
            await using (var ms = new MemoryStream(bytes))
            {
                emp = (Employee) bf.Deserialize(ms);

            }

            //Restore into the reliable dictionary.
            var dictionary = await StateManager.GetOrAddAsync<IReliableDictionary<string, Employee>>("Employee");

            using var tx = StateManager.CreateTransaction();
            await dictionary.AddOrUpdateAsync(tx, emp.Id.ToString(), emp, (s, d) => emp);

            await tx.CommitAsync();
        }

Use RunAsync Method of the Stateful service to register the Timer. Also start the timer and create a event handler to call when the timer elapsed. Also use the Restore to restore into the state.

        protected override async Task RunAsync(CancellationToken cancellationToken)
        {
            await Restore();

            _timer.Interval = 3000; //This is in MillSeconds
            _timer.Start();
            _timer.Elapsed += StartBackup;
        }

DEV Community: KrishnaSai Polanki

Single, SingleOrDefault, First and FirstOrDefault in LINQ

Single

SingleOrDefault

First

FirstOrDefault

Trigger Jenkins Job on PR from Azure DevOps

Triggering a Jenkins Job on PR in Azure DevOps

Capturing Pull Request Creation

Web Hook Service

Receiving Web Hook notification in Jenkins

Access modifiers in TypeScript class Constructor

Content Projection in Angular using ng-content

Single Slot Content Projection:

Multi Slot Content Projection:

Conditional Content Projection:

ngProjectAs:

Angular ng-template, ng-container and ngTemplateOutlet usages

ng-template:

ng-container:

ngTemplateOutlet:

Component Inheritance in Angular

Demo

Preloading Strategies in Angular

Let's learn about different preloading strategies in Angular.

Backup Service Fabric Stateful Service Data into ADL

Few scenarios are like

Prerequisites

Demo

1. Create the Sample Service Fabric application in Visual Studio

2. Create a Timer Adapter to inject into the Stateful service

3. Now we need to create the helper to to interact with ADL.

4. Inject both TImer Adapter and DataLake Helper into the Stateful service class