I am rendering a dynamic page, menu and other items in my application. I also want to change favicon as per configured by admin.
Say, for example, if when my page load configured favicon is xyz.png
then it will show xyz.png
as the favicon.
As in the below image, new favicon should replace existing one near by "Test Application". Right now, it shows the default favicon as seen below.
index.html
:
<!DOCTYPE html>
<html>
<head>
<base href="/MyFirstAngular2/" >
<title>Angular 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" id="appIcon" href="/favicon.ico" type="image/x-icon" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" />
<link href="css/Site.css" rel="stylesheet" />
<script src="scripts/jquery-2.2.1.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/main/shim.min.js"></script>
<script src="scripts/main/zone.js"></script>
<script src="scripts/main/reflect-metadata.js"></script>
<script src="scripts/main/system.src.js"></script>
<script src="scripts/system.config.js"></script>
<script>
document.SYSTEMJS_CONFIG.map.app = 'scripts/configs';
document.SYSTEMJS_CONFIG.packages.app = { main: 'application.ts', defaultExtension: 'ts' };
System.config(document.SYSTEMJS_CONFIG);
System.import('app').catch(function (err) {
console.error(err);
});
</script>
</head>
<body>
<application></application>
</body>
</html>
I get a new favicon on every component load, so you have to just change favicon icon from any component call.
app.module.ts
import {NgModule} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './path/to/app.component';
import {AppService} from './path/to/app.service';
// ....
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// ...
],
bootstrap: [AppComponent],
providers: [AppService]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
app.service.ts
import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Rx';
@Injectable()
export class AppService {
constructor(@Inject(DOCUMENT) private _document: HTMLDocument, private http:Http)
getAppDetails(appId: string) {
return this.http.post(url, appId)
.map((response: Response) => {
let details = response.json();
return details;
})
.do(data => console.log(data))
.catch(this.handleError);
}
private handleError(error: Response) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
setAppFavicon(id: string, basepath: string, icon: string){
this._document.getElementById('appFavicon').setAttribute('href', basepath+"/"+ icon);
}
}
app.component.ts
:
import {Component} from "@angular/core";
import {AppService} from "../path/to/app.service";
@Component({
selector: 'application',
templateUrl: './path/to/app.component.html'
})
export class ApplicationComponent {
details: any;
constructor(private appService: AppService) {
this.details = appService.getAppDetails(id);
appService.setAppFavicon(id,basepath,this.details.icon);
}
}