<div>
    <legend-vector-layer-directive *ngIf="layer.type == 'vector'" [layer-style]="styles" [geometry-type]="geometryTypes">
    </legend-vector-layer-directive>
    <div *ngIf="layer.type == 'wms'">
        <img *ngFor="let sublayer of layer.subLayerLegends" [src]="sublayer" onerror=" this.parentNode.removeChild(this); " onload="if(this.height<6) { this.parentNode.removeChild(this); }">
    </div>
   <div *ngIf="layer.type == 'vector'">
        <p *ngFor="let category of layer.lyr.getSource().legend_categories"><span style="background-color: {{category.color}};">&nbsp;&nbsp;&nbsp;</span>&nbsp;{{category.name}}
        </p>
    </div>
   <hs-legend-layer-static *ngIf="layer.type == 'static'" [layer]="layer"></hs-legend-layer-static>
</div>

<div>
    <legend-vector-layer-directive *ngIf="layer.type == 'vector'" [layer-style]="styles" [geometry-type]="geometryTypes">
    </legend-vector-layer-directive>
    <div *ngIf="layer.type == 'wms'">
        <img *ngFor="let sublayer of layer.subLayerLegends" [src]="sublayer" onerror=" this.parentNode.removeChild(this); " onload="if(this.height<6) { this.parentNode.removeChild(this); }">
    </div>
    <div *ngIf="layer.type == 'vector'">
        <p *ngFor="let category of layer.lyr.getSource().legend_categories"><span [ngStyle]="{'background-color': category.color}">&nbsp;&nbsp;&nbsp;</span>&nbsp;{{category.name}}
        </p>
    </div>
    <hs-legend-layer-static *ngIf="layer.type == 'static'" [layer]="layer"></hs-legend-layer-static>
</div>

Fix ngStyle of layer legend
Fix ngStyle of layer legend
