Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Angular: Page Title setzen

07.04.2021 (👁11967)


Wie kann man in Angular die Überschrift einer Seite ändern, die im Tab des Browsers angezeigt wird?

Lösung:

Mit this.titleService.setTitle in der component.ts Datei



 

Im Header der component.ts Datei muss man @angular/platform-browser einbinden

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

 

 

Dann kann man mit setTitle den Title ändern

    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() >--------

  }

 

}