Empty component (ng-zorro)

Question

I'm trying to use Empty component ( https://ng.ant.design/components/empty/en#ng-content ) in my Angular 14 project (also I'm using Storybook). But there's no picture (or icon) in my component:
component without a picture

In the html code, there is svg tag, but it's invisible.

My component:

import { Component, OnInit } from '@angular/core';
import { NzI18nService, en_US } from 'ng-zorro-antd/i18n';

@Component({
  selector: 'ui-empty-results',
  templateUrl: './empty-results.component.html',
  styleUrls: ['./empty-results.component.scss'],
})
export class EmptyResultsComponent implements OnInit {
  constructor(private readonly i18n: NzI18nService) {}

  ngOnInit(): void {
    this.i18n.setLocale(en_US);
  }
}

My template:

<nz-empty nzNotFoundImage="simple"></nz-empty>

Also I installed @ant-design/icons: ^4.7.0 (thought it might help) and ng-zorro-antd: ^14.0.0.

In my Shared Module I imported NzEmptyModule and NzIconModule (and exported them as well) .
I added all the modules in moduleMetadata (component.stories.ts)

For example, Button Module works fine, I checked it. Thanks!

Answer 1

The nzNotFoundImage is expecting string | TemplateRef<void> string | TemplateRef<void> . You have to provide the url for your custom image or the template to render.

Example:

<nz-empty [nzNotFoundImage]="'/assets/image.jpg'"></nz-empty>

Or:

<nz-empty [nzNotFoundImage]="template"></nz-empty>
<ng-template #template>
  <img src="/assets/image.jpg" />
</ng-template>

If the image is to light you could apply this styles in your global style file:

.ant-empty-image, .ant-empty-small, .ant-empty-image-small, .ant-empty-image-simple, .ant-empty-img-simple-g, .ant-empty-img-simple-ellipse, .ant-empty-img-simple-path, .ant-empty-description {
  color: rgba(0, 0, 0, 0.4) !important;
  stroke: rgba(0, 0, 0, 0.4) !important;
}

This is the result:

Hope this work for you!