Web links

Angular clipboard CDK

Pandiyan Murugan3 Comments

Earlier, in our blog we have discussed about how to perform copy to clipboard feature in angular.

And also I have created a npm plugin for this feature.

Angular clipboard CDK

The Component Dev Kit (CDK) is a set of tools that implement common interaction patterns whilst being unopinionated about their presentation. It represents an abstraction of the core functionalities found in the Angular Material library, without any styling specific to Material Design. Think of the CDK as a blank state of well-tested functionality upon which you can develop your own bespoke components.

Definition from official website

The release candidate version of angular 9 brings separate module for clipboard feature.

In this post we will be using v/9.0.0-rc.8 to demonstrate the feature.

Step 1

Install the CDK package into the project.

npm i @angular/cdk@9.0.0-rc.8

Step 2

Import the ClipboardModule into target application module.

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { FormsModule } from "@angular/forms";
import { ClipboardModule } from "@angular/cdk/clipboard";
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule,
   AppRoutingModule, 
   FormsModule, 
   ClipboardModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3

Now use the cdkCopyToClipboard attribute and choose the content which needs to copied.

<div class="container">
	<h3>Clipboard demo</h3>
	<div>
		Copy the whole text inside the textarea
		<textarea rows="4" cols="50" [(ngModel)]="textValue"></textarea>
		<button cdkCopyToClipboard="{{textValue}}" class="waves-effect waves-light btn">
      Copy to clipboard
      </button>
	</div>
</div>

You can pass a static value or a variable to capture the dynamic value.

Demo

https://stackblitz.com/edit/github-kzzhcb?embed=1&file=src/app/app.component.html

Happy Coding!

Browser Link in ASP .NET Core

Pandiyan MuruganLeave a comment

What is Browser Link?

Browser Link is a feature in Visual Studio that creates a communication channel between the development environment and one or more web browsers. You can use Browser Link to refresh your web application in several browsers at once, which is useful for cross-browser testing.

How Does It Work?

Browser Link uses SignalR to create a communication channel between Visual Studio and the browser. When Browser Link is enabled, Visual Studio acts as a SignalR server that multiple clients (browsers) can connect to. Browser Link also registers an HTTP module with ASP.NET. This module injects special <script> references into every page request from the server. You can see the script references by selecting “View source” in the browser.

https://docs.microsoft.com/en-us/aspnet/visual-studio/overview/2013/using-browser-link/_static/image13.png

Your source files are not modified. The HTTP module injects the script references dynamically.

Because the browser-side code is all JavaScript, it works on all browsers that SignalR supports, without requiring any browser plug-in.

Earlier Discussion

We discussed about the browser link in .Net Framework earlier.

Take a look at here:

Browser Link option in Visual Studio

BrowserLink in ASP .NET Core

To use BrowserLink in ASP .NET Core, we should do few tweaks in the source code.

Install the following package in your project

Microsoft.VisualStudio.Web.BrowserLink

Or using packet manager

Install-Package Microsoft.VisualStudio.Web.BrowserLink -Version 2.2.0

And config BrowserLink in your startup.cs

if (env.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
    app.UseBrowserLink();
}

Start using

Now start using the BrowserLink from the tool bar dashboard

Happy Coding!