Freelance Project Requests info@CodeDocu.de Software Development in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

 

How to change the heading of a page displayed in the browser tab in Angular?

 

solution:

Using this.titleService.setTitle in the component.ts file

 

In the header of the component.ts file you have to include @angular/platform-browser

 

import { Title } from '@angular/platform-browser';

 

 

Then you can change the title with setTitle

 

    this.titleService.setTitle("My Title");

 

 

 

 

 

Code-Component.component.ts

import { Component, OnInit } from '@angular/core';

import { ActivatedRoute, Router } from '@angular/router';

import { merge, of as observableOf } from 'rxjs';

import { catchError, startWith, switchMap } from 'rxjs/operators';

import { Title } from '@angular/platform-browser';

 

 

import { ArticleModel } from '../models/articles.model';

import { ArticleDataService } from "../serives/articles.service";

 

@Component({

  selector: 'app-read-article',

  templateUrl: './read-article.component.html',

  styleUrls: ['./read-article.component.css']

})

export class ReadArticleComponent implements OnInit {

 

  constructor(

    public dataService: ArticleDataService,

    private route: ActivatedRoute,  //*get ID

    private titleService:Title,     //*set page title

  ) { }

 

  //< variables >

  public resultsLength = 0;

  public isLoadingResults = false;

  public isHttpError = false;

  public sError_Message = "Web Data error  or http request error";

  //</ variables >

 

  //--< mapping >--

  id: number; //*map to idtimeRecord

  iduser: String;

  article: ArticleModel;

  dtEdit: Date;

  //--</ mapping >--

 

 

 

  ngOnInit() {

    //--------< ngOnInit() >--------

    this.route.params.subscribe(params => {

      //< get ID >

      //*get ID from URL like timerecords/1

      this.id = +params['id'];  // (+) converts string 'id' to a number

      console.log(this.id);

      //</ get ID >

 

      if (this.id > 0) {

        //< get Dataset >

        this.load_DataSource();       

        //</ get Dataset >

      }

      else {

        //< new >

        //*empty fields

        //</ new >

      }

 

    });

 

   

    //--------</ ngOnInit() >--------

  }

 

 

  //#region

  //====< functions >====

  load_DataSource() {

    //--------< load_DataSource() >--------

    //< check >

    if (this.id == 0) return;

    //</ check >

 

    this.isLoadingResults = true;

    merge()

      .pipe(

        startWith({}),

        switchMap(() => {

          this.isLoadingResults = true;

          return this.dataService.get_Dataset(this.id)

        }),

        catchError(() => {

          this.isLoadingResults = true;

          this.isHttpError = true;

          return observableOf([]);

        })

      ).subscribe(response => {

        //--< async response >--

        this.article = response as ArticleModel

 

        //console.log("response=" + response.toString());

        this.map_Data();  //*map json to local variables

        this.init_Data(); //*set title

        //--</ async response >--

      }

 

      );

    //--------</ load_DataSource() >--------

  }

 

 

  map_Data() {

    //--------< map_Data() >--------

    //*map Recordset to local variables

    console.log("id=" + this.id);

    this.dtEdit = new Date(this.article.dtedit);

   

    //< convert iso Date >

    //*convert Iso-Date-Time to Javascript Date: 2021-01-20T08:00:00

    //this.sDateEdit = this.get_Date_String_from_Date(this.dtEdit);

    //</ convert iso Date >

 

    //--------</ map_Data() >--------

  }

 

  init_Data() {

    //--------< init_Data() >--------

    this.titleService.setTitle("👁 " + this.article?.title);

    //--------</ init_Data() >--------

  }

 

}

 

 

Mobile

.

Contact for Jobs, Project Requests: raimund.popp@microsoft-programmierer.de