Custom styling

[MadaManu]

Hi,

I'm trying to style the flag in a circle, with custom border and drop shadow color etc. but I'm not a CSS expert and seems like trying to override .flag style doesn't achieve what I want.

Is there a way I can override the styles using the component?

<lib-angular-flagpack
          code="us"
          size="m"
          hasBorderRadius="true">
</lib-angular-flagpack>

[noudadrichem]

You could and should be able to add a classname and overwrite it's styling.

[MadaManu]

So I've added className="flagIco" to the component as:

<lib-angular-flagpack
          code="us"
          size="m"
          hasBorderRadius="true"
          className="flagIco">
</lib-angular-flagpack>

However, adding any styles, within this class do not get reflected in the div that's displaying the icon.
A quick look through it, and it seems that the class, is not applied to the component inner div.
I found that, adding in a gradient="top-down" causes the inner div to contain the className too. Even then so, none of the styles get applied, as the css class scope is within that component, and not found, so not picked up.

In order for it to get picked up, one needs to include ::ng-deep in the styling so it also trickle down to the components that are children to the current component in the component tree. So my style is:

::ng-deep .flagIco
  border-radius: 11px !important
  width: 22px !important
  height: 22px !important

Going back on the gradient, as I said above, if not set to something it doesn't pick up the custom className. But when it's set to anything (even '') it causes a border to be shown, not entirely sure why. See attached screenshot, matching the below setup:

<mat-option>
        <lib-angular-flagpack
          code="us"
          hasBorderRadius="false"
          hasBorder="false"
          hasDropShadow="false"
          gradient=''
          className="flagIco">
         </lib-angular-flagpack>
      US
    </mat-option>
    <mat-option>
      <lib-angular-flagpack
        code="au"
        size="m"
        className="flagIco">
      </lib-angular-flagpack>
      Australia
    </mat-option>

More to add on the gradient, console shows: NgClass can only toggle CSS classes expressed as strings, got undefined if it is missing