You must have come across this scenario where 15 or more lines of HTML needs to be repeated across the component but with different/same data.

It's really foolish to write those 15 or more lines of HTML every time it is required. Instead, we can use resources provided by Angular to optimize our HTML code to just 3 lines each time. Let’s see how we can do this.

Consider a table that has to be populated with different data at multiple places in the component.

Component: I have defined 2 lists which will be displayed in tabular format in the…


service workers

This story is written assuming that you have basic knowledge on what service workers are and what they do.

Angular provides the ngsw-config.json file to control the caching behavior of the application. When you create a new project and add service workers to it, the file looks like this.

{
“$schema”: “./node_modules/@angular/service-worker/config/schema.json”,
“index”: “/index.html”,
“assetGroups”: [{
“name”: “app”,
“installMode”: “prefetch”,
“resources”: {
“files”: [
“/favicon.ico”,
“/index.html”,
“/*.css”,
“/*.js”
]
}
}, {
“name”: “assets”,
“installMode”: “lazy”,
“updateMode”: “prefetch”,
“resources”: {
“files”: [
“/assets/**”,
“/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)”
]}}
]
}

This json currently has no configuration for caching http requests. It needs to…


You might have come across web notifications swiping across your desktop or mobile screen regularly.This story covers the below points:

=>How does a user subscribe to the web push notifications?

=>How does the subscribed user receive a web push notification?

web push notifications

What exactly are these Web Push Notifications?

Web/browser push notifications are messages from a website you receive in your browser. They notify users about sales, important updates or new content on the website.

Every push notification should be useful and time-sensitive, and the user should always be asked for permission before sending the first one, and be offered an easy way to opt out of getting more…


If you would like to know a radio button tree can be implemented, you can check the below:

Implementing a checkbox tree is very similar to a radio button tree but with slight differences.

Below the data we are going to use. Its an array of objects exported from books.ts

//books.ts
export const books={“books”:[{
type”:”Horror”,”authors”:[{“name”:”Stephen King”,”books”:[“Revival”,”Dark Half”,”Pet Sematary”,”Misery”,”The Girl who loved Tom Gordon”]},{“name”:”Dan Brown”,”books”:[“Origin”,”The Da Vinci Code”,”Digital Fortress”,”Angels and Demons”,”Deception Point”]},{“name”:”Katie Macalister”,”books”:[“Dragon Soul”,”Fire Born”,”Shadow Born”,”Life,Love and the Pursuit of Hotties”,”Time Crossed”]}
]
},
{
type”:”Science and Fiction”,”authors”:[{“name”:”Jules Verne”,”books”:[“Twenty Thousand Leagues Under the Sea”,”Journey to the center of the Earth”,”From the Earth to the Moon”,”Around the Moon”,”Off…


I have found a radio button tree structure in many web applications. This story shows one of the many ways you could implement it.

Below the data we are going to use. Its an array of objects exported from books.ts

//books.ts
export const books={
“books”:[{
“type”:”Horror”,”authors”:[
{“name”:”Stephen King”,”books”:[“Revival”,”Dark Half”,”Pet Sematary”,”Misery”,”The Girl who loved Tom Gordon”]},{“name”:”Dan Brown”,”books”:[“Origin”,”The Da Vinci Code”,”Digital Fortress”,”Angels and Demons”,”Deception Point”]},{“name”:”Katie Macalister”,”books”:[“Dragon Soul”,”Fire Born”,”Shadow Born”,”Life,Love and the Pursuit of Hotties”,”Time Crossed”]}
]
},
{
“type”:”Science and Fiction”,”authors”:[
{“name”:”Jules Verne”,”books”:[“Twenty Thousand Leagues Under the Sea”,”Journey to the center of the Earth”,”From the Earth to the Moon”,”Around the…


If you would like to check the implementation of how to filter and sort an array of nested objects only, you can check the below story:

Searching through an array of objects and arrays is very similar to the above implementation,but with small changes.

Consider the below array of JSON objects and arrays exported from cakes.ts

//cakes.ts
export const cakes=[
{
“id”: “0001”,
“type”: “donut”,
“name”: “Cake”,
“ppu”: 0.56,
“batters”:{
“batter”:[
{ “id”: “1001”, “type”: “Regular” },
{ “id”: “1002”, “type”: “Chocolate” },
{ “id”: “1003”, “type”: “Blueberry” },
{ “id”: “1004”, “type”: “Devil’s Food” }]
},
“topping”:[
{ “id”: “5001”, “type”: “None” },
{ “id”: “5002”, “type”: “Glazed” },
{ “id”: “5005”, “type”: “Sugar” },
{ “id”…


If you would like to check the implementation of how to filter and sort an array of non-nested objects, you can check the below story:

Consider the below array of JSON objects exported from users.ts

//users.ts
export const users=[{
name”:
{“title”:”Monsieur”,”first”:”Niklas”,”last”:”Philippe”},
dob”:{“date”:”1973–02–17T18:35:33.898Z”,”age”:47},
gender”:”male”,
email”:”niklas.philippe@example.com”,
location”:{“street”:{“number”:2179,”name”:”Avenue Joliot Curie”},”city”:”Aulnay-sous-Bois”,”state”:”Hautes-Pyrénées”,”country”:”France”,”postcode”:37752}
},
{
“name”:{“title”:”Mrs”,”first”:”Nicoline”,”last”:”Jensen”},
“dob”:{“date”:”1959–05–30T12:20:56.272Z”,”age”:61},
“gender”:”female”,”email”:”nicoline.jensen@example.com”,
“location”:{“street”:{“number”:544,”name”:”Poplar Dr”},”city”:”Australian Capital Territory”,”state”:”Queensland”,”country”:”Australia”,”postcode”:2703}
},
{
“name”:{“title”:”Miss”,”first”:”Lilly”,”last”:”Smith”},
“dob”:{“date”:”1995–04–11T08:12:02.912Z”,”age”:25},
“gender”:”female”,”email”:”lily.smith@example.com”,
“location”:{“street”:{“number”:8927,”name”:”Washington Ave”},”city”:”Cairns”,”state”:”Australian Capital Territory”,”country”:”Australia”,”postcode”:4313}
},
{
“name”:{“title”:”Mr”,”first”:”Julio”,”last”:”Ibanez”},
“dob”:{“date”:”1946–10–18T09:54:57.564Z”,”age”:74},
“gender”:”male”,”email”:”julio.ibanez@example.com”,
“location”:{“street”:{“number”:6283,”name”:”Calle de Atocha”},”city”:”Oviedo”,”state”:”Canarias”,”country”:”Spain”,”postcode”:94457}
},
{
“name”:{“title”:”Monsieur”,”first”:”Horst”,”last”:”Bernard”},
“dob”:{“date”:”1969–07–29T22:21:47.381Z”,”age”:51},
“gender”:”male”,”email”:”horst.bernard@example.com”,
“location”:{“street”:{“number”:1217,”name”:”Rue de Cuire”},”city”:”Nîmes”,”state”:”Maine-et-Loire”,”country”:”France”,”postcode”:27584}
},
]…


The implementation I want to share is how you could filter an array of non-nested objects using Pipes in Angular.

Consider an array of JSON objects exported from users.ts

export const users=[{“title”:”Monsieur”,”first”:”Niklas”,”last”:”Philippe”,”age”:20,”gender”:”male”,”email”:”niklas.philippe@example.com”},{“title”:”Mrs”,”first”:”Nicoline”,”last”:”Jensen”,”age”:4,”gender”:”female”,”email”:”nicoline.jensen@example.com”},{“title”:”Miss”,”first”:”Lilly”,”last”:”Smith”,”age”:34,”gender”:”female”,”email”:”lily.smith@example.com”},{“title”:”Mr”,”first”:”Julio”,”last”:”Ibanez”,”age”:40,”gender”:”male”,”email”:”julio.ibanez@example.com”},{“title”:”Monsieur”,”first”:”Horst”,”last”:”Bernard”,”age”:52,”gender”:”male”,”email”:”horst.bernard@example.com”}
]

I would like to create a table with all the above details and search for any thing in the table using a search box as well as sort any column in the table in ascending or descending order.

Template:

<input type=”text” [(ngModel)]=”searchTerm” name=”searchTerm” placeholder=”Search”>…


Angular provides Activate Gaurds to prevent unauthorised access into a route. Similarly, you can use directives if you want a user to access only certain aspects of a component.

Consider a scenario where a user John has the below levels of CRUD access for 2 resources ABC and PQR in the component.

permissions={
“userID”:”John”,
“entitled”:[{
“resource”:”ABC”,
“create”:false,
“read”:true,
“delete”:false,
“edit”:true
},
{
“resource”:”PQR”,
“create”:true,
“read”:true,
“delete”:false,
“edit”:true
}]
}

Below is the Directive that does the job of role discrimination.

export class RoleDiscrDirective {constructor(private element:ElementRef) { }
@Input() action:string;
@Input() resource:string;
permissions={
“userID”:”John”,
“entitled”:[{
“resource”:”ABC”,
“create”:false,
“read”:true,
“delete”:false,
“edit”:true
},
{
“resource”:”PQR”,
“create”:true,
“read”:true,
“delete”:false,
“edit”:true
}
]
}…


An Angular application under development is served from local memory, using webpack dev server. This webpack dev server provides a simple web server and the ability of live reloading.

This story focusses on how you can serve the application from an Apache 2.4 web server and also how you can optimise the bundle size of the application using Gzip compression.

Lets first begin with Apache Http server installation on Windows OS.

  1. Download the appropriate zip file from https://www.apachelounge.com/download/ and unzip it into your C drive.It looks like the screenshot below
apachelounge website

2. The unzipped httpd-2.4.46-win64-VS16 folder would contain an Apache folder…

Ramya Balasubramanian

An Angular Developer who loves finding answers to all the mysteries of this universe

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store