topic Re: Styling Popup Text in Angular in ArcGIS JavaScript Maps SDK Questions

Styling Popup Text in Angular

IfThenTim — Tue, 04 Jan 2022 23:05:41 GMT

Drawing from a prior post on styling popup text, I discovered the solution did not work for me in an Angular project.

With some help, I landed on a work-around of moving some page-level CSS to global. That seems backwards from the way CSS is supposed to work in Angular.

Specifically, I had to move this code to global.scss to be able to change the popup text color to black.

/* import ArcGIS styles required for map marker popups to display */ @import "https://js.arcgis.com/4.22/esri/themes/light/view.css"; /* increase contrast of popup text */ .esri-feature-content p { color: black; }

Is there a better way of styling popup text in an Angular application?

Re: Styling Popup Text in Angular

AndyGup — Tue, 04 Jan 2022 23:32:19 GMT

@IfThenTim that does seem odd. If the map code is in a component, in theory the CSS will work at the component level. Were there any console messages? Do you have a GitHub repo that demonstrates the issue?

Re: Styling Popup Text in Angular

IfThenTim — Thu, 13 Jan 2022 22:48:07 GMT

Thanks for your reply!

I don't see any console messages that suggest problems.

It took a while, but I now have a GitHub repo with a simple application that demonstrates the problem. This is based on your jsapi-angular-cli repo, with a minimal amount of code change.

Re: Styling Popup Text in Angular

AndyGup — Fri, 14 Jan 2022 01:48:44 GMT

Okay, thanks for the repo. What's going on has to do with CSS precedence and specificity, as well as Angular component life-cycle and encapsulation, so it's a little tricky. The important difference between the Angular component and the Popup is that the ArcGIS API's Popup is not a member of your Angular component when the component is initialized. Popup pulls its CSS from the ArcGIS CDN assets which are loaded after the component's CSS, and by default are pulled from here https://js.arcgis.com/4.22/@arcgis/core/assets/esri/themes/light/main.css. You can see this request in the developer console's Network tab.

There are several ways to address this issue. You identified one of them - use a global CSS to override styles. You can also host the ArcGIS assets locally and create your own custom Sass-based theme. Here are a few links:

Working with local assets

Custom CSS with Sass

Angular life-cycle hooks

Angular component styles

Did that help?

Re: Styling Popup Text in Angular

IfThenTim — Fri, 14 Jan 2022 23:05:20 GMT

Thanks for your assistance. For the near-term circumstances, I will know I have already landed on the best option. It's good to know the alternatives too. <g>