How to change location of favIcon in angular 11 based on some condition
Question
I am using Angular 11 in which I am able to load/show the favicon which is located in the src folder. But my requirement is to make favicon configurable if I have put its location in the config variable so that it would take the location of favicon based on the value which I have provided in the config file. Note: we are changing the config variable only before deployment.
I have tried using many things but nothing is working for me. Only I am able to get the favicon which is located in the source folder. In app.component.html
<head>
<meta charset="utf-8">
<title>Test</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" id ="favIcon" href="assets/{{favIcon}}">
</head>
<body>
</body>
In app.component.ts file, favIcon variable is set to images/favicon1.ico
We have tried changing this by JavaScript using document selector in app.component.ts
this.favicon = document.getElementById('favIcon');
this.favicon.href = this._sanitizer.bypassSecurityTrustUrl("assets/images/rdh-favIcon.ico");
could you please provide any solution so that I can use a different favicon from a different location?
In angular.json
"assets": ["src/favicon.ico",
"src/assets"],
1 answers
solution1
0 2021-08-13 21:30:44
In your app.component.html
<link rel="icon" id ="favIcon" type="image/x-icon" href="favicon.ico">
In your app.component.ts
export class AppComponent {
favIcon: HTMLLinkElement = document.querySelector('#favIcon');
changeIcon() {
this.favIcon.href = 'https://www.google.com/favicon.ico';
}
}
For Angular 12.x replace
favIcon: HTMLLinkElement = document.querySelector('#favIcon')
with
favIcon: any = document.querySelector('#favIcon')
Don't forget to add a button somewhere in your app.component.html that excutes this changeIcon() function.
ie
<button (click)="changeIcon()">Change favicon</button>
Hope this helped.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.