Ho do i change my component element size on a table?

Issue

i would like to know, how (and if there is) a possibility to resize a component imported in another page in Angular.

Here is what i have:

• I created a button component so that i could reuse it wherever i wanted (let's call it component A)
• I created a table on another component (let's call it component B).

---

Now if i import the component A on my table cell (situated in component B) i can not move it. I can't dynamically change his position. For reference i am using ng zorro table and in the <td> tag i put nzAlign="center" property. But it does not work the button is not being centered on the cell. As you can see here in the picture the <app-delete-btn> element has more width than the button itself and that is why is not getting centered. Thanks to whoever responds to this!

---

Button Image

Solution

I fixed the error by changing the style of class .ant-btn in my style.css. so for class .ant-btn, add css properties display: flex, margin: auto and align-items: center that way the button takes only the width of itself therefore it works on table. But thanks guys for the tips!

.ant-btn{
  display: flex;
  margin: auto;
  align-items: center;
}

And then used nzAlign to align the button in the center on table.

Answered By - ludovicoilgrande