Ng-zorro-antd: Click event for nz-card - nzActions

[merihs]

What problem does this feature solve?

I created a nz-card with nzActions using ng-template. In the example in ngzorro's web site we are only able to set click event to icon or nz-avatar. Some icons or avatars are a little bit small and user are not able to click properly. Is it possible to set click event to whole nzActions area.
(ng-template creates 'li' automatically so it would be great to set a function to ng-template so to li indirectly.)

What does the proposed API look like?

Card Content

[NearZXH]

I have a template solution, you can modified the style of the nz-card-action，make the tag li is contained the width and height， here is a demo.

[merihs]

@NearZXH Thanks for the demo, this is exactly what I'm looking for. ;) Thanks

[RyanEntrostat]

@NearZXH How can I pass variables (context) into the templates so that it can be passed into the on click function?

Typically with ngTemplate you would define the let-context and then set the context when you call the template, with the nzActions (and other card template attributes) I am unable to work out how to pass the content to the template through the card.

[MAGICSCIENTIST]

@RyanEntrostat Have you solve the problem that how to pass the content? I'm facing the same problem..

[siweipancc]

@RyanEntrostat Have you solve the problem that how to pass the content? I'm facing the same problem..

a bad but useful idea is to look up its parent , as its source code looks like this  i seems i can use tag-name **nz-card** i need to find parent's id so i go up with a loop, and here the ways i try: - a loop in html

<div *ngFor="let article of articles;index as index" nz-col [nzSpan]="8">
            <nz-card [nzTitle]="article.lastModifiedDate|date" [id]="article.id"
                     [nzActions]="[actionEdit,actionDelete]">
              <a style="text-decoration: none;color: black" [routerLink]="['/note',article.id,'view']">
                <p>{{article.content.substr(0, 60)}}</p>
              </a>
            </nz-card>
          </div>

- and a template in html ``` ```` - and a function in *.ts.file

  gotoEdit(e: MouseEvent) {
    let element = e.srcElement;
    while ('nz-card'.toUpperCase() !== element.tagName) {
      element = element.parentElement;
      console.log(element.tagName);
    }
    console.log(`element.getAttribute('id') = ${element.getAttribute('id')}`);
  }

- it works well and prints  hope it helps

it's absolutely a stupid way to do such thing, forget it
@RyanEntrostat @MAGICSCIENTIST

[NearZXH]

@RyanEntrostat @MAGICSCIENTIST @siweipancc
Because Ng-zorro doesn't provide the [ngTemplateOutletContext] in its code. so there is no good way to realize it.
But i'm confused that why do you need to do this, you can pass the variables in the function easily, i guess you have multiple nz-cards so you want to do different things to each one. Here is a stackblitz demo.

[siweipancc]

@RyanEntrostat @MAGICSCIENTIST @siweipancc
Because Ng-zorro doesn't provide the [ngTemplateOutletContext] in its code. so there is no good way to realize it.
But i'm confused that why do you need to do this, you can pass the variables in the function easily, i guess you have multiple nz-cards so you want to do different things to each one. Here is a stackblitz demo.

thanks for good solution.

btw: Maybe I have attentioned too much on #referrence that forget so much perspective, sad