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?

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…

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”…

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…

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

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