Image for post
Image for post
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?

Image for post
Image for post
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…

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
Image for post
Image for post
apachelounge website

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


You would have come across applications where they provide an option to view it in the language you prefer. This kind of feature would not be suitable for all applications.

The question is if I change the language, do I change the language of everything in the application? Not really. What I change are the labels, headings etc.

ngx-translate is an npm package that’s helps achieve this job.

Setup is quite simple! All you need to do is install the below 2 packages and make some changes in app.module of the angular application.

npm install @ngx-translate/core — save npm install…

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