Ng-zorro-antd: feat request: support nzPlacement & nzTop in NzMessageDataOptions

[wendellhu95]

NzMessageDataOptions should support more properties like the React version. Ref https://ant.design/components/notification/#header. Ref #4323. cc @lppedd

[lppedd]

@wendzhue thanks! I can do it.

[wendellhu95]

@lppedd Really appreciate it!

[lppedd]

@wendzhue I had a couple minutes to reflect on the implementation, and I think we get an easier time compared on the React approach.

For example, we can keep track of the requested placements via the submitted messages, like

<div
  *ngFor="let placement of placementsSet | async; trackBy: byName"  (aid change detection)
  class="ant-notification ant-notification-{{ placement }}"
  [style... (omitted)"
>
  <nz-notification
    *ngFor="let message of messages[placement]; let i = index"
    [nzMessage]="message"
    [nzIndex]="i">
  </nz-notification>
</div>

This would mean not even having empty placeholder divs in DOM.
What do you think?

[wendellhu95]

@lppedd Looks good!

[lppedd]

@wendzhue regarding the top and bottom properties, how should I go with those?
Currently it's the container who's setting the distance, not the individual notifications. The React version seems to let setting the distance only for the first notification (per location), subsequents are ignored.
Are there guidelines for this?

[lppedd]

@wendzhue Ok. I have a working concept.
To maintain the distances I use a Map<string, string> currently.

Example:

I don't like how I use the Map in template however. I think I can transform it via Pipe, or I have to choose another structure. Although a map is good for this.

<div
  *ngFor="let placement of placements.entries(); trackBy: trackByName"
  class="ant-notification ant-notification-{{ placement[0] }}"
  [style.top]="placement[0] === 'topLeft' || placement[0] === 'topRight' ? placement[1] : null"
  ...

[wendellhu95]

Hi @lppedd . Sorry for the late reply. Your proposal looks good. Maybe we can have furthur discussions after you submit your PR requests. 😄

[lppedd]

@wendzhue sure! I'm not at home today so expect it for tomorrow :smile:

[wendellhu95]

@lppedd Ping~ Are you still working on this? If you have no time for this I could take it over.