Why Ant Design for Angular has grid directives instead of just components

2697 views angular

 <div nz-row nzType="flex" nzJustify="center" nzAlign="top">
    <div nz-col nzSpan="4"><p class="height-100">col-4</p></div>
    <div nz-col nzSpan="4"><p class="height-50">col-4</p></div>
    <div nz-col nzSpan="4"><p class="height-120">col-4</p></div>
    <div nz-col nzSpan="4"><p class="height-80">col-4</p></div>

This code from Ant design component library is using nz-col as directive. Can somebody explain why it is used as directive instead of component? Any significance of using as directive?

answered question

From reading the source code, it simply extends the component github.com/NG-ZORRO/ng-zorro-antd/blob/…

1 Answer


If you have a look at the source code of NzColDirective, it extends the NzColComponent class.

NzColComponent essentially to have access to things like @Host Component, the @Host Directive, ElementRef etc, is relying on NzColDirective and is eventually taking it from there as NzColDirective essentially calls super in it's constructor and passes it all those properties.

posted this

Have an answer?


Please login first before posting an answer.