Full Trust European Hosting

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

Angular.js Hosting UK - HostForLIFE.eu :: Create Web Workers In Angular

clock February 14, 2020 08:29 by author Peter
In this article, we'll learn how to use web workers in Angular 8/9.

Web Workers
Web workers speed up in your application when we start working on CPU-intensive tasks. They let you offload work to a background thread. Once we allow a web worker to run, we can use it normally in our application, and the Angular cli will be able to split bundle and code.

The Following Browser versions which are supported in web workers:

  • Firefox: 3.5
  • Chrome: 4
  • Safari: 4
  • IE:10
  • Opera: 10.6

Installing AngularCLI
Let’s get started by installing Angular CLI, which is the official tool for creating and working with Angular projects. Open a new terminal and run the below command to install Angular CLI.

npm install -g @angular/cli.

If you want to install Angular 9, simply add @next
npm install --g @angular/[email protected]

Please check the below command for the Angular version.
ng version

Steps to follow:
Step 1
Create an Angular project setup using the below command or however you want to create it.
ng new projectname
 
Example,
ng new webworker

Step 2
Now, we must generate web workers from our Angular cli. Open a new terminal and run the below command.
ng generate webWorker my-worker
 
Create Web Workers In Angular 8/9
 
Step 3
Now, Create a Web Worker Object in App.component.ts(main scripts)
    const worker = new Worker ('./my-worker.worker', {type: 'module'});  

We can do some code in App.component.ts (main scripts)
    if (typeof Worker !== 'undefined') { 
        // Create a new 
        const worker = new Worker('./my-worker.worker', { 
            type: 'module' 
        }); 
        worker.onmessage = ({ 
            data 
        }) => { 
            console.log(`page got message: ${data}`); 
        }; 
        worker.postMessage('welcome'); 
    } else { 
        console.log('Web Workers are not supported in this environment.'); 
        // Web Workers are not supported in this environment. 
        // You should add a fallback so that your program still executes correctly. 
    } 


Step 4
Now, we can do some code in my-worker.worker.ts
    addEventListener('message', ({ 
        data 
    }) => { 
        const response = `worker response to ${data}`; 
        postMessage(response); 
    });  

    Web Workers are supported in the browser
    Create a new worker (main scripts).
    Post message to the worker in my-worker.worker.ts.
    When the worker gets the message, addEventListener will fire, and it will create a response to the object then it will call postMessage method.

Step 5
Now, run the application.
npm start

Step 6
Now, we will get the following output,



Angular.js Hosting UK - HostForLIFE.eu :: Two Way Data Binding In Angular

clock July 4, 2019 11:52 by author Peter

This article will explain the two-way data binding in Angular. I would recommend you read the below articles before starting with this one.

  • Interpolation data binding in angular
  • Property Data binding in angular
  • Class data binding in angular
  • Style data Binding in angular
  • Attribute data Binding in angular
  • Event data binding in angular

What is two-way data binding Angular?
Using two-way binding, we can display a data property as well as update that property when the user makes changes. We can achieve it in the component element and HTML element, both. Two-way data binding uses the syntaxes of property binding and event binding together. Property binding uses the syntax as bracket [] or bind and event binding uses the syntax as parenthesis () or on and these bindings are considered as one-way bindings. Two-way binding works in both directions setting the value and fetching the value. Two-way binding uses the syntax as [()] or the bindon keyword. It also called the "banana in the box" symbol. It looks like a banana in a box.

Let us see two-way data binding with an example.

Step 1
Open the command prompt from Windows search.

Step 2
Create a new project in Angular.
ng new AngularDemo

Step 3
Open the project in Visual Studio Code. Type the following command to open it.
Code .

Step 4
Open terminal in Visual Studio Code and create a component, "employee".
ng g c example

Step 5
Open the example component in your application and change the code with the following one.
import { Component, OnInit } from '@angular/core'; 

@Component({ 
selector: 'app-example', 
templateUrl: './example.component.html', 
styleUrls: ['./example.component.css'] 
}) 
export class ExampleComponent { 
firstName: string = ""; 
lastName: string = ""; 

fullname() { 
return this.firstName + " " + this.lastName; 



Step 6
Open example.component.html in your application and change the code with the following one.
<div class="container"> 
<h3 class="text-uppercase text-center">Two Way data binding in angular</h3> 
<div class="row"> 
    <div class="col-md-4"> 
        <div class="form-group"> 
            <label>First Name:</label> 
            <input [value]="firstName" class="form-control" (input)='firstName= $event.target.value'> 
        </div> 
    </div> 
    <div class="col-md-4"> 
        <div class="form-group"> 
            <label>Last Name:</label> 
            <input [value]="lastName" class="form-control" (input)='lastName= $event.target.value'> 
        </div> 
    </div> 
</div> 
<h4 class="text-uppercase ">{{fullname()}}</h4> 
</div> 


Step 7
Open app.component.html in your application to take the selector name from employee.component.ts.
< <app-example></app-example> 

Step 8
Run the application by typing the following command.
ng serve –open

Another example of two-way data binding using FormsModule
Step-1 Open app.module.ts and import FormsModule as shown in the image. Change the code with the following one.

Step-2 Open example.component.ts write below code
import { Component, OnInit } from '@angular/core'; 
@Component({ 
selector: 'app-example', 
templateUrl: './example.component.html', 
styleUrls: ['./example.component.css'] 
}) 
export class ExampleComponent { 
public firstName:string=''; 
public lastName:string=''; 
public position:string=''; 
public salary:number; 


Step-3 Now open example.component.html and write below code

<div class="container"> 
<h3 class="text-uppercase text-center">Two Way data binding in angular</h3> 
<div class="row"> 
    <div class="col-md-4"> 
        <div class="form-group"> 
            <label>First Name:</label> 
            <input type="text" class="form-control" [(ngModel)]="firstName">                
        </div> 
    </div> 
    <div class="col-md-4"> 
        <div class="form-group"> 
            <label>Last Name:</label> 
           <input type="text" class="form-control" [(ngModel)]="lastName"> 
        </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-4"> 
        <div class="form-group"> 
            <label>Position:</label> 
            <input type="text" class="form-control" [(ngModel)]="position">         
        </div> 
    </div> 
    <div class="col-md-4"> 
        <div class="form-group"> 
            <label>Salary:</label> 
           <input type="number" class="form-control" [(ngModel)]="salary"> 
        </div> 
    </div> 
</div> 
<p> 
First Name:<strong class="text-uppercase">{{firstName}}</strong> 
</p> 
<p> 
Last Name:<strong class="text-uppercase">{{lastName}}</strong> 
</p> 
<p> 
Position:<strong class="text-uppercase">{{position}}</strong> 
</p> 
<p> 
Salary:<strong class="text-uppercase">{{salary}}</strong> 
</p> 
</div> 



About HostForLIFE

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

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


Tag cloud

Sign in