3

I am rendering a dynamic page in my Angular application. I want to change favicon as per configured depending on the client. For example, if the client is tesco the favicon should be tesco favicon an so.

Any idea? I want do it using pure angular so please reject ideas with javascript.

beanic
  • 539
  • 6
  • 22
  • How you are identifying the client? – Vikas Keskar Jan 21 '20 at 12:42
  • The client comes from the backend so I get in the localStorage a label with the value of the client – beanic Jan 21 '20 at 12:43
  • Is it possible for you to make xhr request or ajax request from index.html to get client name and based on that add name of favicon into the index.html file. Also, send request from head so that it will get response during initialization of page. – Vikas Keskar Jan 21 '20 at 12:45

1 Answers1

5

similar question to -> Changing website favicon dynamically

you will need to manipulate the native DOM link element to accomplish this.

HTML

<link rel="icon" id="favIcon" type="image/x-icon" href="./assets/favicon.ico" />

Typescript

export class AppComponent implements OnInit {
   favIcon: HTMLLinkElement = document.querySelector('#favIcon');

   constructor() {
     this.favIcon.href = './favicon_path_folder/favicon.ico';
   }
}

using this you should be able to alter your code, so that when the client switches, or in ngOnInit of your target component you update the 'href' attribute of the faveIcon link

beanic
  • 539
  • 6
  • 22
Edward
  • 1,076
  • 1
  • 12
  • 24
  • thank you for your answer but it is not working for me. A message appears as follow "Duplicate identifier 'favIcon'. Subsequent property declarations must have the same type. Property 'favIcon' must be of type 'Element', but here has type 'any'." – beanic Jan 22 '20 at 10:30
  • `duplicate identifier 'favIcon'` would suggest you have more then one link with with an id of "faveIcon". are you using the same ID for mulitple link elements.? I updated my answer to set the data type on the element type `const faveIcon: HTMLLinkElement = document.querySelector("[INSERT SELECTOR]");` I tried this locally with a new angular app, using ` const faveIcon: HTMLLinkElement = document.querySelector("link[rel='icon']"); faveIcon.href = 'https://via.placeholder.com/150';` and I was able to change the icon – Edward Jan 22 '20 at 12:56
  • I don't know which is the problem but I still have that error. I've tried all kind of things and get same problem. I am using Angular 8. Maybe is not working for this angular version. – beanic Jan 22 '20 at 13:06
  • if creating a brand new angular app, and using this approach doesn't work. I'd suggest putting a simplified version of your code on stackbliz and sharing the link so it can be reviewed. – Edward Jan 22 '20 at 13:12
  • I have edited your answer. That solution worked perfectly for me. Thank you for the idea. – beanic Jan 22 '20 at 14:53