Ionic conditional no-lines change

Question

How can I change the value of no-lines property dynamically in Ionic?

I have tried:

<ion-item [no-lines]='condition'> test </ion-item>

This gives me an error:

Error: Template parse errors: Can't bind to 'no-lines' since it isn't a known property of 'ion-item'. 1. If 'ion-item' is an Angular component and it has 'no-lines' input, then verify that it is part of this module. 2. If 'ion-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("/div>

Kurt Schwanda Kurt Schwanda · Accepted Answer · 2018-10-23T15:46:35

<ion-item [attr.no-lines]='condition'> test </ion-item>

You need [attr.no-lines] instead of no-lines. Also, it's worth noting if you want lines to appear, you need the expression to evaluate to null not false.

<ion-header>
  <ion-navbar>
    <ion-title>{{ appName }} 3.4.0</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-item>
    Item 1
  </ion-item>
  <ion-item no-lines>
    Item 2
  </ion-item>
  <ion-item [attr.no-lines]="null">
    Item 3
  </ion-item>
  <ion-item [attr.no-lines]="true">
    Item 4
  </ion-item>
  <ion-item [attr.no-lines]="false">
    Item 5
  </ion-item>
</ion-content>

Items 1 and 3 above have lines and items 2, 4, and 5 do not.

Ionic conditional no-lines change

2 Answers