search

allianz / ng-aquila

Angular UI Component library for the Open Insurance Platform
https://allianz.github.io/ng-aquila/
Other
209 stars 36 forks source link

[<Grid-Layout>] Error with nxColDirective #60

Closed criswagaraje closed 6 months ago

criswagaraje commented 11 months ago

⚡ Reproduction

<div nxLayout="grid" class="login">
    <div nxRow rowAlignItems="start,start,center" rowJustify="center">
      <div nxCol="12" class="nx-margin-top-m text_center">
        <img class="logo" src="assets/img/allianz_logo_with_name.svg" alt="" />
        <h2 nxHeadline="subsection-medium" class="nx-font-weight-bold text_center">
          {{ 'LOGIN.TITLE' | translate }}
        </h2>
        <h4 nxHeadline="subsection-medium" class="nx-font-weight-bold text_center">
          {{ 'LOGIN.TEXT' | translate }}
        </h4>
      </div>
    </div>

📗 Expected Behavior

No errors

📕 Actual Behavior

I'm getting this error in console when i'm using the grid component ERROR Error: Exception: NxColDirective. nxRow don't exist

image

📦 Environment

Phil147 commented 11 months ago

Hi @criswagaraje Based on the html snippet I cannot reproduce the error. The check that is done is pretty simple though, it looks for the nxRow attribute in the DOM which actually will break if you use a binding on nxRow, e.g. <div [nxRow]="'row'"> because then Angular will not render the attribute. That should be looked at by us. But as you are not using a binding on nxRow in your snippet I cannot explain why you get the error. Are there multiple grids on this page maybe?

gkaragiannidis-dev commented 7 months ago

what about projected content, would you not get the same error? Should it work that way?

<div nxRow>
 <content></content>
</div>

where content 
<div nxCol>

</div>
criswagaraje commented 7 months ago

hello Georgios

It's already solved, I was implementing it bad, i missed an nxRow directive before using and nxCol directive, Thank you for your time

Best

El jue, 8 feb 2024 a las 14:37, Georgios Karagiannidis (< @.***>) escribió:

what about projected content, would you not get the same error? Should it work that way?

where content

— Reply to this email directly, view it on GitHub https://github.com/allianz/ng-aquila/issues/60#issuecomment-1934142138, or unsubscribe https://github.com/notifications/unsubscribe-auth/BA37ZWFEPLWGWQW6CMH6UXDYSTILLAVCNFSM6AAAAAA6O2V24WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZUGE2DEMJTHA . You are receiving this because you were mentioned.Message ID: @.***>

--

Cristina Wandosell

Frontend Developer

</Digital for Nonconformists>

MAD | MLG | GRX | BsAs

+34 910 519 490

garajedeideas.com https://garajedeideas.com/?utm_medium=mail-interno

Política de privacidad https://garajedeideas.com/privacidad/, LOPD https://garajedeideas.com/LOPD/lopd.html

gkaragiannidis-dev commented 7 months ago

hey, then I should open a new one, cuz I was just checking after I saw your comment and it seems that case fails as well on 16.12

Phil147 commented 7 months ago

what about projected content, would you not get the same error? Should it work that way?

<div nxRow>
 <content></content>
</div>

where content 
<div nxCol>

</div>

Hi @gkaragiannidis-dev yes I would suspect that should fail, that's why we want to change this check for nxRow to use dependency injection. You don't need to create a new issue, we already prioritized this issue now and a fix should come soon. But the fix will land in v17, so we would recommend to update soon.

gkaragiannidis-dev commented 7 months ago

alright, thanks for the heads up

Phil147 commented 6 months ago

This should be fixed in 17.4.0