Update page Title for SEO.

frontend/src/app/app.module.ts

@@ -43,6 +43,7 @@ import { FiatComponent } from './fiat/fiat.component';
 import { MempoolBlockComponent } from './components/mempool-block/mempool-block.component';
 import { FeeDistributionGraphComponent } from './components/fee-distribution-graph/fee-distribution-graph.component';
 import { TimespanComponent } from './components/timespan/timespan.component';
+import { SeoService } from './services/seo.service';
 
 @NgModule({
   declarations: [
@@ -93,6 +94,7 @@ import { TimespanComponent } from './components/timespan/timespan.component';
     WebsocketService,
     VbytesPipe,
     AudioService,
+    SeoService,
   ],
   bootstrap: [AppComponent]
 })

frontend/src/app/components/about/about.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { WebsocketService } from '../../services/websocket.service';
+import { SeoService } from 'src/app/services/seo.service';
 
 @Component({
   selector: 'app-about',
@@ -10,9 +11,11 @@ export class AboutComponent implements OnInit {
 
   constructor(
     private websocketService: WebsocketService,
+    private seoService: SeoService,
   ) { }
 
   ngOnInit() {
+    this.seoService.setTitle('Contributors');
     this.websocketService.want(['blocks']);
   }
 

frontend/src/app/components/address/address.component.ts

@@ -8,6 +8,7 @@ import { StateService } from 'src/app/services/state.service';
 import { AudioService } from 'src/app/services/audio.service';
 import { ApiService } from 'src/app/services/api.service';
 import { of } from 'rxjs';
+import { SeoService } from 'src/app/services/seo.service';
 
 @Component({
   selector: 'app-address',
@@ -39,6 +40,7 @@ export class AddressComponent implements OnInit, OnDestroy {
     private stateService: StateService,
     private audioService: AudioService,
     private apiService: ApiService,
+    private seoService: SeoService,
   ) { }
 
   ngOnInit() {
@@ -54,6 +56,7 @@ export class AddressComponent implements OnInit, OnDestroy {
         this.transactions = null;
         document.body.scrollTo(0, 0);
         this.addressString = params.get('id') || '';
+        this.seoService.setTitle('Address: ' + this.addressString);
         this.loadAddress(this.addressString);
       });
 

frontend/src/app/components/block/block.component.ts

@@ -3,8 +3,9 @@ import { ActivatedRoute, ParamMap } from '@angular/router';
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { switchMap, tap, debounceTime, catchError } from 'rxjs/operators';
 import { Block, Transaction, Vout } from '../../interfaces/electrs.interface';
-import { of, empty } from 'rxjs';
+import { of } from 'rxjs';
 import { StateService } from '../../services/state.service';
+import { SeoService } from 'src/app/services/seo.service';
 
 @Component({
   selector: 'app-block',
@@ -27,6 +28,7 @@ export class BlockComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private electrsApiService: ElectrsApiService,
     private stateService: StateService,
+    private seoService: SeoService,
   ) { }
 
   ngOnInit() {
@@ -55,6 +57,7 @@ export class BlockComponent implements OnInit, OnDestroy {
       tap((block: Block) => {
         this.block = block;
         this.blockHeight = block.height;
+        this.seoService.setTitle('Block: #' + block.height + ': ' + block.id);
         this.isLoadingBlock = false;
         this.setBlockSubsidy();
         if (block.reward) {

frontend/src/app/components/latest-blocks/latest-blocks.component.ts

@@ -3,6 +3,7 @@ import { ElectrsApiService } from '../../services/electrs-api.service';
 import { StateService } from '../../services/state.service';
 import { Block } from '../../interfaces/electrs.interface';
 import { Subscription } from 'rxjs';
+import { SeoService } from 'src/app/services/seo.service';
 
 @Component({
   selector: 'app-latest-blocks',
@@ -21,9 +22,12 @@ export class LatestBlocksComponent implements OnInit, OnDestroy {
   constructor(
     private electrsApiService: ElectrsApiService,
     private stateService: StateService,
+    private seoService: SeoService,
   ) { }
 
   ngOnInit() {
+    this.seoService.resetTitle();
+
     this.blockSubscription = this.stateService.blocks$
       .subscribe((block) => {
         if (block === null || !this.blocks.length) {

frontend/src/app/components/mempool-block/mempool-block.component.ts

@@ -4,6 +4,7 @@ import { ActivatedRoute, ParamMap } from '@angular/router';
 import { switchMap, map, tap } from 'rxjs/operators';
 import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
 import { Observable } from 'rxjs';
+import { SeoService } from 'src/app/services/seo.service';
 
 @Component({
   selector: 'app-mempool-block',
@@ -17,9 +18,11 @@ export class MempoolBlockComponent implements OnInit, OnDestroy {
   constructor(
     private route: ActivatedRoute,
     private stateService: StateService,
+    private seoService: SeoService,
   ) { }
 
   ngOnInit(): void {
+    this.seoService.setTitle('Mempool block');
     this.mempoolBlock$ = this.route.paramMap
       .pipe(
         switchMap((params: ParamMap) => {

frontend/src/app/components/statistics/statistics.component.ts

@@ -12,6 +12,7 @@ import { ApiService } from '../../services/api.service';
 
 import * as Chartist from 'chartist';
 import { StateService } from 'src/app/services/state.service';
+import { SeoService } from 'src/app/services/seo.service';
 
 @Component({
   selector: 'app-statistics',
@@ -41,6 +42,7 @@ export class StatisticsComponent implements OnInit {
     private websocketService: WebsocketService,
     private apiService: ApiService,
     private stateService: StateService,
+    private seoService: SeoService,
   ) {
     this.radioGroupForm = this.formBuilder.group({
       dateSpan: '2h'
@@ -48,6 +50,7 @@ export class StatisticsComponent implements OnInit {
    }
 
   ngOnInit() {
+    this.seoService.setTitle('Graphs');
     const labelInterpolationFnc = (value: any, index: any) => {
       const nr = 6;
 

frontend/src/app/components/television/television.component.ts

@@ -7,6 +7,7 @@ import { WebsocketService } from 'src/app/services/websocket.service';
 import { OptimizedMempoolStats } from '../../interfaces/node-api.interface';
 import { StateService } from 'src/app/services/state.service';
 import { ApiService } from 'src/app/services/api.service';
+import { SeoService } from 'src/app/services/seo.service';
 
 @Component({
   selector: 'app-television',
@@ -26,9 +27,11 @@ export class TelevisionComponent implements OnInit {
     private vbytesPipe: VbytesPipe,
     private apiService: ApiService,
     private stateService: StateService,
+    private seoService: SeoService,
   ) { }
 
   ngOnInit() {
+    this.seoService.setTitle('TV view');
     this.websocketService.want(['blocks', 'live-2h-chart', 'mempool-blocks']);
 
     const labelInterpolationFnc = (value: any, index: any) => {

frontend/src/app/components/transaction/transaction.component.ts

@@ -8,7 +8,7 @@ import { StateService } from '../../services/state.service';
 import { WebsocketService } from '../../services/websocket.service';
 import { AudioService } from 'src/app/services/audio.service';
 import { ApiService } from 'src/app/services/api.service';
-import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
+import { SeoService } from 'src/app/services/seo.service';
 
 @Component({
   selector: 'app-transaction',
@@ -36,12 +36,14 @@ export class TransactionComponent implements OnInit, OnDestroy {
     private websocketService: WebsocketService,
     private audioService: AudioService,
     private apiService: ApiService,
+    private seoService: SeoService,
   ) { }
 
   ngOnInit() {
     this.route.paramMap.pipe(
       switchMap((params: ParamMap) => {
         this.txId = params.get('id') || '';
+        this.seoService.setTitle('Transaction: ' + this.txId);
         this.error = undefined;
         this.feeRating = undefined;
         this.isLoadingTx = true;
@@ -91,6 +93,9 @@ export class TransactionComponent implements OnInit, OnDestroy {
         this.audioService.playSound('magic');
         this.findBlockAndSetFeeRating();
       });
+
+    this.titleService.setTitle('');
+    this.meta.addTag({name: 'description', content: 'Angular project training on rsgitech.com'});
   }
 
   setMempoolBlocksSubscription() {

frontend/src/app/services/seo.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { Title, Meta } from '@angular/platform-browser';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SeoService {
+  defaultTitle = 'mempool - Bitcoin Explorer';
+
+  constructor(
+    private titleService: Title,
+  ) { }
+
+  setTitle(newTitle: string) {
+    this.titleService.setTitle(newTitle + ' - ' + this.defaultTitle);
+  }
+
+  resetTitle() {
+    this.titleService.setTitle(this.defaultTitle);
+  }
+}

frontend/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>mempool - Bitcoin block explorer</title>
+  <title>mempool - Bitcoin Explorer</title>
   <base href="/">
 
   <meta name="description" content="An open-source mempool visualizer and blockchain explorer for Bitcoin, Testnet, and Liquid. Features real-time updates and live transaction tracking." />